How to reveal a password on a Perspective table cell hover

Ignition
1

I’m posting this for anyone who may have a similar task - or a special CSS requirement for a table cell or column.

I keep a database of Engineering passwords for authorised users. Rather than have all the passwords visible to anyone looking over my shoulder I wanted to only reveal them one at a time on hover. Here’s how I did it.

  • Set the table data query binding to Dataset.
  • Add a Transform | Script to the query binding. Here’s mine:
	ds = value
	colNames = ds.getColumnNames()
	d = []
	for i in range(ds.rowCount):
		rowDict = {}
		for col in colNames:
			if col == 'Password':
				rowDict[col] = {"value":ds.getValueAt(i, col), "style": {"classes": "secret"}}
			else:
				rowDict[col] = {"value":ds.getValueAt(i, col)}
		d.append(rowDict)
	return d
  • Create a style, secret in this case.
    • Set the Base Style text to 2 pt. (This will be illegible unless the page is highly zoomed. I tried using transparency but couldn’t get it to change on hover. Someone may have a better idea.)
    • Add Element State | Hover and set the text size to 12 pt (or whatever). Set colors if required.
    • Leave both background colors empty / undefined.

If you examine the results in the table binding you’ll see the style object has been added to the Password column.

One question: I rather work with JSON but couldn’t figure out how to do this other than with a dataset. How could I have coded it for JSON?