Templates

Templates structure the on-screen appearance of the data input Fields, with multiple styles to choose from, these can be aligned centrally, to the left or to the right.  Templates can then be selected to construct Forms.  Use the Template Builder's quick drag-and-drop system with zero-coding for quick and intuitive building.

• Template Configuration
• Template Icon
• Named Styles
• Design Template
  • Add Template Field
  • Add Template Text
  • Dynamic Row/Column Widths in a Card
• Copying and Deleting Templates
• Testing Layouts on Different Devices

Template Configuration

• Title: What is the name you want to give this Template?  This will appear on the screen above the fields that will be displayed in the Template.
• Identifier: What is the unique system identifier for this Template?  This is auto-generated as the Label with no spaces, but can then be overwritten if required. This should reflect the Label you have given it, but cannot have spaces. 
• Help Text: What Help text do you want to appear on the screen when the user clicks on the ‘i’ in the Title bar of the Template (see below).
• Collapsed by Default: This shows only the Title bar of the Template by default and can often help aid User experience when deployed correctly. An example below shows the 'Reference' Template collapsed. You can also collapse a Template at any point in an App by clicking anywhere on the Title bar of the Template.
• Template Type:
  • App Level: This determines whether or not the Template should contain App Level Field Types or not. App Level Field Types, such as Aggregate, are run on the client and do not save against record data but are instead just a display option.
  • Card Level: This option is used in card reports and app home cards. These tend to have fewer columns due to the compact nature they are used in to show key details. Many but not all Field types are supported at Card Level, the majoruty of text and numeric based Fields can be used and also Image List, Document and Action Fields.
  • Form Level: This is the most commonly used option, they are used in forms and pop-ups for reports and have all field types available for use.
• Read-Only: This determines whether or not the Template contents should be Read-only or not. This can remove the need for read-only fields if the whole template is going to be read-only

Template Icon

Select an image from your existing site Image Assets from the Choose Icon button to display next to the Template Title, this should align with the subject of the Template. If you want to use a new image, click the Upload New button to the right to browse your device's files.

Named Styles

Templates

Named Style configuration for templates can be found at the bottom, this decides the style for the whole template not just one field. To find more on how to create and edit your styling options please click here.

Fields

Named Style configuration is accessed when first putting a Field into a Template cell if you click directly on the cell, or via the Pencil Icon next to the Field name if one is already in place. To find more on how to create and edit your styling options please click here.

• Centre, Left and Right alignment works much like on Word for example and can be used to gain that extra level of aesthetic tailoring.
• The Card style also has the same alignment options, yet gives the Field a slightly different appearance as seen above. This can be fantastic when used for key pieces of information that you wish to stand out, or even just as a general preference.

Note: Some fields such as Long Text and GridFields will be automatically configured to span all columns of a row.

When you have finished building your Template, make sure to click 'Update Template' to save any changes.

Design Template

How do you want the data input fields to be displayed on the screen?

When building a new Template, after you have filled in the basic information, there is then the option for 'Design Template' to get into the template builder. 

• First, decide on the maximum number of columns you will need for any row of your Template at this point in time. By default, this is set to 4, but you can add a column by clicking the '+' next to the 'Search Fields' box. Similarly, to add rows click the '+' below the bottom row, in this case row A.

Note: No matter how many columns you display, because the Softools platform is mobile optimised or ‘responsive’, Fields will automatically wrap to the next line if there is not enough space on the web-form. For more on testing this on different devices please click here.

Adding a Field

• Then select the Fields you want to display in each of the columns in a given row by searching for and then dragging them across from the right into the desired row and column. You can also click directly into cells and search from there.
• For certain Fields types you can choose to make them Span a whole row (the width of the screen) by toggling the 'Span' switch to the left of the row.
• To delete a row from the template builder click on the ‘x’ at the end of the row.

Adding Text

If you would like to display static text in the template then this can also be done via two methods. One is to add a Literal Field and then place the Field into a Template Cell. The other is by using the static text feature.

1. Click on the Template Cell where you would like to add the static text
2. Be sure to enable span if you would like the text to display as a fill row. This is typically selected in most scenarios.

This will open a modal. It does allow you to select a Field instead of using the drag and drop but if you click on the Text tab then this is where you can specify the text to display.

1. Click on the Text Content tab.
2. Enter the static text that you would like displayed.
3. Click okay to add the text to the template
4. Make sure you save the Template itself as well after adding the text as the cell content.

In our screenshot we have added an instruction for what information to include in the Description field which will appear directly below the text in our template layout.

Note: A literal Field will support custom HTML whereas the text feature is purely for static text to display.

Dynamic Row/Column Widths in a Card

You can drag and drop the Fields into the template as with all Templates but on the Card report you are also able to control the height and width of the columns within the template. This acts in a similar way to controlling the width of Field columns in a Table Report. To access this feature click on the Row or Column controls as shown below.

Taking Row 1 here as the example, by default it will set to the standard row height within a card report. We can either set it to a fixed width or it can be set to expand within a range based on the available space.

Fixed row/column widths

If you would like the row or column to always display the same width or height then you can toggle the option to use fixed size and then select from the sizing options that have been made available.

Dynamic row/column widths

If you would like the size of the rows or columns to expand to the avialable space then you can switch off fixed sizing and using a combination of min and max size give a dynamic ratio that the columns within each row/column will take to fill the area available in the card.

In the example above, the row will always have a minimum size of small, however as more space is available it will expand up to the maximum size set. The elasticity here acts as a ratio of how much of the available space up to the maximum this row will take compared to other rows when the space is available.

The result of using either fixed or dynamic row and column widths on a card template is as below. This can be particularly useful if you now there will be a column that always has short values or Field types such as Image Lists with a large image size set that need custom sizing in order to appropriately distribute the Fields in the Card

Copying and Deleting Templates

The copy and delete Template functions are described below and accessed via the arrow on the 'Update Template' button.

• Copy: This will create a copy of the Template, forcing you to give it a different ID to the original before doing so.
• Delete: A template can be deleted if it is no longer required. Bare in mind deleting means it will be removed from any forms that it appears in, but this will NOT delete any of the Fields that are contained within the Template. 

Testing Layouts on Different Devices

Make sure to click the 'Save' button when making any changes in order for them to be added to the next app version. Once you have made all the changes you need to an application you are then ready to publish it to workspace.