- Open your preferred terminal tool.
- Enter
npm run create. - Complete the component details:
- Enter the name of the component.
For example: customcomp0
- Enter the component label.
For example: custom component
- Enter the version number of the component.
For example: 0.0.1
- Enter the name of the library.
The name of the library has to match the name of an existing company
library.
For example: basic
- To provide a list of supported applications,
enter the names of the supported applications, each name separated by a
comma.
For example: uPlusApp, ABCInsuranceClaims, uBankingTool
Note: If you do not provide any supported
applications, the component is available for all applications by
default.
- Enter the type of the component.
For example: Field
- Enter the subtype of the component.
Note: Component authoring teams can use subtype
metadata. The template code does not use the metadata. You can
change it at any time in the config.json
file.
For example: Text
- To describe the project, enter a description of
the component.
For example: This is a customized searchbox that filters data.
Note: You can skip entering the details of the component
now and manually enter the details in the
tasks.config.json after the component is created.
To skip entering the details, run the following command:
npm run create <enter_component_name>
Result: The component is created in the following path:
/Users/your_user_name/project_name/src/components/component_nameA
src/components folder is created and the necessary
files required to build the component are initialized as seen
below.
├── src
├── components
├── <component_name>
├── index.jsx
├── demo.stories.jsx
├── config.json
├── styles.js
The index.jsx file contains the
actual component rendering logic.
The
demo.stories.jsx file contains the demo that can be
viewed in the storybook.
The config.json file
contains the mapping of properties for configuring the auto-generated
property pane. This property pane is displayed in App Studio when an application is being authored to use the custom
component.
The properties in the context of Custom DX Components are
definitions of component parameters used during design and at run time.
Design settings are constant. Run time parameters which contain field
references are resolved from the case at run time.
- Run the following command to start the Storybook to view the demo:
npm start
- Modify the source files to build your own component.
You create custom components by using generally available tools. You need
advanced knowledge to create reliable custom components in Cosmos React. For more information, see the
following resources:
You can also install and import third-party libraries if required for your
component.
