How Do I Create a Component Template?

This guide takes you through the process to creating a Component Template. 

A component template is a predefined structure or layout for creating specific component within the SmartUX Designer tool.

Here is the folder layout for the Component Template. Inside the component folder, the SmartUX Designer offers three template groups: Blank, Forms, and Login.
A group of templates can include multiple individual templates.

Each component template contains three essential files: 

• a PNG preview image illustrating the Template, 
• a CSS file for styling the Template, and 
• an HTML file containing the code for the Template.

For instance, SmartUX Designer offers a custom login template that includes all three associated files.

While incorporating a fresh Program or Component within SmartUX, it prompts you to select a Component Template from the previously saved choices.

The HTML consists of recognized Widgets that are strategically organized to achieve a particular design. While creating a Template, it is recommended to employ familiar Widgets thereby making it easier to configure and manipulate the Template as needed.

A convenient approach is to design a Component within SmartUX Studio and then save it as a Template for future use.

Once a Component Template is saved, it is readily available in the Add Program dialog. The component Template is created in CustomComponentsTemplate folder within the component folder, including files like CSS and HTML. To finalize the Template, you must include a PNG preview image.