I needed a simple way to show my users which fields were complete so the record was ready to send over to an integration.
I have about 20 fields across 3 objects that need to be COMPLETED (eg data entered. I know I can't check easily that it's valid data, so I'm OK with checking for not blank).
I run into >5000 char limits when I try to do a big formula field. I've tried a few formula fields - eg grouping all Banking fields together as a Banking Fields Check, then doing a field update when all these check fields are checked, but it's unreliable as you've got to have field updates for when it's true and false.
What I really want is a Lightning Component that shows each field as a graphical indicator of completeness with the field help as hover text.
I tried creating something simple, but @Wire is hard, and getting the field metadata is hard.
This is the visual part so far. It's ugly as all heck, and it has some issues but WOW!
Don't Laugh! You use the tools at your disposal.
Follwing on from Matt Lacey's excellent use of SVG and Visualforce, I thought I could leverage that, so that's where I started.
Getting the SVG on the page was easy, then working out the Title and the Red / Green colour was easy enough, but then when I looped through the field set all my rectangles were on top of one another because the <apex:repeat> syntax does not know which record you are in as it loops, so I could not re-position the SVG. Yeah, apparently I can do some fancy stuff with a wrapper class, but this is just a POC.
So I used an ugly hack and created a Table and styled the table.
<apex:page lightningStylesheets="true" standardController="Account"> <style> .inddiv-true { background-color: #004D40; } .inddiv-false { background-color: #D81B60; } .table { border-left: 2px solid white; } .hide { color: rgba(0, 0, 0, 0); cursor: default; } .position { margin-top:10px; margin-left:10px; } </style> <div class="position"> <table cellpadding="0" cellspacing="0" class="table"> <tr height="15"> <apex:repeat value="{!$ObjectType.Account.FieldSets.Completion}" var="f"> <td width="30" class="inddiv-{!IF($ObjectType.Account.fields[f].type='boolean',Account[f],IF(BLANKVALUE(Account[f],'')='','false','true'))} table"> <div class="hide" layout="none"> <apex:outputText title="{!$ObjectType.Account.fields[f].Label} - {!IF($ObjectType.Account.fields[f].type='boolean',Account[f],IF(BLANKVALUE(Account[f],'')='','false','true'))}:{!$ObjectType.Account.fields[f].inlineHelpText}" value="{!IF($ObjectType.Account.fields[f].type='boolean',Account[f],IF(BLANKVALUE(Account[f],'')='','false','true'))}"/> </div> </td> </apex:repeat> </tr> </table> </div> </apex:page> |
Yeah, I said it was ugly.
The smart stuff is cool though.
For each field, work out if it's a boolean or not. If it's not a boolean work out if it's blank or not. Return True or False. The T/F value also drives which class is applied to the Table cell to determine the colour. The text in the table cell is hidden. A white border makes there look like there is space between the indicators.
Use what you know. I know CSS, HTM, and Visualforce. I don't need a controller as this is all just fields on the record.
For some reason, I don't know why, that VF page would not display on the Record Page on it's own. Not sure why.
So I found This old repo by Doug Ayers about how to embed a VF page inside an Aura component and get it to refresh. Yeah, old technology and ugly! But it works!