regarding configuration of RAG status

Question

i need to configure an action plan (interface) for RAG statuses (Green,Yellow,Red)(if user selects green from a drpdown(which is in editable grid)in the consecutive column should display(the selected colour) automatically,) 
 can any suggest me some example code

Vadivelan · Answer

Hi shilpak0002 
 I don't think its possible to color the entire cell in a grid field. You can try to add a image field next to the drop down field and show an icon in Green, Yellow or Red based on the drop-down value selected. You can change the icon values as per your need below. a!imageField( images: if( fv!item.status = cons!GREEN_COLOR, a!documentImage( document: a!iconIndicator( icon: "STATUS_OK" ), caption: "GREEN" ), if( fv!item.status = cons!YELLOW_COLOR, a!documentImage( document: a!iconIndicator( icon: "STATUS_OK" ), caption: "YELLOW" ), a!documentImage( document: a!iconIndicator( icon: "STATUS_NOTDONE" ), caption: "RED" ) ) ), size: "ICON", align: "CENTER" )

Chris · Answer

The issue here is the restriction on components allowed within a!gridRowLayout() , Supported components include: Barcode, Checkboxes, Date, Date & Time, Dropdown, Decimal, Encrypted Text, File Upload, Image, Integer, Link, Multiple Dropdown, Paragraph, Pickers, Progress Bar, Radio Buttons, Rich Text, and Text. 
 So, if this must be displayed within a grid specifically, a few options are the a!imageField() as noted, or coloring a!richTextIcon() to match the selection. This is an example with a Rich Text field/icon to display your color choice: 
 a!localVariables(
 local!gridData: {{color: "#65fc32"},{color: "#fdf246"},{color: "#dd030e"}},
 a!columnsLayout(
 columns: {
 a!columnLayout(),
 a!columnLayout(
 contents: {
 a!gridLayout(
 headerCells: a!forEach(items: {"Select","Display"}, expression: a!gridLayoutHeaderCell(label: fv!item)),
 columnConfigs: a!forEach(items: {"DISTRIBUTE","ICON"}, expression: a!gridLayoutColumnConfig(width: fv!item)),
 addRowLink: a!dynamicLink(label: "Add a Row", saveInto: a!save(local!gridData,append(local!gridData,{color: null}))),
 rows: a!forEach(
 items: local!gridData,
 expression: a!gridRowLayout(
 it: fv!index,
 contents: {
 a!dropdownField(
 placeholderLabel: "-- Select --",
 choiceLabels: {"Green","Yellow","Red"},
 choiceValues: {"#65fc32","#fdf246","#dd030e"},
 value: fv!item.color,
 saveInto: fv!item.color
 ),
 a!richTextDisplayField(
 align: "CENTER",
 value: {
 a!richTextIcon(
 showWhen: not(rule!APN_isEmpty(fv!item.color)),
 icon: "square",
 color: fv!item.color,
 size: "MEDIUM_PLUS"
 )
 }
 )
 }
 )
 )
 )
 }
 ),
 a!columnLayout()
 }
 )
)
 
 If you can display outside of a grid, you can expand your component usage to say a!cardLayout(), etc. Simple example: 
 shilpak0002 said: nterface) for RAG statuses ( 
 
 a!localVariables(
 local!gridData: {{color: "#65fc32"},{color: "#fdf246"},{color: "#dd030e"}},

 {
 a!forEach(
 items: local!gridData,
 expression: {
 a!columnsLayout(
 columns: {
 a!columnLayout(),
 a!columnLayout(
 contents: {
 a!dropdownField(
 placeholderLabel: "-- Select --",
 choiceLabels: {"Green","Yellow","Red"},
 choiceValues: {"#65fc32","#fdf246","#dd030e"},
 value: fv!item.color,
 saveInto: fv!item.color
 )
 }
 ),
 a!columnLayout(
 contents: {
 a!cardLayout(
 style: fv!item.color,
 height: "SHORT"
 )
 }
 ),
 a!columnLayout()
 }
 )
 }
 ),
 a!linkField(
 links: {
 a!dynamicLink(
 label: "Add a Row", 
 saveInto: a!save(local!gridData,append(local!gridData,{color: null})),
 )
 }
 )
 }
)