Article

Tips & Tricks – Using Text(HTML) field to display colored Asset Status in DAM UI Card View

By Robert Jason Mendoza posted 07 Mar, 2023 10:09

  

INTRODUCTION 

Watermarks are a common way to distinguish assets belonging to different stages of their life cycle in digital asset management (DAM). However, we advise against using this approach as it can have a negative impact on performance, particularly when searching and viewing assets in the user interface (UI). 

Applying watermarks to all assets can slow down the system and make it difficult to quickly find the assets you need. Instead,  consider alternative methods for organizing and labeling assets that are less resource-intensive and more efficient. By doing so, you can optimize your DAM system for maximum performance and usability.

 

 

approach THAT YOU MAY CONSIDER

The "Content Type" option is a long-standing feature in text fields that allows you to enable HTML encoding and add rich-text functionality to your content. However, it's important to note that once you set a text field to "Content Type = HTML," you cannot revert this setting.

*You can also create a new field solely for use in DAM UI Card View.

Once the field is set up, you can create rules and default values that set the field's value to an HTML code. This feature is particularly useful in digital asset management (DAM), where it allows you to display different color-coded text based on the status value.


In this example I used Green (hex code #339966) as my status color for Available. This was achieved by using the below sample reference code that defaults the HTML encoded value to the field.

<ref:text out="&#60;div style=&#34;font-size: 16px; background-color: white; text-align: left;&#34;&#62;&#60;span style=&#34;color: #339966;&#34;&#62;&#60;strong&#62; Available&#60;/strong&#62;&#60;/span&#62;&#60;/div&#62;" />


To display your field in DAM UI, go to “New User Interface configuration” > and select “Field Setup”

You will add your Text(HTML) field in your Card view configuration (JSON) setting. In my example I decided to add this for all content types.

First, I add it to the root Content Type “No type”

And I make sure that I also update all other content types that do not inherit its setting from the parent.

To give you a better idea of how this approach works, here are some examples of what status fields might look like when using this method.

In summary, the Text(HTML) field option is a powerful tool that can enhance your text fields with rich-text functionality. As this allow you to create visually appealing content cards that engages your users and provides a more immersive experience

5 comments
549 views

Comments

Robert Jason Mendoza
01 Feb, 2024 04:52

Hi Maja, 

This setup uses the default value property of a field in DAM, and is triggered only on changes to the "Status" field. 

Watermark indeed has impact in performance because each watermark is rendered on the thumbnails of each images from a resulting search in DAM, whilst the text field value here is not.

Maja Ahnfeldt Kjeldsen
01 Feb, 2024 04:44

Hi, 
At Demant we are interested in this solutiuon, at we suspect our current Watermark setup impacts system performance negatively. However, I'd assume that we would have to add new rules to achieve the wanted behaviour for the potential Text (HTML) field option. Are rules not impacting system perforfance the same way as the Watermark functionality?

Siska Moens
02 Aug, 2023 10:11

Hi @Leah Hebner, next to this default value code you can set the field's "Reset To Default" trigger to "On Field Change" and then select the main Status field as triggering field. That would update the color-coded indicator field automatically every time the actual status of an asset changed.

That way you don't have to create any additional rules or other configuration.

Robert Jason Mendoza
17 Apr, 2023 23:13

Hi Leah,

Below is an example on how you would use the code to assign different color based on Status.

<ref:catch ex="System.Exception" out="" >
    <ref:record fieldName="Status" out="value" store="@statusClassID" /> 
    <ref:classification onVariable="IsNotEmpty(@statusClassID)" id="@statusClassID" out="label" store="@fieldvalue"/>
    
<ref:text out="Empty" onVariable="IsEmpty(@fieldvalue)" store="@fieldvalue"/>
<ref:switch keys="@fieldvalue">
    <item key="Expired">        
        <ref:text out="&#60;div style=&#34;font-size: 16px; background-color: white; text-align: left;&#34;&#62;&#60;span style=&#34;color: #ff0000;&#34;&#62;&#60;strong&#62; Expired&#60;/strong&#62;&#60;/span&#62;&#60;/div&#62;" onVariable="IsNotEmpty(@fieldvalue)" />
    </item>
    <item key="Draft">        
        <ref:text out="&#60;div style=&#34;font-size: 16px; background-color: white; text-align: left;&#34;&#62;&#60;span style=&#34;color: #ffcc00;&#34;&#62;&#60;strong&#62; Draft&#60;/strong&#62;&#60;/span&#62;&#60;/div&#62;" onVariable="IsNotEmpty(@fieldvalue)" />
    </item>
    <item key="Available">
        <ref:text out="&#60;div style=&#34;font-size: 16px; background-color: white; text-align: left;&#34;&#62;&#60;span style=&#34;color: #339966;&#34;&#62;&#60;strong&#62; Available&#60;/strong&#62;&#60;/span&#62;&#60;/div&#62;" onVariable="IsNotEmpty(@fieldvalue)" />
    </item>
    <default>
        <ref:text out="&#60;div style=&#34;font-size: 16px; background-color: white; text-align: left;&#34;&#62;&#60;span style=&#34;color: #000000;&#34;&#62;&#60;strong&#62; @fieldvalue&#60;/strong&#62;&#60;/span&#62;&#60;/div&#62;" onVariable="IsNotEmpty(@fieldvalue)" />
        
    </default>
</ref:switch>
</ref:catch>

Leah Hebner
17 Apr, 2023 11:13

"Once the field is set up, you can create rules and default values that set the field's value to an HTML code. "

I would be interested to see the rules/default values you used to create the examples. How does the color change based on the status, for example?