Overview

This article follows on from xRM Formula #264 - Show Entity Images on Form using Quick Tile - Part 1 and shows how we can extend the Formula to show a 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
  • Determines other images which are not flagged as the main image
  • Shows the images as defined by the Quick Tile parameters

Set up Formula

Open existing Formula

Open the Formula you created as part of the xRM Formula #264 - Show Entity Images on Form using Quick Tile - Part 1 article.

Set up Fetch XML

Add another Fetch XML query - Find Other Mugshots - that will be used to return the images for display. 

• If not already in the Advanced Mode right-click on the Decision Table editor and select Operations > Toggle Advanced Mode (or press F4)
• Select the Global FetchXml sheet
• In cell A3 enter Find Other Mugshots
• Select cell B3 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="0" />
      </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. To extend this example we need to create 1 further Global Calculation to help us with the logic in our Decision Tables:

• In cell A5 enter Other Mugshot Count
• Select cell B5 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 Other Mugshots','n52demo_mugshotid','0','true',SetParams([contact.contactid]))

    • Close the cell editor
  • Click Save

Set up Decision Sheet for Other Mugshots Quick Tile

• Select the Main Mugshot sheet
• Right-click anywhere on the sheet and select Insert > Insert Duplicate Decision Table
• Double-click the sheet tab name and rename to Other Mugshots
• Select column A, right-click and select Delete > Delete Column to remove the Condition
• Select row 5, right-click and select Delete > Delete Row
• Replace 1 with 2 in all row 2 cells (the UI Property and Calc-Inline names)
• In cell H4 replace 1 with 2, to update the function to be:

  CreateUIControl({Result-2},{ResultColor-2},{Title-2},{Icon-2},{TileColor-2},{TileBackground-2},{Link-2})

• Select cell A4, expand the cell editor and enter the following formula (this renders the other mugshots images into the Quick Tile):(Note: you will need to change the entity and field references to match your entity):

  SmartFlow(ForEachRecord(
    FindRecordsFD('Find Other Mugshots','true',SetParams([contact.contactid])),
    SetVarConcat('HTML','<a href="' + LinkRawUrl('https://north52demo.crm4.dynamics.com','n52demo_mugshot',CurrentRecord('n52demo_mugshotid'),GetAppID()) +'" target="_top"><img style="height:50px; float:left; margin-right:5px" src="' + CurrentRecord('n52demo_image_url') + '"/></a>')),
    GetVar('HTML') + '<a href="/main.aspx?etn=n52demo_mugshot&pagetype=entityrecord&appid=' + GetAppID() + '&extraqs=n52demo_contact%3D%7B' + [contact.contactid] + '%7D%26n52demo_contactname%3D' + [contact.fullname] +'" target="_top">' +  StringFormat(xCacheGetGlobal('Mugshot_AddNew'),'pull-left',50,50) + '</a>'
  )

• Close the cell editor
• Click Save
• Your Decision Table should look like this:
  

Set up last Decision Table to render new tile

We need to reference our new Quick Tile on the final Decision Table so that it will render on the form.

• Select the DecisionTable sheet
• Right-click on column A and select Insert > Insert Condition
• Select cell A2
• Select the Source tab
  • Expand the Global Calculations node
  • Click on Primary Mugshot Count to add it to cell A2
• Select cell A4 and enter >0
• Copy the contents of cell B4 to B5
• Double-click cell B4, and place your cursor inside the closing bracket
  • Type a , (comma)
  • From the Source tab, expand Decision Table Calculations
  • Expand the Other Mugshots node
  • Click on CreateControl-2
• The contents of cell B4 should now be:

  CreateUIControlCollection({CreateControl-1},{CreateControl-2})

• Click Save
• The Decision Table should look like:
  

Testing

• Navigate to a Contact record with a Primary Mugshot image set and see the rendered Quick Tile, showing the primary Mugshot image and a placeholder for adding another image:
  
• Click on the placeholder mugshot image to open a new Mugshot record
  • Set the Is Main field to No
  • 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 secondary image should be shown in the Quick Tile: