Views:

In this article we show you how to create and use Custom Templates with North52 Quick Tile functionality. 

Please review the overview article to see examples of what you can do with Quick Tiles and Custom Templates.  

Step 1 - Design your custom template

The custom template will be a combination of HTML and Handlebars syntax (see https://handlebarsjs.com/ for details on how to define Handlebars templates).  The example we will use for this article is a basic label based on the Bootstrap 3 Labels (see https://getbootstrap.com/docs/3.3/components/#labels for details). The Quick Tile web resource has the Bootstrap 3 components built in so we do not have define addition styles in our custom template.

The basis of our template will be the HTML:

<span class="label label-default">Default</span>

This will be repeated for however many "tiles" we define in our Decision Table, and the dynamic components will be the  class name and the text for the label (the highlighted text above).

The template using Handlebars syntax will be:

<style>.label{font-size:100%;line-height:2em}</style>
{{#each tiles}}
   <span class="label label-{{class}}">{{label}}</span>
{{/each}}

{{class}} and {{label}} will be dynamically replaced by the Quick Tile Decision Table when it is rendered. The styles override the defaults can be adjusted to meet you own needs.

Add the template to an xCache record

  • Navigate to the North52 App
  • Click xCache from the left navigation menu
  • Click New
  • For Category enter QuickTileTemplate
  • For Base Key enter QuickTileTemplate_DynamicLabels
  • In the Value (Secured) field copy and paste the template above
  • Click Save

Step 2 - Create the Quick Tile Formula

  • Navigate to the North52 App
  • Click Formulas from the left navigation menu
  • Click New
    • Select Account
    • Select ClientSide Calculation for Formula Type
    • Select the Decision Table editor
    • Click Create
  • Rename your Formula to Account - Custom Quick Tile Labels
  • Click Save
  • From the Snippets menu above the Decision Table sheet select Quick Tile
    • Snippets menu:
    • This will add two preconfigured Decision Sheets to the Formula:
  • Double-click the first sheet label and rename to Label-1
  • Rename cell A2 to Label-1
  • Rename cell B2 to Class-1
  • Delete columns C to G
  • Update cell C4 to reflect the changes made to columns A and B:
    • Delete the existing contents of the CreateUIControl function
    • Add references to columns A and B:
      • Click on the Source tab
      • Click the refresh icon (to the right of the Search Source… box)
      • Expand Decision Table Calculations
      • Expand Label-1
      • Place the cursor between the brackets in cell C4
      • Click on Label-1, add a comma, then click on Class-1 from the Source tree
      • C4 should now contain CreateUIControl({Label-1},{Class-1})
  • In cell A4 enter 'My Label 1'
  • In cell B4 enter 'success' (this is the class name that will show the label in green)
  • Click Save, your Formula should look like this:
  • Double-click the second sheet label DecisionTable and rename Render Labels
  • In cell A4, place the cursor to the right of the first opening bracket
    • Add the function CreateUIProperty('xcachetemplate','xCacheKey') followed by a comma
    • Delete the text 'xCacheKey' and leave the cursor in its place
    • From the Source tab expand the xCache node and then the QuickTileTemplate node
    • Ensure the cursor is still after the comma in the CreateUIProperty function and click on QuickTileTemplate_DynamicLabels
    • This will add {{QuickTileTemplate_DynamicLabels}} to the function
  • Cell A4 should now contain like CreateUIControlCollection(CreateUIProperty('xcachetemplate',{{QuickTileTemplate_DynamicLabels}}),{CreateControl-1})
  • Click Save

Step 3 - Add the Quick Tile web resource to your form

  • Copy the Formula Short Code in the top right of the Formula form (Aes in the example above)
  • Open the Form Designer for the Form you wish to add
  • Add the North52 Quick Tile HTML web resource component to the form in the desired place
    • Edit the web resource properties and add the Formula Short Code to the Custom parameter data
  • Click Save and Publish
  • Navigate to an Account record and view the custom Quick Tile template showing the label:

 
Step 4 - Add further labels

If you would like to add multiple labels, all you need to do is duplicate the Label-1 sheet and make a few updates.

  • Right-click anywhere on the Label-1 Decision Table sheet and select Insert > Insert Duplicate Decision Table
  • Double-click the new sheet label and rename Label-2
  • Rename the values in row 2:
    • Label-1 => Label-2
    • Class-1 => Class-2
    • CreateControl-1 => CreateControl-2
  • Update any rows with the CreateUIControl({Label-1},{Class-1}) => CreateUIControl({Label-2},{Class-2})
  • Select column A and right-click selecting Insert > Insert Condition
  • Select cell A2 and click on Credit Hold (Value) from the Source tree
  • Select cell A4, expand the Credit Hold (Value) from the Source tree, and click on No
  • Select cell A5, click Yes (from under the Credit Hold (Value) node)
  • In cell B4 enter 'Not on Credit hold'
  • In cell B5 enter 'CREDIT HOLD!'
  • Enter 'warning' in C5
  • Copy cell D4 to D5
  • The sheet should look like this:
  • On the Render Labels sheet add the second label to the CreateUIControlCollection function by adding {CreateControl-2} - it should look like:
    • CreateUIControlCollection(CreateUIProperty('xcachetemplate',{{QuickTileTemplate_DynamicLabels}}),{CreateControl-1},{CreateControl-2})
  • Click Save
    • If you get a North52 BPA Exception: Unable to find reference error on save you will need to update the Source tab by clicking the refresh button at the top of the tab before clicking Save again
  • Reload your Account record setting the Credit Hold value to Yes and No to see the changes:
    • Credit Hold set to Yes:
    • Credit Hold set to No:

 

Of course your conditions and values can harness the full power of the North52 rules engine to enable some very complex scenarios. If you need help meeting a requirement with Quick Tile Custom Templates please get in touch with our support team.
 

Keywords: Quick Tile, custom template