Views:

There are several sample Quick Tile custom template configurations provided below. Follow the instructions below to implement within your North52 system.

  1. Create a new xCache record with the relevant template details shown below
  2. Create a new ClientSide Calculation Formula for the Table you would like the Quick Tile to be displayed on (to save time building the Formula contact support@north52.com for a template you can copy and paste into your Formula)
  3. Place the Quick Tile on your Form - see Step 3 on the Quick Tile Custom Template Configuration article

 

Progress Steps

Formula

xCache

Category: QuickTileTemplate
Base Key: QuickTileTemplate_ProgressSteps
Value: 

<div style="margin: 20px 0; padding-bottom: 20px;">
   <div style="position: relative; display: flex; align-items: flex-start; margin-bottom: 10px;">
       <!-- Background line -->
       <div style="position: absolute; top: 10px; left: 10px; right: 10px; height: 4px; background-color: #dfe3e4; z-index: 1;"></div>
       {{#each tiles}}{{#if stepname}}
           <div style="position: relative; flex: 1; text-align: center; z-index: 2;">
               {{#if iscomplete}}
                   <!-- Complete step circle with checkmark -->
                   <div style="width: 20px; height: 20px; margin: 0 auto 8px; background: #090; border: 4px solid #090; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: bold; position: relative; z-index: 3;">✓</div>
                   <div style="font-size: 12px; color: #090; font-weight: 500;">{{stepname}}</div>
                   <!-- Progress line to next step -->
                   <div style="position: absolute; top: 10px; left: 50%; width: 100%; height: 4px; background: #2183dd; z-index: 1;"></div>
               {{else}}
                   {{#if isactive}}
                       <!-- Active step circle -->
                       <div style="width: 20px; height: 20px; margin: 0 auto 8px; background: white; border: 4px solid #2183dd; border-radius: 50%; box-shadow: 0 0 0 4px rgba(33, 131, 221, 0.2); position: relative; z-index: 3;"></div>
                       <div style="font-size: 12px; color: #2183dd; font-weight: 500;">{{stepname}}</div>
                   {{else}}
                       <!-- Inactive step circle -->
                       <div style="width: 20px; height: 20px; margin: 0 auto 8px; background: white; border: 4px solid #dfe3e4; border-radius: 50%; position: relative; z-index: 3;"></div>
                       <div style="font-size: 12px; color: #888;">{{stepname}}</div>
                   {{/if}}
               {{/if}}
           </div>
       {{/if}}{{/each}}
   </div>
   <!-- Message panels -->
   {{#each tiles}}{{#if message}}
       <div style="margin-bottom: 0; margin-top: 30px; text-align: center; background-color: #d9edf7; padding: 15px; border: 1px solid #bce8f1; border-radius: 4px;">
           {{{message}}}
       </div>
   {{/if}}{{/each}}
</div>

Progress Steps with Message

Formula

xCache

Category: QuickTileTemplate
Base Key: QuickTileTemplate_ProgressSteps
Value: 

<div style="margin: 20px 0; padding-bottom: 20px;">
   <div style="position: relative; display: flex; align-items: flex-start; margin-bottom: 10px;">
       <!-- Background line -->
       <div style="position: absolute; top: 10px; left: 10px; right: 10px; height: 4px; background-color: #dfe3e4; z-index: 1;"></div>
       {{#each tiles}}{{#if stepname}}
           <div style="position: relative; flex: 1; text-align: center; z-index: 2;">
               {{#if iscomplete}}
                   <!-- Complete step circle with checkmark -->
                   <div style="width: 20px; height: 20px; margin: 0 auto 8px; background: #090; border: 4px solid #090; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: bold; position: relative; z-index: 3;">✓</div>
                   <div style="font-size: 12px; color: #090; font-weight: 500;">{{stepname}}</div>
                   <!-- Progress line to next step -->
                   <div style="position: absolute; top: 10px; left: 50%; width: 100%; height: 4px; background: #2183dd; z-index: 1;"></div>
               {{else}}
                   {{#if isactive}}
                       <!-- Active step circle -->
                       <div style="width: 20px; height: 20px; margin: 0 auto 8px; background: white; border: 4px solid #2183dd; border-radius: 50%; box-shadow: 0 0 0 4px rgba(33, 131, 221, 0.2); position: relative; z-index: 3;"></div>
                       <div style="font-size: 12px; color: #2183dd; font-weight: 500;">{{stepname}}</div>
                   {{else}}
                       <!-- Inactive step circle -->
                       <div style="width: 20px; height: 20px; margin: 0 auto 8px; background: white; border: 4px solid #dfe3e4; border-radius: 50%; position: relative; z-index: 3;"></div>
                       <div style="font-size: 12px; color: #888;">{{stepname}}</div>
                   {{/if}}
               {{/if}}
           </div>
       {{/if}}{{/each}}
   </div>
   <!-- Message panels -->
   {{#each tiles}}{{#if message}}
       <div style="margin-bottom: 0; margin-top: 30px; text-align: center; background-color: #d9edf7; padding: 15px; border: 1px solid #bce8f1; border-radius: 4px;">
           {{{message}}}
       </div>
   {{/if}}{{/each}}
</div>

Labels

Formula

xCache

Category: QuickTileTemplate
Base Key: QuickTileTemplate_Labels
Value: 

{{#each tiles}}{{#if link}}<a href="{{link}}" target="{{linktarget}}">{{/if}}<span class="label {{#if class}}label-{{class}}{{/if}}"  style="font-size:85%;{{style}}">{{label}}</span>{{#if link}}</a>{{/if}} {{/each}}

Statistics

Formula

xCache

Category: QuickTileTemplate
Base Key: QuickTileTemplate_StatsList
Value: 

<ul style="list-style-type: none; clear: left; margin: 0; padding: 0; text-align: center; margin-bottom: 30px;">  
{{#each tiles}}<li style="display: inline-block; margin-right: 10px; padding-right: 10px; border-right: 1px solid #cacaca; text-align: center; font-size: 1.1em; font-weight: bold;{{#if csscolor}} color: {{csscolor}};{{/if}}{{#if @last}} border: none; margin: 0; padding: 0;{{/if}}">
   {{statvalue}} <span style="display: block; margin-top: 2px; font-size: 0.9em; font-weight: normal;">{{statlabel}}</span>
 </li>{{/each}}
</ul>

Notification Badges

Formula

xCache

Category: QuickTileTemplate
Base Key: QuickTileTemplate_NotificationBadge
Value: 

<div style="padding: 15px; text-align: center;">
{{#each tiles}}
<a href="{{linkurl}}" target="_top" style="background-color: #1779ba; text-decoration: none; padding: 0.9rem; position: relative; display: inline-block; border-radius: 0.4rem; transition: all ease 0.4s; margin-right: 10px;">
 <span style="color: white; font-size: 16px;" class="glyphicon {{iconname}}"></span>
 <span style="position: absolute; top: -10px; right: -10px; font-size: .8em; background: #cc4b37; color: #fefefe; display: inline-block; min-width: 2.1em; padding: 0.3em; border-radius: 50%; text-align: center;">{{alertvalue}}</span>
</a>
{{/each}}
</div>

Custom Columns

Formula

xCache

Category: QuickTileTemplate
Base Key: QuickTileTemplate_Grid
Value: 

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 20px;">
   {{#each tiles}}
     <div style="border-radius: 5px; display: grid; grid-template-rows: auto 1fr auto;">
          <div style="color: rgba(255, 255, 255, 0.9); padding: 10px; background: {{headerbkg}}; font-weight: bold; font-size: 14px; border-top-left-radius: inherit; border-top-right-radius: inherit;">{{header}}</div>
          <div style="padding: 20px; font-size: 14px; background: {{bodybkg}};">
              <ul style="list-style: none; margin: 0; padding: 0;">
                   {{#each body.exclusionInclusions}}<li style="display: flex; align-items: center; padding-bottom: 7px; color: inherit;"><i style="padding-right: 7px; {{#ifEquals excludeInclude 'Include'}}color: green; font-size: 20px;{{else}}color: red; font-size: 20px;{{/ifEquals}}" class="glyphicon {{#ifEquals excludeInclude 'Include'}}glyphicon-ok{{else}}glyphicon-remove{{/ifEquals}}"></i>{{exclusionInclusionLOB}}</li>{{/each}}
              </ul>
           </div>
           <div style="background: {{footerbkg}}; padding: 10px; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; text-align: center;"><button class="btn btn-xs n52button" data-n52shortcode="abc" data-n52identifier="{{recordId}}" data-n52bind="{{@index}}">{{buttontext}}</button>
</div>
       </div>    
       {{/each}}
     </div>

Validation Messages - Simple

Formula

xCache

Category: QuickTileTemplate
Base Key: QuickTileTemplate_ValidationSimpleJSON
Value: 

<div style="border: 1px solid #ddd; border-radius: 4px; overflow: hidden; width: calc(100% - 1px);">
 <!-- Header -→
 <div style="display: flex; background-color: #f5f5f5; border-bottom: 1px solid #ddd; font-weight: bold;">
   <div style="flex: 1; padding: 8px 12px; border-right: 1px solid #ddd;">Field Name</div>
   <div style="flex: 2; padding: 8px 12px;">Validation Message</div>
 </div>
 <!-- Body -→
 <div>
   {{#each tiles}}
     {{#each validations}}
     <div style="display: flex; border-bottom: 1px solid #eee; background-color: #fff;">
       <div style="flex: 1; padding: 8px 12px; border-right: 1px solid #eee;">{{name}}</div>
       <div style="flex: 2; padding: 8px 12px;">{{description}}</div>
     </div>
     {{else}}
     <div style="display: flex; padding: 8px 12px; text-align: center; color: #999; font-style: italic; justify-content: center;">
       <div>No validation messages</div>
     </div>
     {{/each}}
   {{/each}}
 </div>
</div>

Validation Messages - Nested

Formula

xCache

Category: QuickTileTemplate
Base Key: QuickTileTemplate_ValidationNestedJSON
Value: 

{{#each tiles}}
{{#each validations}}
 {{#each this}}
 <!-- Label for each validation group -→
 <h4 style="margin-top: 20px; margin-bottom: 10px; color: #333;">{{@key}}</h4>
<div style="border: 1px solid #ddd; border-radius: 4px; overflow: hidden;width: calc(100% - 1px);">
   <!-- Header -->
   <div style="display: flex; background-color: #f5f5f5; border-bottom: 1px solid #ddd; font-weight: bold;">
     <div style="flex: 1; padding: 8px 12px; border-right: 1px solid #ddd;">Field Name</div>
     <div style="flex: 2; padding: 8px 12px;">Validation Message</div>
   </div>  
   <!-- Body -→
   <div>
     {{#each this}}
       {{#each this}}
     <div style="display: flex; border-bottom: 1px solid #eee; background-color: #fff;">
       <div style="flex: 1; padding: 8px 12px; border-right: 1px solid #eee;">{{@key}}</div>
       <div style="flex: 2; padding: 8px 12px;">{{this}}</div>
     </div>
       {{/each}}
     {{else}}
     <div style="display: flex; padding: 8px 12px; text-align: center; color: #999; font-style: italic; justify-content: center;">
       <div>No validation messages</div>
     </div>
     {{/each}}
   </div>
 </div>
 {{/each}}
{{else}}
<!-- Show when tiles array is empty -→
<div style="border: 1px solid #ddd; border-radius: 4px; overflow: hidden;width: calc(100% - 1px);">
 <div style="display: flex; background-color: #f5f5f5; border-bottom: 1px solid #ddd; font-weight: bold;">
   <div style="flex: 1; padding: 8px 12px; border-right: 1px solid #ddd;">Field Name</div>
   <div style="flex: 2; padding: 8px 12px;">Validation Message</div>
 </div>
 <div style="display: flex; padding: 8px 12px; text-align: center; color: #999; font-style: italic; justify-content: center;">
   <div>No validation messages</div>
 </div>
</div>
{{/each}}
{{/each}}

Simple Message

Formula

xCache

Category: QuickTileTemplate
Base Key: QuickTileTemplate_SimpleMessage
Value: 

{{#each tiles}}<p>{{#if label}}{{label}} {{/if}}{{#if url}}<a href="{{url}}" target="_blank" {{#if urlcssstyle}} style="{{urlcssstyle}}"{{/if}}>{{urlname}}</a>{{/if}}</p>{{/each}}
Keywords: Quick Tile, custom template