Clickable controls in a Display form

I was working on a project a few days ago and ran into what I thought was a very simple use case. We had a Display form with fields like email and phone number. The need was to add icons for these fields and have them launch the default calling/email app.

Here is how I progressed:

• My first attempt was to add the icons directly on the screen without adding those to the form. I was hoping that the field positions and height would remain the same and the position of these icons will not be a problem. That wasn't the case as there are certain fields that can have expandable height e.g. address field - some records can have address line 2, some may not. This is how it looked for a user with country populated in the address field and for a user without country populated, as you can see, the icon positions are all messed up.

• This lead to my next attempt which was to add the icons inside the individual data cards. I tried to copy and paste the icons into the data cards but it wouldn't let me. This was easy to fix. I just had to unlock the data cards and then it let me add the icons. Now the address format didn't matter. The icons adapted their position based on the fields/data cards above them. Here is how the form looked now for the two records from the previous step:

  

  

• However, this lead to another issue. Although the DisplayMode property of these icons was set to Edit, the users couldn't click and use the OnSelect property of these icons. I was surprised since although the form DisplayMode was View, the icons had a DefaultMode of Edit.
• The way to make this work is pretty odd, or at least seems odd to me. I first replaced the Display form with an Edit form and then added the icons to the data cards just like in the previous step. This time the icons worked. However, the requirement was to have a Display form or a form with a DisplayMode = View. So I changed the the individual data card value's DisplayMode from Edit to View, keeping the icon's, form's and data card's DisplayMode to Edit. This is how the form behaved (for the purposes of this demo, I am controlling the visibility of 2 buttons using the email and phone icon):

  

To summarize, if you want clickable icons (or any other control for that matter) within a Display form, the following steps are needed to make it work:

• Replace the Display form with an Edit form, setting the DisplayMode of the form to Edit
• Unlock the data cards in which the icons need to be added and then add the icons
• Set the DisplayMode of the individual data card values (not the entire data card, the data card keys, or the form) to View so the form looks exactly like a Display form
• Set the DisplayMode of the icons to Edit

With this setup, you will be able to add icons/buttons (or any other controls) to data cards within a form and let users click on those controls to utilize their OnSelect property.

Have fun! Get addicted!