[Feedback] NEW Perspective Table

Ignition Early Access
48

For anyone wondering how they might be able to add custom row styles (and configuration) based upon a rows value derived from a dataset. You’ll need to create a transform on the bound dataset using a script like this example:

    output_json = []
    
    style_orange = {"backgroundColor": "#F7901D"}
    style_green = {"backgroundColor": "#00AA00"}
    
    for row in range(value.getRowCount()):
        row_object = {}
        
        row_value = {}
        row_style = {}
        for col in range(value.getColumnCount()):    
            row_value[value.getColumnName(col)] = value.getValueAt(row, col)
            row_object['value'] = row_value
            
            if value.getColumnName(col) == 'container_type':
                if value.getValueAt(row, col) == 'can':
                    row_style = style_orange
                elif value.getValueAt(row, col) == 'bottle':
                    row_style = style_green

            row_object['style'] = row_style
            
        output_json.append(row_object)
        
    return output_json

You can take it even further and create a shape as complicate as this if you’d like, for example:

    { 
        "value": {   // The rows value. 
           "city": { // Custom cell configuration.
              "value": "Folsom",
              "editable": true,
              "style": {
                  "backgroundColor": "ignition-orange",
                  "classes": "some-class"
               },
              "align": "top" // Also accepts center and bottom
              "justify": "left" // Also accepts center and right
            },
            "country": "United States", 
            "population": 1000000 
        },
        "style": {  // Custom row styles.
            "backgroundColor": "#F7901D",
            "classes": "some-class"
        }, 
        "subview": {  // Row subview configuration. Can override configuration from rows config.
            "enabled": true, 
            "viewPath": "myView", 
            "viewParams": { 
                "param1": 3 
            } 
        } 
    }
6 Likes