How to achieve dynamic grid column with shapes and shapes formatting

[priya_A]

Problem Statement
Built in grid feature in Thingworx is not supporting shapes, we are facing challenges for design front and dynamic column construction with shapes, and shape formatting with grid structure

1)Required Grid with dynamic column.
2)Within the grid required to display shapes, images and
need to do state based formatting for shapes
3)Need tooltip for data and column header

[PEHOWE]

Hello @SA_9985504,

If I understand what you want to accomplish. I might be able to assist. As a starting condition lets assume 2 different sets of column. 

• Create a data shape for each set of columns.
• In your service accept an input to determine which table to return
• Define an output type of infotable.
• write code to create a table based on a Data Shape and return.

  • // CreateInfoTableFromDataShape(infoTableName:STRING("InfoTable"), dataShapeName:STRING):INFOTABLE(Case-N4-DataShape)
    result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
                    infoTableName: "InfoTable",
                    dataShapeName: "Case-N4-DataShape"
                    });

    if (NumberColumnsSelection == 4) {

        // Case-N4-DataShape entry object
        let newEntry = {
            Column_1_DS_4: "One",// STRING
            Column_2_DS_4: "Two",// STRING
            Column_3_DS_4: "Three", // STRING
            Column_4_DS_4: "Four" // STRING 
        };

        result.AddRow(newEntry);
        
    } else {
    result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
                    infoTableName: "InfoTable",
                    dataShapeName: "Case-N8-DataShape"
                    });
        // Case-N8-DataShape entry object
    let newEntry = {
        Column_1_DS_8: "Some",// STRING
        Column_2_DS_8: "WHere",// STRING
        Column_3_DS_8: "There",// STRING
        Column_4_DS_8: "Is",// STRING
        Column_5_DS_8: "A",// STRING
        Column_6_DS_8: "DataShape",// STRING
        Column_7_DS_8: "Which",// STRING
        Column_8_DS_8: "Needs to be"// STRING
    };
        result.AddRow(newEntry);
    }

• The service returns "result" in one case a 4 column table in the other 8 columns.

It may be necessary to assign a datashape to the service output to get it to bind to the advanced Grid. It can be removed from the service after it is bound to the advanced grid.

In regards to placing images in the grid you will need to use ImageLink type.

Let me know If this helps with your question

Regards,

Peter

[priya_A]

@PEHOWE  Thanks for your suggestion. Please find our queries below.

1. In Attachment (GridRequirement.png), column 3,4 ,5, 6 ... are dynamic, and we don't have control on number of column during design time. With this scenario how to achieve dynamic set of columns.

2. From advance grid how to get particular selected cell details.

[PEHOWE]

Hello @priya_A,

With the requirement to have dynamic column configuration, you will need to dynamically create a Data Shape to describe the columns. This Data Shape will be used to create the InfoTable. Rows will be added to the InfoTable.

Please review the following articles:

• Article - CS287965 - How to Create and AddFieldDefinition in ThingWorx Datashape? https://www.ptc.com/en/support/article/CS287965

• Article - CS231106 - Is there a snippet to delete a DataShape from a service in ThingWorx https://www.ptc.com/en/support/article/CS231106

• Article - CS237875 - How to call the RESTful API in a ThingWorx platform service  https://www.ptc.com/en/support/article/CS237875

The result will be something like:

    var dataShapeNameParm = "TestDataShape";
    // Replace <nameOfDataShape> with the name of the data shape to delete. (Note: Case sensitive)
    var params = {
        DATASHAPENAME: dataShapeNameParm /* DATASHAPENAME */
    };

    // Replace <ThingName> with the name of the Thing that the service has been configured on.
    Things[<ThingName>].DeleteDataShape(params);    
    
    CreateDataShape (NumberColumnsSelection, dataShapeNameParm);

    result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
                infoTableName: "InfoTable",
                dataShapeName: dataShapeNameParm
                });

    let columnData = CreateData (NumberColumnsSelection);

    result.AddRow(columnData);
 

Now this example uses 2 functions:

function CreateDataShape (numberColumns, dataShapeName) {
    /***** CREATE DATASHAPE ****/
    var params = {
    name: dataShapeName /* STRING */,
    description: undefined /* STRING */,
    fields: undefined /* INFOTABLE */,
    tags: undefined /* TAGS */
    };

    //no return
    Resources["EntityServices"].CreateDataShape(params);

    for (let i = 0 ; i< numberColumns;i++ ) {
        let fieldName = "TestField_" + i;
        /******* ADD FIELD DEFINITION TO DATASHAPE *****/
        // Note: Datashape should contain one PrimaryKey for DataTable
        var params_AddField = {
        name: fieldName /* STRING */,
        description: undefined /* STRING */,
        type: "STRING" /* BASETYPENAME */,
        ordinal: undefined /* INTEGER */,
        primaryKey: true /* BOOLEAN */,
        dataShape: undefined /* DATASHAPENAME */
        };

        // no return
        DataShapes[dataShapeName].AddFieldDefinition(params_AddField);
    }
}

function CreateData (numberColumns) {
    //
    let valueListObject = {};
    for (let i=0; i< numberColumns;i++) {
        var nameStr = "TestField_" + i.toString();
        var nameValue = i;
        valueListObject[nameStr] = i; 
    }  
    return valueListObject;
}

You might be asking why as the first step do I call a service to delete the DataShape. I am removing the previous version, this allows me to create a new data Shape. The routine for the delete is described in the articles.

Please let me know if you have any questions.

Regards,

Peter

[YY_9928109]

thanks, it deed give much help to me. The column can be dynamic by the dynamic datashape and service.But now a problem appears, the data cannot be shown in the grid widget.

[YY_9928109 · Accepted solution]

I have solve the problem. The input parameter was not passed as expected。I passed the parameters with an intermediate service.Later I will use the interface to test the robustness of the service