Change the color of Advance data grid based on Values

[MS_10358659]

Hello thingworx members,

I want to change the color of cell based on a values in advance datagrid. The values are result of SQL query.

The column name and it's values are dynamic. Is there anyway I can change the color of cell in the advance datagrid without using  datashape in the state formatting option.

Thanks 

[Rocko]

I think you would have to use a service that dynamically generates the Configuration as a JSON string and then bind that to the config property of the AG. https://support.ptc.com/help/thingworx/platform/r9.6/en/#page/ThingWorx/Help/Mashup_Builder/Widgets/WorkingWithAConfigurationService.html#

[MS_10358659]

Hello PTC team,

I tried to follow the configuration of JSON to the data grid 

I'm trying to update the background of Source column as shown below using the configuration under properties tab of data grid.  

expecting if 
Source column value is 

SAP_PO then background of cell colour needs to be red 
SAP_CC then  background of cell colour needs to be green 

I have gone through the examples of configuration of json GetEmployeeRoleBasedConfiguration. But i failed to get the expected output. 

I have enclosed the config file and image for your reference !

Looking forward for your support to solve this issue 

Many Thanks !

{
    "columns": {
        "header": {
            "titleCase": "",
            "overflow": "wrapped"
        },
        "columnDefs": [
            {
                "targets": 0,
                "fieldName": "Site",
                "title": "Site",
                "width": "*",
                "autoWidth": true,
                "overflow": "wrapped",
                "headerTextAlignment": "center",
                "textAlignment": "center",
                "hidden": false,
                "inLayout": true,
                "description": "....",
                "columnFormatter": {
                    "type": "string",
                    "format": "full"
                }
            },
            {
                "targets": 1,
                "fieldName": "Plant",
                "title": "Plant",
                "width": "*",
                "autoWidth": true,
                "overflow": "wrapped",
                "headerTextAlignment": "center",
                "textAlignment": "center",
                "hidden": false,
                "inLayout": true,
                "description": "....",
                "columnFormatter": {
                    "type": "string",
                    "format": "full"
                }
            },
            {
                "targets": 2,
                "fieldName": "KPI_Category",
                "title": "KPI Category",
                "width": "*",
                "autoWidth": true,
                "overflow": "ellipsis",
                "headerTextAlignment": "center",
                "textAlignment": "left",
                "hidden": false,
                "inLayout": true,
                "description": "....",
                "columnFormatter": {
                    "type": "string",
                    "format": "full"
                }
            },
            {
                "targets": 3,
                "fieldName": "KPI_Name",
                "title": "KPI Name",
                "width": "*",
                "autoWidth": true,
                "overflow": "ellipsis",
                "headerTextAlignment": "center",
                "textAlignment": "center",
                "hidden": false,
                "inLayout": true,
                "description": "....",
                "columnFormatter": {
                    "type": "string",
                    "format": "full"
                }
            },
            {
                "targets": 4,
                "fieldName": "Unit",
                "title": "Unit",
                "width": "*",
                "autoWidth": true,
                "overflow": "wrapped",
                "headerTextAlignment": "center",
                "textAlignment": "center",
                "hidden": false,
                "inLayout": true,
                "description": "....",
                "columnFormatter": {
                    "type": "string",
                    "format": "full"
                }
            },
            {
                "targets": 5,
                "fieldName": "Source",
                "title": "Source",
                "width": "*",
                "autoWidth": true,
                "overflow": "wrapped",
                "headerTextAlignment": "center",
                "textAlignment": "center",
                "hidden": false,
                "inLayout": true,
                "description": "....",
                "columnFormatter": {
                    "type": "string",
                    "format": "full",
                    "stateDefinition": {
                        "name": "OnOff",
                        "fieldName": "Source",
                        "type": "non-fixed",
                        "states": [
                            {
                                "name": "sappo",
                                "value": "SAP_PO",
                                "comparator": "==",
                                "styleName": "SAPPOStyle"
                            },
                            {
                                "name": "sapcc",
                                "value": "SAP_CC",
                                "comparator": "==",
                                "styleName": "SAPCCStyle"
                            }
                        ]
                    }
                }
            }
        ],
        "rows": {
            "selection": "none"
        },
        "styles": {
            "tableWrapperStyle": {
                "backgroundColor": "#e6e6e6",
                "secondaryBackgroundColor": "",
                "foregroundColor": "",
                "textDecoration": "",
                "image": "",
                "lineColor": "#b3b3b3",
                "borderStyle": "solid",
                "borderWidth": "1px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "11px",
                "fontWeight": "normal"
            },
            "tableHeaderStyle": {
                "backgroundColor": "#202020",
                "secondaryBackgroundColor": "",
                "foregroundColor": "#ffffff",
                "textDecoration": "",
                "image": "",
                "lineColor": "#c0c0c0",
                "borderStyle": "solid",
                "borderWidth": "1px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "11px",
                "fontWeight": "bold"
            },
            "rowBorderStyle": {
                "backgroundColor": "",
                "secondaryBackgroundColor": "",
                "foregroundColor": "",
                "textDecoration": "",
                "image": "",
                "lineColor": "",
                "borderStyle": "solid",
                "borderWidth": "1px",
                "fontFamily": "",
                "fontStyle": "",
                "fontSize": "",
                "fontWeight": ""
            },
            "cellBorderStyle": {
                "backgroundColor": "",
                "secondaryBackgroundColor": "",
                "foregroundColor": "",
                "textDecoration": "underline",
                "image": "",
                "lineColor": "",
                "borderStyle": "",
                "borderWidth": "2px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "11px",
                "fontWeight": "bold"
            },
            "rowBackgroundStyle": {
                "backgroundColor": "",
                "secondaryBackgroundColor": "",
                "foregroundColor": "",
                "textDecoration": "underline",
                "image": "",
                "lineColor": "",
                "borderStyle": "",
                "borderWidth": "2px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "11px",
                "fontWeight": ""
            },
            "rowAlternateBackgroundStyle": {
                "backgroundColor": "#f5f5f5",
                "secondaryBackgroundColor": "",
                "foregroundColor": "",
                "textDecoration": "",
                "image": "",
                "lineColor": "",
                "borderStyle": "",
                "borderWidth": "",
                "fontFamily": "",
                "fontStyle": "",
                "fontSize": "11px",
                "fontWeight": ""
            },
            "rowHoverStyle": {
                "backgroundColor": "#dddddd",
                "secondaryBackgroundColor": "",
                "foregroundColor": "#333333",
                "textDecoration": "",
                "image": "",
                "lineColor": "",
                "borderStyle": "",
                "borderWidth": "1px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "11px",
                "fontWeight": "normal"
            },
            "rowSelectedStyle": {
                "backgroundColor": "#0088cc",
                "secondaryBackgroundColor": "",
                "foregroundColor": "#ffffff",
                "textDecoration": "",
                "image": "",
                "lineColor": "",
                "borderStyle": "",
                "borderWidth": "",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "11px",
                "fontWeight": "bold"
            },
            "paginationButtonStyle": {
                "backgroundColor": "",
                "secondaryBackgroundColor": "",
                "foregroundColor": "#202020",
                "textDecoration": "",
                "image": "",
                "lineColor": "",
                "borderStyle": "solid",
                "borderWidth": "1px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "12px",
                "fontWeight": "bold"
            },
            "paginationHoverStyle": {
                "backgroundColor": "#252525",
                "secondaryBackgroundColor": "",
                "foregroundColor": "#ffffff",
                "textDecoration": "",
                "image": "",
                "lineColor": "",
                "borderStyle": "solid",
                "borderWidth": "1px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "12px",
                "fontWeight": "bold"
            },
            "paginationSelectedStyle": {
                "backgroundColor": "#0088cc",
                "secondaryBackgroundColor": "",
                "foregroundColor": "#ffffff",
                "textDecoration": "",
                "image": "",
                "lineColor": "",
                "borderStyle": "solid",
                "borderWidth": "1px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "12px",
                "fontWeight": "bold"
            },
            "toolbarStyle": {
                "backgroundColor": "#fafafa",
                "secondaryBackgroundColor": "",
                "foregroundColor": "#202020",
                "textDecoration": "",
                "image": "",
                "lineColor": "",
                "borderStyle": "solid",
                "borderWidth": "1px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "12px",
                "fontWeight": ""
            },
            "rowFormatterStyle": {
                "backgroundColor": "#636262",
                "secondaryBackgroundColor": "",
                "foregroundColor": "white",
                "textDecoration": "underline",
                "image": "",
                "lineColor": "black",
                "borderStyle": "solid",
                "borderWidth": "1px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "normal",
                "fontSize": "14px",
                "fontWeight": "bold"
            },
            "SAPPOStyle": {
                "backgroundColor": "red",
                "secondaryBackgroundColor": "",
                "foregroundColor": "white",
                "textDecoration": "underline",
                "image": "",
                "lineColor": "red",
                "borderStyle": "solid",
                "borderWidth": "1px",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "italic",
                "fontSize": "12px",
                "fontWeight": "bold"
            },
            "SAPCCStyle": {
                "backgroundColor": "green",
                "secondaryBackgroundColor": "",
                "foregroundColor": "white",
                "textDecoration": "underline",
                "image": "",
                "lineColor": "",
                "borderStyle": "",
                "borderWidth": "",
                "fontFamily": [
                    "helvetica",
                    "arial"
                ],
                "fontStyle": "italic",
                "fontSize": "12px",
                "fontWeight": "bold"
            }
        }
    }
}

[Rocko · Accepted solution]

Your JSON is not correct.

"rows" and "styles" need to be on the same level as "columns", not a child of the node.

[Catalina]

Hi @MS_10358659,

I wanted to see if you got the help you needed.

If so, please mark the appropriate reply as the Accepted Solution or please feel free to detail in a reply what has helped you and mark it as the Accepted Solution. It will help other members who may have the same question.
Please note that industry experts also review the replies and may eventually accept one of them as solution on your behalf.

Of course, if you have more to share on your issue, please pursue the conversation.

Thanks,