Table Row Background color, from scripting event. It's broken

Ignition
1

I am following this guy's video on YT: Artek Solutions

I have most of it working except for the background color styling on the Add and Delete button events.

The data comes in from an NQ, then a script transform like this:

def transform(self, value, quality, timestamp):
	columns = self.SetColumns(value)
	output = []
	
	for row in range(value.getRowCount()):
		row_value = {"updateMe":False, "deleteMe":False}
		for col in columns:
			colName = col["field"]
			cellValue = value.getValueAt(row, colName)
			row_value[colName] = {"value":cellValue, "action":"update", "enabled":True, "display": True, "style":{}}
			if colName == "Description":
				row_value[colName]["enabled"] = False
		output.append(row_value)
		
	return output

I have three embedded components: text field, drop down and numeric input.

This is the numeric input:

{"type":"view","payload":{"view":{"path":"Test Views/Scripting/embed/numericField","width":100.0,"height":32.0,"params":{"column":"","isRequired":true,"placeholder":"","rowData":{},"rowIndex":"","source":1,"value":""}}}}

And this is the delete button:

[
  {
    "type": "ia.input.button",
    "version": 0,
    "props": {
      "text": "Delete"
    },
    "meta": {
      "name": "btn_Delete"
    },
    "position": {
      "x": 110.944375,
      "y": 412.3,
      "height": 30,
      "width": 80.05
    },
    "custom": {},
    "events": {
      "component": {
        "onActionPerformed": {
          "type": "script",
          "scope": "G",
          "config": {
            "script": "\tds = self.parent.custom.data_in\n#\theaders = [col for col in ds.columnName if col != 'Price']\n#\ttype_of_price = ds.getColumnType(ds.getColumnIndex('Price'))\n#\tprice = [0 for _ in xrange(ds.rowCount)]\n#\tds = system.dataset.filterColumns(ds, headers)\n#\tds = system.dataset.addColumn(ds, price, 'price', type_of_price)\n\t\n#\tfor row in xrange(ds.getRowCount()):\n#\t\tds = system.dataset.setValue(ds, row, 'price', 0)\n#\tself.parent.custom.data_in = ds\n\n\ttable = self.getSibling(\"Table_0\")\n\tcolumns = table.props.columns\n\tselectedRow = table.props.selection.selectedRow\n\tdata = table.props.data\n\t\n\tif selectedRow is None:\n\t\tpass\n\telif data[selectedRow]['ReqID']['value'] is None:\n\t\tdel table.props.data[selectedRow]\n\telse:\n\t\ttable.props.data[selectedRow]['deleteMe'] = True\n\t\t\n\t\tfor col in columns:\n\t\t\tcolName = col.field\n\t\t\ttable.props.data[selectedRow][colName][\"style\"][\"background-color\"] = \"var(--error)\"\n\t\t\t"
          }
        }
      }
    }
  }
]

This is the table's custom method to create the table structure:

	true = True
	false = False
	try:
		columns = system.dataset.getColumnHeaders(value)
	except:
		columns = value[0].keys
	
	output = []
	for col in columns:
		colObject = {"field": col, "visible": true, "editable": false, "render": "auto", "justify": "auto", "align": "center", "resizable": true,
					 "sortable": false, "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": "center", "align": "center", "style": {"classes": ""}},
  					 "footer": {"title": "", "justify": "left", "align": "center", "style": {"classes": ""}}}
  					 
  		if col == "ItemID":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Item ID"
  			colObject['visible'] = False
  		elif col == "DateReceived":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/textField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Date Rec'd"
  			colObject['visible'] = True
  		elif col == "ReqID":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Req ID"
  			colObject['visible'] = True
  		elif col == "Quantity":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Qty"
  			colObject['visible'] = True
  		elif col == "QtyReceived":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Qty Rec'd"
  			colObject['visible'] = True
  		elif col == "Price":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Price"
  			colObject['visible'] = True
  		elif col == "LeadTime":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/numericField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Lead Time"
  			colObject['visible'] = True
  		elif col == "PartNumber":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/textField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Part #"
  			colObject['visible'] = True
  		elif col == "Description":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/textField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Description"
  			colObject['visible'] = True
  		elif col == "UOM":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/textField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "UOM"
  			colObject['visible'] = True
  		elif col == "Container":
  			colObject['render'] = "view"
  			colObject['viewPath'] = "Test Views/Scripting/embed/textField"
  			colObject['viewParams']['source'] = self.custom.table_id
  			colObject['viewParams']['isRequired'] = True
  			colObject['header']['title'] = "Container"
  			colObject['visible'] = True
  		
 		# set visible columns
 		
 		output.append(colObject)
 	
 	self.props.columns = output
 	return output

Hope this is enough.

Thank you.

2

Hey that's my video. Is it just the background colors that aren't working from the Add and Delete buttons? Other than the colors, are the buttons adding and deleting the rows as expected? After clicking one of the buttons, check the table's data property - look at the row you added/deleted and make sure that each column's style.background-color property is updating.

3

Aha, I knew you were on the forums somewhere! Really like the work.
Colors - when I click Add I see a flash of orange, then all goes back to default colors.
Row are added and deleted as expected.


This vid shows the add feature, but with new data.

After clicking Delete:

image
image340×307 18.3 KB

Ok, column style is not updating.

This is the Delete code:

table = self.getSibling("Table_0")
	columns = table.props.columns
	selectedRow = table.props.selection.selectedRow
	data = table.props.data
	
	if selectedRow is None:
		pass
	elif data[selectedRow]['ReqID']['value'] is None:
		del table.props.data[selectedRow]
	else:
		table.props.data[selectedRow]['deleteMe'] = True
		
		for col in columns:
			colName = col.field
			table.props.data[selectedRow][colName]["style"]["background-color"] = "var(--error)"
4

Try adding a style to the embedded component:
background-color: transparent

I had a style class set up on my embedded component in the video, and I overlooked it, but I believe this is why you aren't seeing the colored rows. Let me know if that fixes it.

5

Yep! That's it. Thanks Daniel!

1 Like
6

@danieltalbot How about the disabled components? Yours do not appear grayed out and unclickable. How did you disable them and still make them look normal?

7

image
image1142×787 66.8 KB

image
image554×444 25 KB

having background-color (or backgroundColor) set to transparent on the embedded component will override the gray background when the component is disabled. You can make the component blend in even more with the table if you turn off the border (border: none).

8

Got it, I think my brain got distracted (scrambled, more likely) with the ability to edit, with the orange background, and the disabled background colors.

Thanks!

1 Like