UI Builder related issue

[ShivamKumaD8593]

I attached a 2 SS , In first ss dashboard build on POwerBI and the latency column is showing colors based on latency score and quality is also colored , i am replicating same thing is UI builder Yokohama release , I cant understand how i do this , SO if anyone have a idea please suggest.

[M Iftikhar · Accepted solution]

Hi @ShivamKumaD8593,

To achieve color-based highlighting in UI Builder, similar to what you've shown in your Power BI dashboard, you’ll need to configure UX Highlighted Values. Follow these steps:

1. Navigate to: Now Experience Framework > UX Highlighted Values, then click New.

2. Set the following fields:

   • Table: Select the table containing the data you want to highlight.

   • Field: Choose the specific field (e.g., Latency, Quality) you want to highlight.

3. Save the record.

   

4. In the same record, go to the "UX Highlighted Value Configurations" related list and click Edit.

5. Associate the UI Builder Experience you’re working on by selecting it and clicking Save.

   

6. For each value or range of values you want to highlight:

   • In the "Highlighted Value Conditions" related list, click New.

   • Define a condition (e.g., Latency > 10).

   • Choose a Color (e.g., High, Medium, Low).

   • Save the condition.

     

7. Repeat step 6 for each value range or condition you want to display with different colors.

Once configured, UI Builder will render the values with the appropriate highlights in your dashboard components.

To ensure that highlighted Value Configuration is set in the UI builder component:

1. In UI Builder, select the List component.

2. In the Configuration pane, scroll down to the Content Styling section.

3. Ensure the following settings are configured:

   • Fetch highlighted values: Checked
   • Highlighted value configuration: Bind to the configuration record
     

If my response helped, please mark it as the accepted solution so others can benefit as well.

[M Iftikhar · Accepted solution]

Hi @ShivamKumaD8593,

To achieve color-based highlighting in UI Builder, similar to what you've shown in your Power BI dashboard, you’ll need to configure UX Highlighted Values. Follow these steps:

1. Navigate to: Now Experience Framework > UX Highlighted Values, then click New.

2. Set the following fields:

   • Table: Select the table containing the data you want to highlight.

   • Field: Choose the specific field (e.g., Latency, Quality) you want to highlight.

3. Save the record.

   

4. In the same record, go to the "UX Highlighted Value Configurations" related list and click Edit.

5. Associate the UI Builder Experience you’re working on by selecting it and clicking Save.

   

6. For each value or range of values you want to highlight:

   • In the "Highlighted Value Conditions" related list, click New.

   • Define a condition (e.g., Latency > 10).

   • Choose a Color (e.g., High, Medium, Low).

   • Save the condition.

     

7. Repeat step 6 for each value range or condition you want to display with different colors.

Once configured, UI Builder will render the values with the appropriate highlights in your dashboard components.

To ensure that highlighted Value Configuration is set in the UI builder component:

1. In UI Builder, select the List component.

2. In the Configuration pane, scroll down to the Content Styling section.

3. Ensure the following settings are configured:

   • Fetch highlighted values: Checked
   • Highlighted value configuration: Bind to the configuration record
     

If my response helped, please mark it as the accepted solution so others can benefit as well.

[ShivamKumaD8593]

Great explanation, thankyou

[ShivamKumaD8593]

But Iftikhar what about the Quality colums its green colour dot so how i do that part

[M Iftikhar · Accepted solution]

Hi @ShivamKumaD8593,

To achieve this in the Highlighted Value Condition record, simply do the following:

• Check the Show Icon option

• Set the Icon to circle-fill

If my response helped, please mark it as the accepted solution so others can benefit as well.