Skip to main content
P
priya_A1-Visitor
1-Visitor
August 2, 2021
Solved

How to achieve dynamic grid column with shapes and shapes formatting

  • August 2, 2021
  • 1 reply
  • 3754 views

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

Best answer by YY_9928109

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

1 reply

P
PEHOWE17-Peridot
17-Peridot
August 3, 2021

Hello @SA_01_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

P
priya_A1-VisitorAuthor
1-Visitor
August 6, 2021

@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.

P
PEHOWE17-Peridot
17-Peridot
August 6, 2021

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:

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

Terms & ConditionsCookie settingsAccessibility statement