Displaying an icon for picklist

  • 1
  • Question
  • Updated 4 years ago
I'm building a Entitlement details page and would like to show the status icon field from the default salesforce page. Only the text status field is available from the fields in the entitlement model. I did find the Skuid tutorial explaining Custom Field renderers however this guide covers how to use render snippet in a table cell. I'm trying to apply this to a Pannel set. What would the java code look like in this example? Is there any other guides that go into more detail on how to accomplish this?

The status picklist is:
Active = green check
Inactive = White check
Expired = Red check
Photo of Jason C

Jason C

  • 682 Points 500 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Photo of Jason C

Jason C

  • 682 Points 500 badge 2x thumb
Thanks for the quick reply. I was able to make this work for a table but what changes to the code do I need to make for it work in a Panel set?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
It should work in a panel set as well, are you getting any Javascript errors in the console (Ctrl + Shift + J in Chrome)?
Photo of Jason C

Jason C

  • 682 Points 500 badge 2x thumb
No errors and the field is just blank.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
So... the Panel Set is merely a structural element.  On its own it will not show data.  You need to put somthing inside the panelset to show data.  The most straightforward item would be a field editor - with just one field in it.   Then you can follow the same instructions that Moshe links to above.   You might also turn off the save and cancel button,  make the default mode be "read only" and make the labels appear above the field...  All toward stripping it down to its most simple state... 

Alternatively you can include a "custom component" which might need to be slightly different javascript  because you wouldn't have data about the field brought automatically into the snippet with the arguments.   You'd have to call the model / row / field combination more explicitly and then run the switch statements about which icon to show (as described in the link above).  

You might read this tutorial that includes the Custom Component to satisfy a similar use case. 
Photo of Jason C

Jason C

  • 682 Points 500 badge 2x thumb
Yes Rob that is exactly what I have done. I have created a Panel set with a field editor and used the code from Moshe's link. I have tried what you have suggested and made the field read only and  turned off the cancel and save buttons. The status field is still showing as blank. I don't have java experience so I'm just copying the code from the link and changing the picklist names to match the field. Like I said the code works perfectly in an table layout and the icons show up.

Could it have anything to do with the var cellElem? In a table the fields are actual cells vs Field Editor called something else?

var $ = skuid.$,
    field = arguments[0],
    value = arguments[1];

var cellElem = field.element;
var iconElem =
    $( '<div>' ) // create the icon container
        .addClass('ui-silk') // mark the container as a silk icon container
        .appendTo( cellElem ); // add the container to the cell