Learning about design templates

Design templates are reusable patterns that provide form and function for your user interface. Each template includes predefined areas to which you can add application content. By applying design templates to UI sections, you achieve consistency across your application, shorten development time, and reduce maintenance efforts.

Template-based sections

Design templates consist of a layout and named regions. When you create a new section, you can specify the design template for the section, and then insert your content, for example, fields or other reusable sections, into the regions.

When you update the content of a design template, any section that uses that design template is automatically rebuilt when you generate your application. Similarly, when you switch the design template on which a section is based to another template, the section is automatically rebuilt with the new template. In this way, you reduce maintenance to a minimum because when you need to change the interface, you only need to adjust several templates instead of a large number of individual sections.

Design templates and rulesets

Design templates are rules that you can store in rulesets, which affects how they function. As rules, you can also version design templates, save them in branch rulesets, and so on.

When you develop a UI with the use of design templates, consider the following points:

  • If a design template is in an application ruleset, the design template can support only sections in the application ruleset, or in branch rulesets of the same application.

  • If a design template includes rules from branch rulesets, such as binary files, you cannot apply that design template to a section that you create in the application ruleset in App Studio. In such a scenario, the rule (the binary file) is unavailable.

  • If a design template of a section is part of a specialized ruleset, you cannot switch that design template to another template.

Best practices

Ensure that you benefit from the advantages of design templates to the fullest extent by learning about the best practices for using design templates in your UI.
  • When you build your UI and you identify components or widgets that share design patterns, create design templates that you can reuse for those components.
  • Ensure that each template has a specific purpose but is general enough to allow reuse elsewhere.
  • Give each template a name that describes its purpose.
  • Create an icon for each template that shows a simplified layout for the contents of the template.
  • Identify the regions of your template in which you want to place content and give them descriptive names. For example, title, image, and status.
  • Find balance in the number of templates: do not create a template for every scenario and do not create a few generic templates for universal reuse.
  • Allow for efficient edition of a design template in App Studio, by opening the design template, and then, on the Settings tab, selecting the Allow section to be edited at runtime check box.