[Feedback] NEW Perspective Table

@ynejati This is a total noob question:

If I instantiate a Table object on the View, and I want to bind the data parameter to a memory tag, what data type does the Memory Tag need to be to pass data correctly? I’m tying to manually input data into a Memory tag to prove the concept before using an OPC-UA tag to feed data into the table.

I’m trying to implement the “array of objects” method, but when I do array of strings, it doesn’t interpret the string as a JSON object.

Thanks for any help!

You need an array of objects which contain key-value pairs, OR an object of objects where each internal object has a key named value. You could also use a Dataset tag for your data.

The default data we provide has a good example of the “object of objects” approach in the first object of props.data:
Screen Shot 2020-04-30 at 11.48.36 AM

You can see that the element 0 is an object, which contains some key:value pairs (country and population), and it also has an object named city which has an internal key named value.

So “Document” is the correct tag type if you want to do objects-in-objects, but it does make it difficult to update the tag dynamically, should values change; you’d probably be better off moving the contents of your table to a Database if that option is available. The Dataset tag type is pretty easy to use if you’re just doing key:value pairs.

2 Likes

Okay, thanks for the pointer. It took a bit for me to wrestle with…but the following ended up working:

  • create a Memory Tag with type Document.
  • go into “Raw Edit” mode, right-click the item “value” and change from “object” to Array
  • Add objects with key:value pairs

I tried the Object of objects but couldn’t get that to work, which would have been easier as I wouldn’t have had to change the “value” item from object to array.

So, on the OPC-UA side, I need some assistance. What is the correct OPC-UA datatype for feeding an Ignition table, to enable option 3 below, which I think is the more elegant way to do this. Options 1 & 2 work for me but seem clunky:

Option 1

  1. OPC-UA tag on the device as data type string encoded with json
  2. import to ignition tag as Document data type (manual step)
  3. direct tag bind to table

Option 2

  1. OPC-UA tag on the device as data type string with json encoded string
  2. import to ignition tag as string data type
  3. direct tag bind to table using transform script to run system.util.jsonDecode() on the string value (added configuration)

Option 3 - ideal

  1. Some OPC-UA data type
  2. import to ignition tag (drag-n-drop) that auto maps to ignition type document
  3. direct tag bind to table

Thanks for the help!

@ynejati

    "style": {  // Custom row styles.
       "backgroundColor": "#F7901D",
       "classes": "some-class"
   }

Is it by design that a row cannot inherit a background color from the style class, but it must be explicitly stated as shown above?

When I exclude "backgroundColor" from the style but add it to the style-class, it does not display the background color.

I have a simple table that is working well. One column is a dropdown list and the table is set to only show 10 rows per page, so I have the only pager option set to 10. The table will hold a total of about 50-60 rows at any give time.

Is there a way to remove just the pager option dropdown, and still show the page numbers to click?

Yes, but it’s complicated, since you have hover styles, striped styles, selection styles, and custom styles. Chance are though it’s not working because because striped styles is overriding background color from your class. Try removing the striped styles. Might have improved with the introduction of theming, but I don’t remember off the top of my head. Probably worth us revisiting this at some point.

1 Like

No, not really. This was by design. The pager is responsive and changes its layout depending on the row count and width of the table. The dropdown will disappear when the table is less than a certain width. We can add this as a feature request.

1 Like

Thanks for the pointer. Yes, the striped style was overriding the row background setting. Interesting that striping won’t override the background color if it’s explicitly set (not part of the style class). I would have thought that background color would always be higher priority than the striping color property.

1 Like

Thanks, it’s not critical but I think it would be a useful feature. In my case I only want to show 10 rows per page so the drop down is irrelevant.

Another thought…
I did notice an odd behavior that I want to share. As I mentioned, I have a dropdown, as a view, in one of the columns. Initially I had users reporting that they were not always able to click the dropdown. It was almost like it was disabled. I realized that if row selection is enabled and a user selects a row, the drop down is not accessible. Similar is true with column selection but it’s just harder to select the column if it’s full of drop downs.

In this picture I’ve selected the top row (clicked on the ‘Revision’ column in the top row) and I can not click on the drop down at all.
image
In my case the user only needs to interact with the dropdown so I’ve disabled both row and column selection. Therefore, it’s not affecting my project but I can think of instances that could be problematic. Just thought I’d share.

1 Like

Yes, we are aware. We have a ticket open for this. Plan to work on it very soon since you guys have been pretty vocal about it. Thanks for bringing it up.

2 Likes

Closing this thread, since it has long since served it’s original purpose.

For any new questions or discussion about the perspective table, please open a new thread (feel free to link to a post in this thread thought, especially if it’s relevant).

1 Like