Granite-Kendo Component Library¶
What Is Granite-Kendo Component Library¶
The purpose of this library is to enable the use of Kendo components across various areas of the IFS Cloud application. Currently, most visualization elements within IFS Cloud leverage Kendo components, but these implementations are confined to the Client Framework. This library extends the availability of Kendo components, allowing for broader usage throughout the application.
By utilizing this library, Kendo components are adapted and wrapped with the design principles and concepts followed by IFS Cloud, simplifying their integration into different contexts. The elements exposed through the Granite-Kendo component library provide a seamless way for users to incorporate Kendo components into their applications.
Overview¶
Link | |
---|---|
Source Repository | https://bitbucket.org/ifs-pd/ifs-ux-granitekendocomponents-source/src/master/ |
Build Artifacts | https://bitbucket.org/ifs-pd/ifs-ux-granitekendocomponents/src/master/ |
The source repository contains the complete implementation code for all components. Both newly developed components and existing ones are organized within this repository under the /projects/granite-kendo-componets/src/lib
folder.
To make these components accessible for external use, the development team packages them into artifacts, which are then stored in the granite-kendo-components repository. This approach ensures that the components can be easily integrated and utilized outside the primary project. To use these components, the correct set of artifacts must be added. Whenever a commit is made to the master branch of the granite-kendo-components-source repository, the system automatically builds all components within the specified folder and generates the corresponding artifacts. After the components are built, a new commit is created in the master branch of the granite-kendo-components repository. To use these components, the appropriate version, based on the commit ID from the granite-kendo-components repository, must be referenced in the package.json
repository.
Example:
"granite-kendo-components":"git+ssh://git@bitbucket.org:ifs-pd/ifs-ux-granitekendocomponents.git#f61ca7e08c2587386f01468f1f50338a65fd7a03"
f61ca7e08c2587386f01468f1f50338a65fd7a03
is the commit id
How To Include New Kendo Component¶
New components can be added to the library, and this section provides a step-by-step guide on how to do so.
-
First, identify the appropriate folder to place your component. For instance, if a chart component is being added, navigate to the
lib
folder. Open a bash terminal in the root directory, ensuring that you are within thegranite-kendo-components
folder. -
Next, run the command below to create the component. The following example demonstrates how to create a Kendo Date Picker component.
Note : make sure to start the component name with granite-kendo-
ng g c granite-kendo-date-picker --standalone=false --project=granite-kendo-components --skip-import
After executing the command, a notification will confirm that a new component has been successfully created within the current folder.
Note: Make sure that newly create component always under the lib folder.
-
After creating the component, a general
NgModule
must be created to declare and export the new component. Navigate to the newly created component folder and execute the following command to generate the module. -
cd granite-kendo-date-picker
: this command will navigate into the newly created component -
ng g m granite-kendo-date-picker --flat
: this will create the new component
Note : When providing a module name, ensure it matches the name given to the component.
- At this point, the setup is nearly complete. After creating all the required files, it is essential to expose the components by adding entries to the
public-api.ts
file. In this file, you will define which modules and components should be made accessible to external users.
How To Test Component Functionality¶
It is essential to conduct thorough testing before building the library artifact. To facilitate this, it is recommended to have a designated testing environment. This allows you to run the project locally and verify that your component is functioning as intended.
Note: To run the project locally, a Kendo license is required. Please contact [insert contact information] to obtain a license.
Follow the steps below to add your component to the landing page and test its functionality:
- Once everything is set up, you can build the artifacts for your new component by executing the following command in the root folder.
npm run build:granite-kendo-components
Note: If you encounter any errors, it indicates that the component you created may be causing issues.
- Add the module file to the
imports
array in theapp.module.ts
file. -
You can then include your new component in the card template within the
app.component.html
file on the landing page. -
Execute the following command to start the client server. http://localhost:4200.
How To Use The Components¶
Once you have created the component and confirmed that it is functioning as expected, you can initiate a pull request to merge your changes into the master branch. This pull request should be reviewed by [insert reviewer's name or team]
. Upon receiving their approval, you may proceed to merge your changes.
After committing your changes to the master branch, the build process will be automatically triggered, and the build artifacts will be committed to the master branch of the other repository. Click the link to access the commit history, where you can copy the commit ID associated with the latest commit. This commit should include the changes for your new component.