Display custom icons aslope values in list views

  • Article
  • 5 minutes to read

Power Apps environment administrators and customizers can add graphics to a view and found the logic used to select a graphic based on the column value using JavaScript. The adequacy lets you customize list views that display icons alongside text or numerical values.

This example displays custom icons in a view for the opportunity tabular array, which is available with sure apps, such as Dynamics 365 Sales. You can display custom icons in views with other standard tables, such as the account or contact table, as well as custom tables.

All Opportunities view with Rating column displaying icons and text value.

Custom icons in listing views can display in Unified Interface, legacy spider web customer, mobile app, and App for Outlook.

Add custom graphics and JavaScript as web resources

  1. Create the new graphic files needed for your customization. We recommend an icon size of 16x16 pixels (larger images will be scaled down).

  2. Write 1 or more JavaScript functions that found which icons to show for which values (you lot'll typically need ane role for each column yous want to customize). Each office must accept a row data object and a language (LCID) lawmaking every bit input and return an array containing an image name and tooltip text. For an example part, see Sample JavaScript function, later in this article.

  3. Sign into your environs as an administrator and open up solution explorer.

  4. The Default Solution pop-up window opens. Navigate to Components > Web Resources here.

  5. Now, you lot'll upload your custom graphics, 1 at a time, every bit web resources. Select the New push button in the toolbar to create a new web resource. Another popular-up window opens to help you lot create the resource. Follow these steps:

    1. Requite the new resources a meaningful Proper noun. This is the proper noun that you'll use to refer to each graphic from your JavaScript code.

    2. Fix the Type to the graphic format y'all've used to salvage your graphic file (PNG, JPEG, or GIF).

    3. Select Choose File to open up a file browser window. Use it to discover and select your graphic file.

    4. Add a Brandish Proper noun and/or Clarification if you wish.

    5. Select Save and and so close the Web Resource window.

  6. Echo the previous step for each graphic file that you have.

  7. At present, you'll add your JavaScript equally the concluding web resources. Select New on the toolbar to create a new web resources. Another popular-upwards window opens to help you create the resource. Practise the post-obit:

    1. Give the new resource a meaningful Name.

    2. Set the Type to Script (JScript).

    3. Select Text Editor (adjacent to the Blazon setting) to open up a text-editor window. Paste your Javascript code here and select OK to salve it.

    4. Add a Display Name and/or Description if you wish.

    5. Select Save and and then close the Web Resource window.

  8. With the Default Solution pop-upwardly window still open up, expand the Components > Tables tree and locate the tabular array that you desire to customize.

  9. Expand your tabular array and select its Views icon.

  10. Yous now run across a list of views for your selected table. Select a view from the list. Then open up the More Actions drop-downward listing in the toolbar and select Edit.

  11. A pop-upward window opens with controls for editing your selected view. It shows each column that is office of the view. Select the target column and and so select the Change Properties in the Common Tasks box. The Change Column Properties dialog opens; make the following settings here:

    • Spider web Resources: Specify the proper noun of the web resources that you created to hold your Javascript functions (select Scan to choose from a list).

    • Role Proper name: Blazon the name of the role that you wrote to modify the selected column and view.

  12. Select OK to close the Change Cavalcade Backdrop dialog.

  13. Select Save and Shut to save your view.

  14. Echo these steps for each table, view, and cavalcade as needed.

  15. When yous're ready, select Publish All Customizations to publish your changes. And so, close the Default Solution window.

Sample JavaScript function

The JavaScript function for displaying custom icons and tooltips expects the following two arguments: the entire row object specified in layoutxml and the calling user's Locale ID (LCID). The LCID parameter enables you lot to specify tooltip text in multiple languages. For more information well-nigh the languages supported by the environment, see Enable languages and Install or upgrade linguistic communication packs. For a list of locale ID (LCID) values that you tin employ in your code, see Locale IDs assigned past Microsoft.

Assuming you will exist adding custom icons for an pick-set type of attribute, which has a limited set of predefined options, make sure you utilise the integer value of the options instead of label to avoid localization bug.

Note: If information technology is necessary to retrieve information to determine the icon, Unified Interface supports returning a JavaScript Promise object which resolves to a boolean (similar to ribbon rules). Do non use a synchronous XMLHttpRequest (XHR) in your custom office.

The following sample code displays icons and tooltips based on ane of 3 values (i: Hot, 2: Warm, iii: Common cold) in the opportunityratingcode (Rating) attribute. The sample lawmaking also shows how to brandish localized tooltip text. For this sample to work, you must create three image web resources with 16x16 images with the following names: new_Hot, new_Warm, and new_Cold.

Important

This sample requires the opportunity table, which is available with Dynamics 365 Sales app.

              office displayIconTooltip(rowData, userLCID) {           var str = JSON.parse(rowData);       var coldata = str.opportunityratingcode_Value;       var imgName = "";       var tooltip = "";       switch (parseInt(coldata,ten)) {          case 1:               imgName = "new_Hot";               switch (userLCID) {                   case 1036:                       tooltip = "French: Opportunity is Hot";                       break;                   default:                       tooltip = "Opportunity is Hot";                       break;               }               break;           example two:               imgName = "new_Warm";               switch (userLCID) {                   case 1036:                       tooltip = "French: Opportunity is Warm";                       break;                   default:                       tooltip = "Opportunity is Warm";                       pause;               }               interruption;           instance iii:               imgName = "new_Cold";               switch (userLCID) {                   example 1036:                       tooltip = "French: Opportunity is Cold";                       break;                   default:                       tooltip = "Opportunity is Common cold";                       break;               }               break;           default:               imgName = "";               tooltip = "";               break;       }       var resultarray = [imgName, tooltip];       render resultarray;   }

Custom icon view display beliefs

Primary columns

In the filigree list view, custom icons applied to the table primary column supplant the default system-generated icon.

Primary column replaces default icon in the custom icon view.

Other columns

In the grid list view, custom icons practical to a column that isn't the table primary column display as a secondary icon in add-on to the default system-generated icon.

Not a table primary column custom icon view.

Bill of fare forms

Custom icons replace the default system-generated icon when the view is configured to apply a carte form.

Card view custom icon view.

See too

Understand model-driven app views