You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
Supplemental Videos
-
7:55Control Components
-
4:16Dropdown
-
3:01Tree View
-
5:20Table
-
3:53Power Table
-
3:55User, Schedule and Roster Management
-
3:13Row Selector
-
2:44Column Selector
-
2:56File Explorer and PDF Viewer
LESSON
Power Table
Description
The Power Table is a more customizable version of the Table component, and it has many more features. The Power Table contains advanced features for displaying your tabular data, such as drag-and-drop rows, multi-column sorting, column filtering, and cell-spanning. Much of the customization comes through extension functions which are available to configure how each cell of the table looks, how the headers look, and more.
Video recorded using: Ignition 8.1
Transcript
(open in window)[00:00] Let's take a look at the power table component. The power table offers similar functionality as the standard table component, but has a wealth of additional features. I'm here in my designer, and I'll come to the table section of the component palette to drag and drop a power table on my window. I'll need some data to work with so I can utilize the test data property to populate the table data. Now, just like the standard table, the power table has a customizer that allows us to make some changes to the columns in the table. So if I right click, go down to customizers and go to table customizer, we'll see a lot of the same options here, such as hiding specific columns, making them editable and so on and so forth. Now, where the power table differs from the standard table is there are quite a few features that are available from the runtime. So I'll put my designer to preview mode and I can right click on the header row here and I can actually hide specific columns, so maybe I want to hide the date and the boolean column. I can also reorder the columns. So I can take my string column and move that over, and I can do this as many times as I like and order the columns in whatever order I choose.
[01:07] I can also sort the columns by ascending and then descending order. Additionally, I can hold the control key and left click on other columns, and now I'm sorting by multiple columns. Now if I come down here, I can select individual rows. I can also click and drag to select multiple rows. If I hit the control and c key to copy, I can copy these selected rows and now I can paste them anywhere I want. These selected rows can also be dragged and dropped into other ignition components. To do this, I can enable the row dragging enabled property under the behavior section. I'll drag and drop the selected rows within the same power table component. Doing so produces an error telling me that the on rows dropped extension function is not implemented. To make use of this drag and drop functionality, I need to enable an extension function that tells the target component what to do with the data. I'll close out of the error and go back into design mode and right click into the scripting option for the power table. And you can see there are quite a few functions available, including that on rows dropped.
[02:04] So if I wanted to do something when I dropped rows from any power table onto this power table, I would configure that script right here. Now, I'm not going to go over every function, but we will take a look at one example. I'll come to this configure cell extension function. This allows you to make changes to individual cells on the table. You can do things such as modify the background color, the border, the font, the foreground color, and so on. If I enable this, you'll see there's an example script commented out here. I'll go ahead and un-comment. Looking at the script we can see that when a row is selected, it uses the color of the selection background property of the component. If a row is not selected, alternate between white and this gray color. I'll click okay and we can see that it's alternating between gray and white. Another feature of the power table is that we can have individual cells span across multiple rows and columns. To do this, I can come down to the property editor again and go down to the data section here. There's the cell span data property. We can specify which cell and how large we want to make it.
[03:05] To give you an example, we'll add a new row here. We'll focus on the very first row and column, and I'll do so by specifying row zero and column zero, with a height of two columns in a width of two rows. When I click on okay we can see that one cell is now expanded two columns and two rows. Lastly, we'll discuss the view dataset property down below. This property represents the current visible state and configuration of the table made by the user, versus the full underlying dataset that's driving the table. So you can see here I have my three columns in order as they are on the table, and that is very different from the data properties dataset. The dataset still has all five columns on the table technically, so you can do things like run a script whenever a user hides a column or reorders the columns in the table and so on.