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
Discussion posts and replies are publicly visible
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")
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})), ) } ) } )