Views:

Please Note: for a quick start you can import a sample formula - see this article for details

Overview

The Quick Tile App from North52 is a ready-go-to solution for Microsoft Dynamics 2013/2015/2016/365 that allows you to place a HTML web-resource on a form which will dynamically display multiple informational tiles to your end users. The tiles are configured by a single North52 Formula and load when a record is opened up.

It consists on a single HTML web resource which can be used as-is or can be fully customized to any specific requirements. The following screenshots show what Quick Tiles look like when they are configured on the Account form.

It can dynamically change the tiles layout depending on the available size.

Space for 3 Tiles side by side

 

Space for 2 side by side only

 

Space for 1 

A tile is comprised of the following components:
  • Title - Identifies the Quick Tile
  • Result - What was returned by the N52 Formula
  • Glyph - What Glyphicon you want to display
  • Tile color - Colour indicator for the icon strip
The below Quick Tile has the following settings:
  • Tile color - Green
  • Title - Open Opportunities
  • Glyphicon - glyphicon-flag
NoteYou can also put HEX values into the colors. 

This next tile has 2 additional settings:
  • TileBackground - fill (This will apply the color to the entire tile)
  • Result Color - Yellow  
Note: When the TileBackground is set to 'fill' then the resultcolor will change the color of the title text and the flag as well for readability reasons. If you do not change the resultcolor text then the default colors are applied.

Install Process

  1. Ensure North52 BPA 528 or higher is installed on your CRM system
  2. Download the solution file from apps page
  3. Logon to Dynamics 365 and navigate to Settings -> Solutions
  4. Click Import and choose the downloaded solution file to import
  5. Take all the default options during the install process
  6. After the import completes click Publish All

Quick Tile Configuration

  • Create a Formula of type ClientSide - Calculation to populate the Quick Tile - see the Quick Tile Formula section below or install the Sample Quick Tile formula
  • Make a note of the formula shortcode in the top right-hand corner of the formula
  • Next open the form designer for the form that you want the button displayed on
  • Add a web-resource to the form where you want the button to appear
  • Configure it as shown in the screenshot below, changing the 3-character shortcode
  • The custom parameters (data) field needs to be set in the following order, parameter 1 is mandatory and 2-5 are optional:
    1. ShortCode
    2. Width of the Tiles
    3. Formula to execute onload of the tile (e.g. to hide the section containing the tile in certain circumstances)
    4. Comma seperated list of fields that force Quick Tile to refresh when their values are changed
    5. Set the target attribute for url links, by default this is _top, use _blank if you want to open in a new window instead
Note: if you only enter the formula ShortCode Quick Tile will use automatically use the full width available to it for each tile.

Sample Tile Configurations

Formula Only:

abc

Formula and Tile Size:

abc|200

Formula, Tile Size and Pre-Tile Load Formula:

abc|200|xyz

Formula, Tile Size, Pre-Tile Load Formula and Comma separated list of OnChange fields

abc|200|xyz|description,customerid

Formula, Tile Size, Pre-Tile Load Formula, Comma separated list of OnChange fields and Set Quick Tile links to open in a new window

abc|200|xyz|description,customerid|_blank

Formula and Set Quick Tile links to open in a new window 

abc||||_blank

Formula and Tile Size and Refresh on change of a single field

abc|200||customerid
Note: You can control hiding or showing the section containing the Quick Tile using the 3rd parameter using a ClientSide-Calculation formula like the below:

If the account category is Preferred Customer then hide the section

if ([account.accountcategorycode] = 1, 

  HideSections('SUMMARY_TAB.Quick_Tile_Section'),

  'NoOp'
)
Note:  if you only enter the formula ShortCode north52_quicktile will use automatically use the full width available to it for each tile.
Note: if you are using the third parameter, then you must put in a second parameter, usually 150 - 200 provides the best standard resolution
.
 

Quick Tile Configuration 1

 

Quick Tile Configuration 2



You can adjust the number of rows depending on how many tiles you will want to display.

North52 Quick Tile uses the Glyphicons that come with Bootstrap, you can use any of the glyphs listed, at this link, in your tiles: https://getbootstrap.com/components

North52 Quick Tile Formula

To populate the Quick Tile web resource you need a North52 Formula using the CreateQuickTile() function. You can create a single tile only, or multiple tiles using the CreateQuickTileCollection() function.

In the example below we are using a North52 Decision Table to populate a Quick Tile. Each of the fields is a Decision Table Calculation and we are using a standard Calculation to count the number of open opportunities.

Setup the Formula

  • Create a new formula, setting the following values in the Formula Guide:
    • Source Entity set to Account
    • Set Formula Type to ClientSide - Calculation
    • Select the Decision Table editor
    • Click the Create button
  • Change the Name of the formula to Account - Quick Tile - Count Opportunities
  • Click Save
  • Select both A and B columns and right-click, then select Delete > Delete Column as we don't have any Conditions or Actions for this example
  • Right-click in column A and select Insert > Insert Inline Calculation (==), repeat this a further 7 times so that there are 8 inline calculation columns
  • Rename the Columns:
    • A: Result
    • B: ResultColor
    • C: Title
    • D: Icon
    • E: TileColor
    • F: TileBackground
    • G: Link
    • H: TileOutput
  • Click Save
  • Select the Fetch-Xml tab, and click the + button to the right of the Search fetch-xml input box
  • Type Open Opportunities for Account in the Name field
  • For the Query field:
    • Open the Advance Find query builder form
    • Look for should be set to Opportunities
    • Select Status equals Open
    • Select Account equals and choose any single Account record (we will dynamically repalce this)
    • Click Download Fetch XML and open it in Notepad
      <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
        <entity name="opportunity">
          <attribute name="name" />
          <attribute name="customerid" />
          <attribute name="estimatedvalue" />
          <attribute name="statuscode" />
          <attribute name="opportunityid" />
          <order attribute="name" descending="false" />
          <filter type="and">
            <condition attribute="statecode" operator="eq" value="0" />
            <condition attribute="parentaccountid" operator="eq" uiname="Fourth Coffee (sample)" uitype="account" value="{A22EB449-0779-E811-A950-000D3AB0F00C}" />
          </filter>
        </entity>
      </fetch>
    • Delete the red highlighted text and replace the green highlighted text with @accountid@
      <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
        <entity name="opportunity">
          <attribute name="name" />
          <attribute name="customerid" />
          <attribute name="estimatedvalue" />
          <attribute name="statuscode" />
          <attribute name="opportunityid" />
          <order attribute="name" descending="false" />
          <filter type="and">
            <condition attribute="statecode" operator="eq" value="0" />
            <condition attribute="parentaccountid" operator="eq" value="@accountid@" />
          </filter>
        </entity>
      </fetch>
    • Copy and paste this into the Query field
    • Click Save and Close to return to the Decision Table
  • Select cell A4
  • Select the Functions tab, type findcount in the Functions Seach input box and press enter
  • Shift-click the FindCountFD function to open the function wizard
    • Friendly Name: type Count Open Opportunities and leave the Type as Calculation
    • Formula Detail (Query): select Open Opportunities for Account from the search list#
    • Field Name: type opportunityid
    • Default Value: replace ? with 0
    • No-Lock: leave as true
    • Click Generate
  • Select cell B4 and type '' (two single quotes)
  • Select cell C4 and type 'Open Opportunities'
  • Select cell D4 and type 'glyphicon-flag'
  • Select cell E4 and type '' (two single quotes)
  • Select cell F4 and type '' (two single quotes)
  • Select cell G4 and type '' (two single quotes)
  • Select cell H4
  • Select the Functions tab, type quicktile in the Functions Seach input box and press enter
  • Click the CreateQuickTile function to add it to cell H4
  • Double-click cell H4 to edit the contents
  • For each placeholder paramenter replace it with the corresponding Decision Table Calculation from the Source tab
    • e.g. highlight the text 'result' then click on Result from under the Decision Table Calculations node
  • The contents of cell H4 should now be:
    CreateQuickTile({Result},{ResultColor},{Title},{Icon},{TileColor},{TileBackground},{Link})
  • Click Save
  • Add the Quick Tile to your Account form following the steps in the Quick Tile Configuration section above
This is how a single Quick Tile would look an Account:
 

To create multiple Quick Tiles you would use multiple sheets on the Decision Table and the CreateQuickTileCollection() function. See the Sample Quick Tile formula

Quick Tile with Conditions

Decision Tables offer you a significant amount of flexibility, you can include Conditions in that would change how the tile would display. For example, if you wanted to change the color of the tile based on the number of Opportunities, we could edit our example above:

  • Right-click in column A and select Insert > Insert Condition
  • Select cell A2
  • Select the Source tab and expand the Global Calculation node
  • Click on Count Open Opportunities
  • Select the entire row 4 by clicking on the row number, the ctrl-c to copy the details
  • Select row 5 and ctrl-v to paste the values into row 5
  • Select cell A4 and type <3
  • Select cell A5 and type >=3
  • Select cell C5 and type 'yellow'
  • Select cell E5 and type 'glyphicon-alert'
  • Select cell F5 and type 'red'
  • Select cell G5 and type 'fill'
  • Click Save 
  • Test your tiles by loading different accounts with less or more than 3 open Opportunities

When another opportunity is added to the account then the tile will display the second color scheme when the tile is loaded.

You can make the North52 Quick Tiles clickable as well, in the link field you would use a North52 LinkHyperLinkUrl() function.

Note: If you are not using a field in the Decision Table you must use two single quotes ('') to indicate the field is blank (this requirement is only for Quick Tile and not regular Decision Tables)