Adding image row to a table in Ignition Perspective

Ignition
1

I would like to add images to the first row of a table. One image per column.
I trying to add a Custom Method Script to the table like this:

def configureCell(self, self, value, textValue, selected, rowIndex, colIndex, colName, rowView, colView):
   RetVal = {}
    
    # Default text handling
    if value == 0:
        RetVal['text'] = None

    # Customizations for the first row to display images
    if rowIndex == 0:
        RetVal['text'] = None  # Clears any text in the first row
        RetVal['background'] = '244,244,244'  # Sets a uniform background color for the first row

        # Maps column indices to specific image paths
        imagePaths = {
            2: '/system/images/Connet-logo-2.png',
            3: '/system/images/Connet-logo-3.png',
            4: '/system/images/Connet-logo-4.png',
 
            5: '/system/images/Connet-logo-5.png'
        }

but doesn´t seem to work

:desktop_computer:

any ideas on how to archieve this?

2

configureCell is for Vision's Power Table. It doesn't work in Perspective.

The Table component isn't the right tool for what you are trying to do. By definition, all the cells of a column will be the same type so you can't have a picture on one row and text on another. You could by using render : view for each cell and having the view switch between pictures and text but it seems like a mess.

Show what you want your finished layout to look like. There's probably a better way.

3

Something like:

image
image1163×165 109 KB

4

Add them as background images in the table headers.

Images in table header
Images in table header819×212 18.1 KB

Table JSON 
[
  {
    "type": "ia.display.table",
    "version": 0,
    "props": {
      "data": [
        {
          "city": {
            "value": "Folsom",
            "editable": true,
            "style": {
              "backgroundColor": "#F7901D",
              "classes": "some-class"
            },
            "align": "center",
            "justify": "left"
          },
          "country": "United States",
          "population": 77271
        },
        {
          "city": "Helsinki",
          "country": "Finland",
          "population": 635591
        },
        {
          "city": "Jakarta",
          "country": "Indonesia",
          "population": 10187595
        },
        {
          "city": "Madrid",
          "country": "Spain",
          "population": 3233527
        },
        {
          "city": "Prague",
          "country": "Czech Republic",
          "population": 1241664
        },
        {
          "city": "San Diego",
          "country": "United States",
          "population": 1406630
        },
        {
          "city": "San Francisco",
          "country": "United States",
          "population": 884363
        },
        {
          "city": "Shanghai",
          "country": "China",
          "population": 24153000
        },
        {
          "city": "Tokyo",
          "country": "Japan",
          "population": 13617000
        },
        {
          "city": "Washington, DC",
          "country": "United States",
          "population": 658893
        },
        {
          "city": "Wellington",
          "country": "New Zealand",
          "population": 405000
        },
        {
          "city": "Delhi",
          "country": "India",
          "population": 11034555
        },
        {
          "city": "Dhaka",
          "country": "Bangladesh",
          "population": 14399000
        },
        {
          "city": "Lagos",
          "country": "Nigeria",
          "population": 16060303
        },
        {
          "city": "Karachi",
          "country": "Pakistan",
          "population": 14910352
        },
        {
          "city": "Istanbul",
          "country": "Turkey",
          "population": 14025000
        },
        {
          "city": "Cairo",
          "country": "Egypt",
          "population": 10230350
        },
        {
          "city": "Mexico City",
          "country": "Mexico",
          "population": 8974724
        },
        {
          "city": "London",
          "country": "United Kingdom",
          "population": 8825001
        },
        {
          "city": "New York City",
          "country": "United States",
          "population": 8622698
        },
        {
          "city": "Tehran",
          "country": "Iran",
          "population": 8154051
        },
        {
          "city": "Bogota",
          "country": "Colombia",
          "population": 7878783
        },
        {
          "city": "Rio de Janeiro",
          "country": "Brazil",
          "population": 6429923
        },
        {
          "city": "Riyadh",
          "country": "Saudi Arabia",
          "population": 5676621
        },
        {
          "city": "Singapore",
          "country": "Singapore",
          "population": 5535000
        },
        {
          "city": "Saint Petersburg",
          "country": "Russia",
          "population": 5191690
        },
        {
          "city": "Sydney",
          "country": "Australia",
          "population": 208374
        },
        {
          "city": "Abidjan",
          "country": "Ivory Coast",
          "population": 4765000
        },
        {
          "city": "Dar es Salaam",
          "country": "Tanzania",
          "population": 4364541
        },
        {
          "city": "Wellington",
          "country": "New Zealand",
          "population": 405000
        },
        {
          "city": "Los Angeles",
          "country": "United States",
          "population": 3884307
        },
        {
          "city": "Berlin",
          "country": "Germany",
          "population": 3517424
        },
        {
          "city": "Jeddah",
          "country": "Saudi Arabia",
          "population": 3456259
        },
        {
          "city": "Kabul",
          "country": "Afghanistan",
          "population": 3414100
        },
        {
          "city": "Mashhad",
          "country": "Iran",
          "population": 3001184
        },
        {
          "city": "Milan",
          "country": "Italy",
          "population": 1359905
        },
        {
          "city": "Kiev",
          "country": "Ukraine",
          "population": 2908703
        },
        {
          "city": "Rome",
          "country": "Italy",
          "population": 2877215
        },
        {
          "city": "Chicago",
          "country": "United States",
          "population": 2695598
        },
        {
          "city": "Osaka",
          "country": "Japan",
          "population": 2691742
        },
        {
          "city": "Bandung",
          "country": "Indonesia",
          "population": 2575478
        },
        {
          "city": "Managua",
          "country": "Nicaragua",
          "population": 2560789
        },
        {
          "city": "Paris",
          "country": "France",
          "population": 2229621
        },
        {
          "city": "Shiraz",
          "country": "Iran",
          "population": 1869001
        },
        {
          "city": "Manila",
          "country": "Philippines",
          "population": 1780148
        },
        {
          "city": "Montreal",
          "country": "Canada",
          "population": 1649519
        },
        {
          "city": "Guadalajara",
          "country": "Mexico",
          "population": 1495189
        },
        {
          "city": "Dallas",
          "country": "United States",
          "population": 1317929
        },
        {
          "city": "Yerevan",
          "country": "Armenia",
          "population": 1060138
        },
        {
          "city": "Tunis",
          "country": "Tunisia",
          "population": 1056247
        }
      ],
      "enableHeaderGroups": true,
      "columns": [
        {
          "field": "city",
          "visible": true,
          "editable": false,
          "render": "auto",
          "justify": "left",
          "align": "center",
          "resizable": true,
          "sortable": true,
          "sort": "none",
          "filter": {
            "enabled": false,
            "visible": "on-hover",
            "string": {
              "condition": "",
              "value": ""
            },
            "number": {
              "condition": "",
              "value": ""
            },
            "boolean": {
              "condition": ""
            },
            "date": {
              "condition": "",
              "value": ""
            }
          },
          "viewPath": "",
          "viewParams": {},
          "boolean": "checkbox",
          "number": "value",
          "progressBar": {
            "max": 100,
            "min": 0,
            "bar": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "track": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "value": {
              "enabled": true,
              "format": "0,0.##",
              "justify": "center",
              "style": {
                "classes": ""
              }
            }
          },
          "toggleSwitch": {
            "color": {
              "selected": "",
              "unselected": ""
            }
          },
          "nullFormat": {
            "includeNullStrings": false,
            "strict": false,
            "nullFormatValue": ""
          },
          "numberFormat": "0,0.##",
          "dateFormat": "MM/DD/YYYY",
          "width": "",
          "strictWidth": false,
          "style": {
            "classes": ""
          },
          "header": {
            "title": "",
            "justify": "left",
            "align": "top",
            "style": {
              "classes": "",
              "backgroundImage": "url(\"/system/images/Builtin/icons/48/logic_and.png\")",
              "height": "60px",
              "backgroundRepeat": "no-repeat",
              "backgroundPosition": "bottom"
            }
          },
          "footer": {
            "title": "",
            "justify": "left",
            "align": "center",
            "style": {
              "classes": ""
            }
          }
        },
        {
          "field": "country",
          "visible": true,
          "editable": false,
          "render": "auto",
          "justify": "auto",
          "align": "center",
          "resizable": true,
          "sortable": true,
          "sort": "none",
          "filter": {
            "enabled": false,
            "visible": "on-hover",
            "string": {
              "condition": "",
              "value": ""
            },
            "number": {
              "condition": "",
              "value": ""
            },
            "boolean": {
              "condition": ""
            },
            "date": {
              "condition": "",
              "value": ""
            }
          },
          "viewPath": "",
          "viewParams": {},
          "boolean": "checkbox",
          "number": "value",
          "progressBar": {
            "max": 100,
            "min": 0,
            "bar": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "track": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "value": {
              "enabled": true,
              "format": "0,0.##",
              "justify": "center",
              "style": {
                "classes": ""
              }
            }
          },
          "toggleSwitch": {
            "color": {
              "selected": "",
              "unselected": ""
            }
          },
          "nullFormat": {
            "includeNullStrings": false,
            "strict": false,
            "nullFormatValue": ""
          },
          "numberFormat": "0,0.##",
          "dateFormat": "MM/DD/YYYY",
          "width": "",
          "strictWidth": false,
          "style": {
            "classes": ""
          },
          "header": {
            "title": "",
            "justify": "left",
            "align": "top",
            "style": {
              "classes": "",
              "backgroundRepeat": "no-repeat",
              "backgroundImage": "url(\"/system/images/Builtin/icons/48/oszillograph.png\")",
              "height": "60px",
              "backgroundPosition": "bottom"
            }
          },
          "footer": {
            "title": "",
            "justify": "left",
            "align": "center",
            "style": {
              "classes": ""
            }
          }
        },
        {
          "field": "population",
          "visible": true,
          "editable": false,
          "render": "auto",
          "justify": "auto",
          "align": "center",
          "resizable": true,
          "sortable": true,
          "sort": "none",
          "filter": {
            "enabled": false,
            "visible": "on-hover",
            "string": {
              "condition": "",
              "value": ""
            },
            "number": {
              "condition": "",
              "value": ""
            },
            "boolean": {
              "condition": ""
            },
            "date": {
              "condition": "",
              "value": ""
            }
          },
          "viewPath": "",
          "viewParams": {},
          "boolean": "checkbox",
          "number": "value",
          "progressBar": {
            "max": 100,
            "min": 0,
            "bar": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "track": {
              "color": "",
              "style": {
                "classes": ""
              }
            },
            "value": {
              "enabled": true,
              "format": "0,0.##",
              "justify": "center",
              "style": {
                "classes": ""
              }
            }
          },
          "toggleSwitch": {
            "color": {
              "selected": "",
              "unselected": ""
            }
          },
          "nullFormat": {
            "includeNullStrings": false,
            "strict": false,
            "nullFormatValue": ""
          },
          "numberFormat": "0,0.##",
          "dateFormat": "MM/DD/YYYY",
          "width": "",
          "strictWidth": false,
          "style": {
            "classes": ""
          },
          "header": {
            "title": "",
            "justify": "left",
            "align": "top",
            "style": {
              "classes": "",
              "backgroundRepeat": "no-repeat",
              "backgroundImage": "url(\"/system/images/Builtin/icons/48/wrench.png\")",
              "height": "60px",
              "backgroundPosition": "bottom"
            }
          },
          "footer": {
            "title": "",
            "justify": "left",
            "align": "center",
            "style": {
              "classes": ""
            }
          }
        }
      ]
    },
    "meta": {
      "name": "Table_0"
    },
    "position": {
      "basis": "299px"
    },
    "custom": {}
  }
]

Tips:

  • Create dedicated images for the headers. Make them all the same height.
  • column.n.header.align : top
  • column.n.header.style.backgroundRepeat : no-repeat
  • column.n.header.style.backgroundImage : url("/system/images/Builtin/icons/48/logic_and.png")
  • column.n.header.style.height : 60px ← Set this to image + text height.
  • column.n.header.style.backgroundPosition : bottom
3 Likes
5

I´m trying this and I getting an error message because some values on my selection.data.0 are null

image
image310×550 22.6 KB

image

image

not sure if is related

6

This is not related to the headers.
Start a new question. Try to post a chart configuration and chart data to reproduce the error.

1 Like