cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

Change the color of Advance data grid based on Values

MS_10358659
4-Participant

Change the color of Advance data grid based on Values

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 

ACCEPTED SOLUTION

Accepted Solutions

Your JSON is not correct.

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

View solution in original post

4 REPLIES 4

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
4-Participant
(To:Rocko)

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 !

demotest.png

{
    "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"
            }
        }
    }
}



 

 

Your JSON is not correct.

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

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,

Catalina
PTC Community Moderator
Announcements


Top Tags