Creating Shared Help Topics

This document describes how to create a shared topic (template) which is used to produce separate topics for a particular feature of the IgxGrid, IgxTreeGrid and/or IgxHierarchicalGrid components.

The main idea is to have a single topic template for a feature supported by all grids. The build process will generate separate topics, for the feature in question, for each grid component.

Currently, there are separate sets of templates for each supported language. Here are the exact locations:

• for English: /en/components/grids_templates
• for Japanese: /jp/components/grids_templates
• for Korean: /kr/components/grids_templates

These sets of templates are used by the 'generate-grids-topics' gulp task during the build process. This task is producing folders with topics for each grid (IgxGrid, IgxTreeGrid and IgxHierarchicalGrid), based on the templates. There are, also, sets of variables with their corresponding values passed as arguments to each grid during build process and used to replace key parts of the shared topics. These variables and build path are all configured in the 'generate-grids-topics' gulp task.

Here are some examples of the variables:

Variable Name	Description	Grid	Tree Grid	Hierarchical Grid
igPath	The topics' output path for each grid	/grid	/treeGrid	/hierarchicalGrid
igComponentName	The grid component's name	IgxGrid	IgxTreeGrid	IgxHierarchicalGrid
igComponentDoc	The component specific part of the doctype links	igxgridcomponent	igxtreegridcomponent	igxhierarchicalgridcomponent
igComponentSelector	The component's selector value for a specific grid	igx-grid	igx-tree-grid	igx-hierarchical-grid

Note: Currently all topics for the three grids are generated from the templates with the exception of the main topics: grid.md, tree_grid.md and hierachical_grid.md.

Based on the above example, you can 'flag' a specific paragraph or code snippet using the 'if' statement like this:

@@if (igComponentName === 'IgxGrid') {
	This paragraph contains specific information regarding the IgxGridComponent.
}
@@if (igComponentName === 'IgxTreeGrid') {
    This paragraph contains specific information regarding the IgxTreeGridComponent.
}
@@if (igComponentName === 'IgxHierarchicalGrid') {
    This paragraph contains specific information regarding the IgxHierarchicalGridComponent.
}

Here is an example of a 'shared' code snippet:

this.@@igCompRef.showToolbar = true;

The above example will generate the following output for the three grids:

this.grid.showToolbar = true;

this.treeGrid.showToolbar = true;

this.hierarchicalGrid.showToolbar = true;

You can even include a whole .md file inside another one, using the 'include' statement:

@@include('./externalCode.md')

and even combine 'if' and 'include' statements:

@@if (igComponentName === 'IgxTreeGrid') {
    @@include('./treeGridSpecificCodeSnippet.md')
}

For more information see the gulp-file-include plugin:

https://www.npmjs.com/package/gulp-file-include

https://github.com/coderhaoxin/gulp-file-include