For many customers, an early requirement is to implement visual cues in list views, enabling users an easy, meaningful way to quickly differentiate between items in a list view.

Examples may include a color coded approach to interactions that have a priority of Low|Medium|High. Outside of sorting them in order, you could introduce a column that has a flag that’s either Green|Orange|Red to correspond with the priority.
Perhaps your customer wants the ability to represent each interaction type by a specific icon – Telephone, Email, Mail etc.

In the world of web development, this is not only common place, it’s easy. It so happens the same is true for Epiphany Sales and Service. These items need not only be for display purposes, they may also be selectable/clickable to perform specific actions.

What You Will Need

1. List View
2. Extension
3. Appropriate Icons
4. Basic Studio Work

Update the List View

In order to update an image in the list view, you must first add a new widget. This is not tied to any particular attribute on the BIO as it is used merely for display purposes. As a general rule, you should default the image used for the widget to represent the state that is most common. i.e. if priority of normal is standard, then set the image you wish to use for normal as the default. After that, you need not worry about an of the other states for now, just remember the name of the image widget you added and move on to creating the extension.

Develop the Extension

The bulk of this exercise is the custom extension used during the rendering of the list view itself. After it is created, you will simply register it, and hey presto, you’re done.

Again, the approach is that this is performed prior to rendering, modifying the image in question to the appropriate image type based on some property on the Bio for that item in the collection.
The goal now is to check a particular attribute on each Bio in the collection associated to the list view, and set the image to correspond to its value.

Following is the code used to add a flag image to each row in the request list view on the home page dashboard, color coding it based on the priority of the request: Normal=Green|ASAP=Yellow|Critical=Red. By default, most requests are normal so the default image set for the widget is flag_green.png.
Now all we need to do is check each priority and if it is either ASAP or Critical, update the widget for the appropriate flag.

package com.my.extension.request.ui;

import com.epiphany.shr.ui.view.customization.FormExtensionBase;
import com.epiphany.shr.ui.view.RuntimeListFormInterface;
import com.epiphany.shr.ui.view.RuntimeListRowInterface;
import com.epiphany.shr.ui.view.RuntimeFormWidgetInterface;
import com.epiphany.shr.ui.action.UIRenderContext;
import com.epiphany.shr.ui.state.StateInterface;
import com.epiphany.shr.util.exceptions.EpiException;

public class SetRequestListViewPriorities extends FormExtensionBase {

  protected int modifyListValues(UIRenderContext context,
                                 RuntimeListFormInterface form) throws EpiException {

    try {

      RuntimeListRowInterface[] listItems = form.getRuntimeListRows();

      if(listItems != null && listItems.length > 0) {
        for(int i=0; i<listItems.length; i++) {
          // get the current line in the list
          RuntimeListRowInterface currentLine = listItems[i];

          RuntimeFormWidgetInterface buttonPriority = currentLine.getFormWidgetByName("priority_cue");

          RuntimeFormWidgetInterface labelPriority = currentLine.getFormWidgetByName("determined_priority_lkp");

          if(labelPriority != null) {
            String displayValue = labelPriority.getDisplayValue();

            if(buttonPriority != null) {
              if(displayValue.equalsIgnoreCase("CRITICAL"))
                buttonPriority.setProperty(RuntimeFormWidgetInterface.PROP_IMAGE, "images/custom/icons/flag_red.png");

              if(displayValue.equalsIgnoreCase("ASAP"))
                buttonPriority.setProperty(RuntimeFormWidgetInterface.PROP_IMAGE, "images/custom/icons/flag_yellow.png");

              }
            }
          }
         }
       }
       catch (Exception e)
       {
           // Handle exception
       }

       return RET_CONTINUE;
   }
}

There’s really not much too it as you can see. There is surprisingly a number of great usages for this that will not only reduce screen real estate for icons in preference to long text strings, but create more streamlined user interfaces that will dramatically increase productivity.

Setting Up the Images

All you need in this step is to ensure that the images you require can be found by the application. Ensure that you have copied the images you need to the images directory under the webroot. If you’re looking for some quality 16×16 icons for the job, I can highly recommend the silk icon set from http://www.famfamfam.com/lab/icons/silk/ – what’s not to like about FREE.

Register the Extension

Ok, so we’re in the home stretch – nothing else left to do but register the extension. Based on the type of extension it is, we’re going to register it as a UI extension against the modify list values extension on the list view.

From here, just make sure your code is successfully deployed, restart the server and enjoy.