nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

Status color on data list

jriker1

I basically want to use a data list to track project status and information on a line for each project. As part of this I want the ability to manually select a color for a particular project, using the standard red, yellow, green colors for bad shape, in jeopardy, and on target. Is there a way to encorporate colors into a column with the data lists?

Thanks.

JR

Find more posts tagged with

Comments

jriker1

Perhaps a different approach to this question is there a way to have an image referenced by a field in the list. So having three colored button images and reference them. Or perhaps paste in some font tag in relation to a "LI" bullet that you color. Clugy but trying here.

JR

ghl

Yes, this is fairly easy to do for displaying colors on the datalist. One way you could do this is by extending the datagrid component and injecting your customization in the DataGrid_renderCellDataType() function. Match the datalist column name for the cell to the datalist proproperty type and add your "color" implementation data to the return object.

Another way you could do this is by using CSS injection but you'd probably still need modify the datagrid component to do as you need.

Hope this helps you get in the right direction.

orbitron

Hello,
Thanks for the hints. I am also interested to colorized rows according the "Status" field. Could you provide us a more clear example on how to modify this function?
Thanks you very much.

krups

Hello
I am also looking for the solution to display status color in datalist( i.e. create/edit datalist item form and datagrid)
Thank you in advance.

krups

I can display status color in forms (create/edit) using custom control as below:

<#include "/org/alfresco/components/form/controls/common/utils.inc.ftl" />
<#if field.control.params.optionSeparator??>
   <#assign optionSeparator=field.control.params.optionSeparator>
<#else>
   <#assign optionSeparator=",">
</#if>

<#assign fieldValue=field.value>

<#if fieldValue?string == "" && field.control.params.defaultValueContextProperty??>
   <#if context.properties[field.control.params.defaultValueContextProperty]??>
      <#assign fieldValue = context.properties[field.control.params.defaultValueContextProperty]>
   <#elseif args[field.control.params.defaultValueContextProperty]??>
      <#assign fieldValue = args[field.control.params.defaultValueContextProperty]>
   </#if>
</#if>

<div class="form-field">
   <#if form.mode == "view">
      <div class="viewmode-field">
         <span class="viewmode-label">${field.label?html}:</span>
         <span class="viewmode-value">${field.value?html}</span>
      </div>
   <#else>
      <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
      <#if field.control.params.options?? && field.control.params.options != "">
       <select id="${fieldHtmlId}" name="${field.name}" tabindex="0"
               <#if field.description??>title="${field.description}"</#if>
               <#if field.control.params.size??>size="${field.control.params.size}"</#if> 
               <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>
               <#if field.control.params.style??>style="${field.control.params.style}"</#if>
               <#if field.disabled  && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true")>disabled="true"</#if>>
          <#list field.control.params.options?html?split(optionSeparator) as value1 >
 <#assign value2=value1?string?split("|")>
 <#switch value2[0]>
  <#case "Red">
  <option style="background:#FF0000" value="Red" <#if value2[0] == fieldValue?string || (fieldValue?is_number && fieldValue?c == value2[0])> selected="selected"</#if>>Red</option>
   <#break>
   <#case "Amber">
  <option style="background:#FF7E00" value="Amber" <#if value2[0] == fieldValue?string || (fieldValue?is_number && fieldValue?c == value2[0])> selected="selected"</#if>>Amber</option>
   <#break>
    <#case "Green">
  <option style="background:#00FF00" value="Green" <#if value2[0] == fieldValue?string || (fieldValue?is_number && fieldValue?c == value2[0])> selected="selected"</#if>>Green</option>
   <#break>
    <#case "White">
  <option style="background:#FFFFFF" value="White" <#if value2[0] == fieldValue?string || (fieldValue?is_number && fieldValue?c == value2[0])> selected="selected"</#if>>White</option>
   <#break>
  <#default>
 </#switch>

 </#list>
         </select>
         <@formLib.renderFieldHelp field=field />
      <#else>
         <div id="${fieldHtmlId}" class="missing-options">${msg("form.control.selectone.missing-options")}</div>
      </#if>
   </#if>
</div>
 ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

but I want to display It on datagrid view as well.

Could you please help me?