Overview

It is often useful to be able to show images on an entity form. For this example we are going to demonstrate how you can use North52 Quick Tiles to show a main 'mugshot' image and a smaller row of other images. This article shows how to create the main image. A second article shows how we can extend the Formula to show the smaller row of secondary images.

North52 Decision Suite

The North52 Decision Suite solution works like this:

• A Mugshot entity created and related to the Contact entity. It is set up with an entity image field to store the mugshot images for the related Contact.
• A Client Side Formula to render the Quick Tiles is set up on the Contact entity which:
  • Finds all the related Mugshot records
  • Determines which is the Main image
  • Shows the image as defined by the Quick Tile parameters

Set up Entity, xCache, Formula and Configure Form

Mugshot Entity Setup

This example assumes that there is an entity setup which has a lookup to the Contact entity and has the entity image set up. Our example entity has the following additional custom fields:

• Image: n52demo_image (image field)
• Is Main?: n52demo_ismain (boolean field)

xCache

When there is no image found we need to display a placeholder image. We also need an image to be used as a button to create a new record to store a new image. These images will be in SVG format and can be stored in xCache (Note: there is a limited of 4000 characters for xCache so only simple SVG images can be stored).

Placeholder Image

• Navigate to xCache and create a new record
• For Category enter Mugshot
• For Basekey enter Mugshot_PlaceholderImage
• For Type select Standard
• For Datatype select String
• For Value(secured) enter the following:

  <svg class="{0}" style="width: {1}px; height: {2}px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M1024 1024s0-70.4-5.888-107.2128c-4.7872-29.056-45.056-67.456-216.2432-130.3808-168.5248-61.8752-158.1312-31.744-158.1312-145.6128 0-73.856 37.6064-30.9248 61.5936-171.1872 9.344-55.2192 16.7936-18.4064 
  37.0688-106.9312 10.6752-46.4128-7.1936-49.8688-5.0688-72.0128 2.1248-22.1184 4.2752-41.856 8.2688-87.1936C750.4128 147.456 698.3936 0 512 0s-238.4128 147.456-233.344 203.7248c4.0192 45.056 6.144 65.0752 8.2688 
  87.2192 2.1504 22.1184-15.7184 25.6-5.0688 71.9872 20.2752 88.2688 27.7504 51.456 37.0688 106.9312 24.0128 140.288 61.6192 97.3312 61.6192 171.2128 0 114.1248 10.3936 83.968-158.1568 145.5872C51.2 849.3312 10.7008
   888.0128 6.144 917.0688 0 953.6 0 1024 0 1024h1024z" /></svg>

• Click Save

Add New Image

• Navigate to xCache and create a new record
• For Category enter Mugshot
• For Basekey enter Mugshot_AddNew
• For Type select Standard
• For Datatype select String
• For Value(secured) enter the following:

  <svg class="{0}" style="width: {1}px; height: {2}px;vertical-align: middle;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M858 656 858 554 960 554 960 470 858 470 858 368 774 368 774 470 672 470 672 554 774 554 774 656ZM832 896c0 0 0-52.8-4.4-80.4-3.6-21.8-33.8-50.6-162.2-97.8-126.4-46.4-118.6-23.8-118.6-109.2 
  0-55.4 28.2-23.2 46.2-128.4 7-41.4 12.6-13.8 27.8-80.2 8-34.8-5.4-37.4-3.8-54 1.6-16.6 3.2-31.4 6.2-65.4C626.8 238.6 587.8 128 448 128c-139.8 0-178.8 110.6-175 152.8 3 33.8 4.6 48.8 6.2 65.4 1.6 16.6-11.8 
  19.2-3.8 54 15.2 66.2 20.8 38.6 27.8 80.2 18 105.2 46.2 73 46.2 128.4 0 85.6 7.8 63-118.6 109.2-128.4 47-158.8 76-162.2 97.8C64 843.2 64 896 64 896l384 0L832 896z" /></svg>

• Click Save

Note: the characters {0}, {1}, {2} within the SVG text are placholders that will be replaced when the Formula is executed. 

Formula

Create Formula

• Create a new formula, setting the following values in the Formula Guide:
  • Source Entity set to Contact
  • Set Formula Type to ClientSide - Calculation
  • Select the Decision Table editor
• Change the Name of the formula to Contact - Quick Tile - Mugshots
• Click Save

Set up Fetch XML

The first part of the Formula creation is to define the two Fetch XML queries (Find Primary Mugshot, Find Other Mugshots) that will be used to return the images for display. 

• Right-click on the Decision Table editor and select Operations > Toggle Advanced Mode (or press F4)
• Select the Global FetchXml sheet
• In cell A2 enter Find Primary Mugshot
• Select cell B2 and expand the cell editor. Enter the following Fetch XML (Note: you will need to change the entity and field references to match your entity):

  '<fetch> 
  <entity name="n52demo_mugshot" > 
  <attribute name="n52demo_mugshotid" /> 
  <attribute name="n52demo_name" /> 
  <attribute name="n52demo_image_url" /> 
  <attribute name="n52demo_imageid" /> 
  <filter type="and" > 
  <condition attribute="n52demo_contact" operator="eq" value="{0}" /> 
  <condition attribute="n52demo_ismain" operator="eq" value="1" /> 
  </filter> 
  </entity> 
  </fetch>'

• Close the cell editor
• Click Save

Set up Global Calculations

The Global Calculations enable us to make our Decision Tables more readable by moving calculations away from the main Decision Tables. For this example we need to create 3 calculations to help us with the logic in our Decision Tables:

1. Primary Mugshot Count
   • In cell A2 enter Primary Mugshot Count
   • Select cell B2 and expand the cell editor
   • Select the Functions tab
     • Search for FindCountFD, and shift-click the Function name to open the Function Wizard
     • Complete the options as per the image below and click Generate:
       
     • Our Fetch XML query that is referenced in this function requires the Contact ID as a parameter. Immediately before the closing bracket type a ,
     • Select the Functions tab, search for setparams and click the function name to add it to the Formula
     • Highlight the placeholder text 'field1', 'field2', 'field3' and delete it
     • With the cursor positioned between the SetParams brackets, select the Source tab and search for contact
     • Expand the the Source node, then click on Contact
     • The completed function in the cell editor should now look like:`

       FindCountFD('Find Primary Mugshot','n52demo_mugshotid','0','true',SetParams([contact.contactid]))

     • Close the cell editor
     • Click Save
        
2. Primary Mugshot URL
   • In cell A4 enter Primary Mugshot URL
   • Select cell B4 and expand the cell editor
   • Follow the steps for the Primary Mugshot Count, however select the FindValueFD function and select the n52demo_image_url for the Field Name parameter. The completed function should look like:

     FindValueFD('Find Primary Mugshot','n52demo_image_url','?','true',SetParams([contact.contactid]))

   • Click Save
      
3. Primary Mugshot ID
   • In cell A5 enter Primary Mugshot ID
   • Select cell B5 and expand the cell editor
   • Follow the steps for the Primary Mugshot Count, however select the FindValueFD function and select the n52demo_mugshotid for the Field Name parameter. The completed function should look like:

     FindValueFD('Find Primary Mugshot','n52demo_mugshotid','?','true',SetParams([contact.contactid]))

   • Click Save

Set up Decision Sheet for Main Mugshot Quick Tile

• Select the DecisionTable sheet
• From the Snippets menu, select Quick Tile to insert the template for Quick Tiles
  
• Double-click the tab and rename it to Main Mugshot
  
• Select a cell in column A, right-click and select Insert > Insert Condition
• Select cell A2
  • Select the Source tab
  • Expand the Global Calculations node
  • Select Primary Mugshot Count
• Select cell A4, enter >0 (row 4 are the parameters for the Quick Tile when there is a Primary Mugshot found)
• Select cell B4, expand the cell editor and enter the following formula (this renders the primary mugshot into the Quick Tile): (Note: you will need to change the entity and field references to match your entity):

  '<a href="' + LinkRawUrl('https://north52demo.crm4.dynamics.com','n52demo_mugshot',GetVar('Primary Mugshot ID'),GetAppID()) +'" target="_top"><img style="height:150px" src="' + GetVar('Primary Mugshot URL') + '"/></a>'

• Close the cell editor
• Set the ResultColor-1, Title-1, Icon-1, TileColor-1, TileBackground-1, Link-1 properties in cells C4 to H4 to '' (two single quotes to represent an empty string)
• Select cell B5, expand the cell editor and enter the following formula (this will render the default SVG image if no primary mugshot is found):

  StringFormat(xCacheGetGlobal('Mugshot_AddNew'),'',150,150)

• Close the cell editor
• Set the ResultColor-1, Title-1, Icon-1, TileColor-1, TileBackground-1 properties in cells C5 to G5 to ''
• Select cell H5, expand the cell editor and enter the following formula (this makes the Quick Tile clickable and will take the user to a create record form for the mugshot entity and preset the related Contact field): (Note: you will need to change the entity and field references to match your entity):

  '/main.aspx?etn=n52demo_mugshot&pagetype=entityrecord&appid=' + GetAppID() + '&extraqs=n52demo_contact%3D%7B' + [contact.contactid] + '%7D%26n52demo_contactname%3D' + [contact.fullname]

• Close the cell editor
• Copy cell I4 to I5
• Click Save
• Your Decision Table should look like this:
  

Form Set Up

Before we create the second Decision Sheet to render the Other Mugshots tile, it is worth setting up the Quick Tile on the form and testing what we have done so far.

• Copy the Formula Short Code in the top right of the Formula form
• Open the Form editor for the Contact form you wish to place the Quick Tile
• Add a new Section and add the Quick Tile web resource, setting the following options:
  • Custom Parameters:  [Your Short Code]|300,fit-content (this tells the Quick Tile to use the Formula defined by the Short Code and set the width to be no less than 300px wide, and set the height to fit the content of the results from the Formula. Learn more about Quick Tile parameters)
    
  • On the Formatting tab, Layout = One column, Number of Rows 5, Scrolling = Never, Display Border = Unchecked
    
• Save and Publish the Form

Testing

• Navigate to a Contact Record and see the rendered Quick Tile, showing the default image:
  
• Click on the placeholder mugshot image to open a new Mugshot record
  • Set the Is Main field to Yes
  • Click Save
  • Click on the record image icon placeholder in the top left of the form
  • Upload a new image
  • The form should look like this:
    
• Click on the Contact lookup field to return to the Contact
• The new image should be shown in the Quick Tile: