-
Notifications
You must be signed in to change notification settings - Fork 4
Extensibility Support
To automatically create a custom template, use the generate command. This will not only create a configuration file and a basic file structure but will also automatically register your new template to the Ignite UI CLI.
You can find an example of automatically creating a custom template at the "Examples" section below.
You can create a custom template manually, without using a command (however, using the generate command can save you a lot of time) and later register it to the Ignite UI CLI. If you prefer this approach, you need to create and setup a template.json file that contains the template's configuration as well as a files folder that contains the actual files your template consists of.
After you are done with creating those, there are two steps you need to execute in order for your new template to be available when creating a new application using the CLI:
- You need to register the custom template into the Ignite UI CLI
- You need to configure the
template.json
In case you have generated your template using the generate command the template gets automatically registered into the CLI, unless you have set the skip-config flag to false.
If that's the case or you have created your custom template structure manually you need to use config command to add the root folder of the custom template as a record to the `customTemplates' property of the config.
ig config add customTemplates <value>| Property | Description |
|---|---|
| id | The id is a string property which should be unique for the framework you want to add the template to. If you add the template to a project using the add command, you will need to provide this id as the first argument. |
| name | The name is a string property representing the friendly name of the template which will be displayed when using the wizard mode of the CLI. |
| description | The description is a string property describing the purpose of the template. |
| dependencies | The dependencies is an array of strings (dependencies) - which are used from the CLI to load correct modules for the specific template. |
| framework | The framework is a string property that defines in what framework the template will be available. Those are the supported frameworks: jQuery, Angular and React. |
| projectType | The projectType is a string property that defines for what project type the template will be available. You can find all the available controls in the "Project types" table. |
| components | The components is an array of strings (components) - which are used from the CLI to show the template under the correct control it refers to when using the wizard mode . You can find all the available controls in the "Control groups and components" table |
| controlGroup | The controlGroup is a string property which is used from the CLI to show the template under the correct control group when using the wizard mode . You can find all the available controls in the "Control groups and components" table. |
| listInComponentTemplates | The listInComponentTemplates is a boolean property which defines if the template will be shown under the selected control group and component alongside with the other templates when using the wizard mode . If this is set to true, listInCustomTemplates property should be set to false. |
| listInCustomTemplates | The listInComponentTemplates is a boolean property which defines if the template will be shown under the Views option, alongside with the other custom templates when using the wizard mode . If this is set to true, listInComponentTemplates property should be set to false. |
Following is the list of project types, depending on the selected framework.
| Framework | Project type |
|---|---|
"jquery" |
"js" |
"angular" |
"ig-ts" (Angular Wrappers) |
"angular" |
"igx-ts" (Angular) |
"react" |
"es6" |
This table lists the control groups and the components that are available when adding a template for jQuery, React or Ignite UI Angular Wrappers projects.
| Control Groups | Components |
|---|---|
| Data Grids | |
| Grid | |
| Hierarchical Grid | |
| Tree Grid | |
| Data Entry | |
| Editors | |
| Combo | |
| Charts | |
| Bar Chart | |
| Column Chart | |
| Doughnut Chart | |
| Financial Chart | |
| Funnel Chart | |
| Line Chart | |
| Pie Chart | |
| Radial Chart | |
| Scatter Chart |
This table lists the control groups and the components that are available when adding a template for Ignite UI for Angular projects.
| Control Groups | Components |
|---|---|
| Grids&Lists | |
| Grid | |
| List | |
| Layouts | |
| Tabbar | |
| Carousel | |
| Scheduling | |
| Date Picker |
The following example demonstrates how to generate a new template containing a grid component that we want to use in our future Ignite UI for Angular projects. We will also update the template.json to include it to the list of the available grid templates.
First we need to execute the generate command to create our new template. We will use the argument aliases:
ig g t myTemplate -f=angular -t=igx-ts
After our template is generated, we can setup our grid component and when we are done, we need to open the template.json file to make the required updates. As we want our new template to appear under the Grid control, which is included inside the 'Grids&Lists' control group, our changes will look like this:
"components": [ "Grid" ]
"controlGroup": "Grids&Lists
"listInCustomTemplates": false
"listInComponentTemplates": true
After executing those steps, when you activate the Ignite UI CLI step by step mode, using the ig command, after selecting to create a new Ignite UI for Angular application, you will find your new template under Add component > Grids&Lists > Grid.
The following example demonstrates how to genmanually create a new template which contains a grid component. We want to use it in our future React projects. We will also make sure to include it to the list of the available grid templates.
We need to create a new folder that will contain our custom template. Inside we should create an empty template.json file and also a files folder that will contain all the files that our template needs. The content of the files folder will be copied to your actual project when adding the custom template.
Open the template.json file in a text editor and paste the follwoing setup in it:
{
"id": "myTemplate",
"name": "myTemplate",
"description": "This is a React custom template with id: myTemplate",
"framework": "react",
"projectType": "es6",
"components": [ "Grid" ],
"controlGroup": "Data Grids",
"listInCustomTemplates": false,
"listInComponentTemplates": true,
"dependencies": []
}
After you save the template.json file, you just need to register your new template into the Ignite UI CLI..
When this is done, you will be able to use this template in your future projects.