Versions Compared

Old Version 4

changes.mady.by.user Chris Welford

Saved on

compared with

New Version Current

changes.mady.by.user Chris Welford

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Note

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

Note

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.

...

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:

...

Panel
bgColor#D2F0FA
titleExercise

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.


Panel

Next chapter: TODO 12. Field mappings from drop-downs