In this chapter we will create a template to allow commonly used components of apps to be easily created. In this case, we will take something from the contacts app that can be widely used - the set of buttons to edit and manage records, including the rules that hide certain buttons when the user is carryout out a particular activity:

You can save any level of layout as a template, including an entire form.

You can include fields. Some fields are generally useful across many apps, for example:

UID (which you can make hidden, so that you don't need to set this on each app build)
Name field
Description field

This works even if you change the underlying stream because we are using the setting Copy Values By Name - as long as the fields in each stream share the field names (including capitalisation), this will work.

You can also include data validation in custom actions if this applies across multiple forms - this may be applicable across a number of related apps, even if they use different underlying streams.

Typically, rather than saving entire forms as templates, you may want to build a list of components, using areas - which in turn contain a number of other components - which provide flexibility while still supporting the rapid creation of new apps. For example:

An area containing a set of form buttons
An area containing a set of commonly used hidden fields
An area containing a set of commonly used visible fields

You may also want to build headers and footers, including text fields and logos.

In future versions, PhixFlow will be shipped with a set of pre-built layouts, so at each new version it is worth checking out the standard shipped templates to see if there is already something you can use directly, or that you can use with a few customisations.

Create template

Create a template for your app buttons. To recap the steps in the video:

Create layout copies of your buttons

Create a dashboard called Template Dashboard
On the dashboard, create a new form
- Double click on the background to bring up the configuration form for the form, call it Template Form
Open the Basic Components palette
Drag on an Area to your form
Update the name of the area to Basic Form Edit Buttons Template
Drag the area out so that it is large enough to accommodate all four buttons
Create template copies of the buttons on the contacts app:
- Note: you could, instead, re-create the buttons from scratch; but since you can use the buttons in the contacts app with only minor modifications, this is a useful time saver
- Open the layout for the contacts edit form:
  - Under the application Contacts, in the repository browser open the list of Layouts
  - Find the layout for the contacts edit form - we called this Contact Details
  - Expand this layout - you will see all the components you have configured on the contacts edit form
- For each of the four buttons, right click and select Copy as a template
Find the layout copies of the buttons:
- In the repository browser under Contacts, open the list of Layout Templates
- You will see the list of buttons
Remove rules specific to handling contacts:
- Open configuration for the template copy of Add Contact - remove the custom action, since this applies validation specific for contacts
  - Update the name of the button to Add (this step was missed in the video)
- Open configuration for the template copy of Update Contact - as above, remove the custom action
  - Update the name of the button to Update (this step was missed in the video)
- Note: the Clear Contact Fields button has no custom action
  - Update the name of the button to Clear Fields (this step was missed in the video)
- Note: the Delete Contact has a custom action, but this just sets the confirmation message to something that is widely applicable, so we can leave this in place
  - Update the name of the button to Delete (this step was missed in the video)

Complete creating of area template including buttons

Dragging a layout template onto a form created a complete copy of those components on that form (i.e. under that layout). You can then change the components added to the form without affecting the template.

Bring the dashboard Template Dashboard back to the front
Drag all four buttons from the layout templates into the area
Re-arrange the buttons to make them look neat - use the layout options under [right click] → Arrange the selected items
Now save the area as a template:
- Under the application Contacts, in the repository browser open the list of Layouts
- Find the layout for the template edit form - Template form
- Right click on the area and Copy as a template

You should now be able to see the new area under the list of Layout Templates - if you expand this, you can see all the buttons owned by the area.

Create country list app

Create a new app to manage a country list:

Create a new stream called Country List
- Remember to set the period to Transactional
Add the attributes:
- UID (remember to make this an integer)
- Country
Pin the configuration form for the stream, this is useful because we will use this form several times over the next few steps
Create a new dashboard Country List
Add a grid view to the dashboard including all attributes from the stream
Add a form to the dashboard, and drag on all attributes from the stream
Link the two views by dragging UID from the grid view on top of the edit form
Hide UID in both views

Now you can add your new area template:

Find, under the list of Layout Templates, the template Basic Form Edit Buttons Template
Drag this on to the edit form

That completes configuration of your new country list app. Go into App Mode, and try adding and updating (and even deleting) some countries.

Exercise

Create a Close button. Although dashboards already have a close button, it might be easier for some users to see a button labelled Close next to the other buttons in the form.

On your Template Dashboard, create a close button - this needs to do nothing other than close the current dashboard. You can do this by adding a custom action with Close Parent Dashboard ticked. You can create this action on any of your existing streams - or even create a new stream (called, say, Template Actions) that acts as container for actions that are used across multiple apps, and do not relate to a specific data set.

Update the name of the area Basic Form Edit Buttons Template, that contains the buttons, and save this as a new template.

Replace the buttons on your country list app with the new set of five buttons by dragging on the new template.

Next chapter: TODO

10. Building templates

Create template

Create layout copies of your buttons

Complete creating of area template including buttons

Create country list app