Introduction

We have been creating new content all through this course, and have seen how shared styles can be used to manipulate the look and feel of items added to a screen. Templates allow us to take this reusability further by allowing us to create completely new layouts which can be reused, such as buttons or containers.

Create the Item to Template

First, we create the item we want to configure, then we can turn it into a template.

1. Open the Companies List Screen.
2. From the Palette → Buttons - Secondary section, add a Custom - Icon button to the left of the edit button.
   1.  
3. We need to configure the button to open the Invoicing screen. We could manually create the actionflow, but a shortcut is to drag the screen from the repository onto the button.
   1. Click the  Screen button from the toolbar.
   2. Drag Invoicing onto the Orders button. 
   3. If you simply drag a screen from the repository onto an open screen, a button will be created along with an actionflow to open the screen.
4. Change the Orders button icon to the IconFinance image.
5. Lock your screen and check the new button opens the Invoicing screen.

Create a Template

With the item now created we can turn it into a template:

1.  Unlock the screen.
2. Select the Orders button
   1. When creating a template ensure you have the outermost area of the thing you want to make a template.
3. With the item highlighted in the Layers section, right-click and select Copy as template
4. The properties for the new template open on the right.
   1. A copy of the button is taken and placed in the  Templates section under your application in the repository. 
5. Give the template a useful name e.g. Open Orders
6.  Apply your changes.

Using a Template

1. In the Repository, expand your application.
2. Scroll down to the  Templates section and expand it.
3. Now you can drag this item onto a screen and a copy of its configuration is made.

Template Naming Conventions

When adding new components to a screen via a  Template, child objects are given unique names based on the parent and all expressions in the copied template are adjusted to use these names.

Buttons

• When a button is added to a screen from a template, if the button name is prefixed with the name of the template parent, this is updated to match that of the new parent
  • For example, we have a template area, called "FooArea", with a button inside, called "FooArea_Button"
  • When this template is added to a screen and named "bar", the area will be called "bar" and the button will be called "bar_Button"

Deleting Templates

If you have used a  Template to create a screen(s), the template can be deleted and will not affect the screen created from it.