Vision Reporting Components

A Row Selector has two important properties: Data In and Data Out. The Row Selector component filters the data in the Data In property and pushes the filtered result to the Data Out property.  

Let's configure a Row Selector to filter on some raw data. (This example uses a Power Table component which gives you the option of using some sample test data, or you can create your own data).

• Drag a Power Table component on to your window and change the Name of the Power Table to "Data In Table". Scroll down the Property Editor and toggle the TestData property. This will populate the Data property with some test data. Alternatively, you could manually populate the Data property using either the Dataset Viewer or by creating a binding on the property.
  
  

• Drag a Row Selector on to your window. With the Row Selector selected, click the binding icon on the Row Selector's Data In property, select the Property Binding Type and bind it to the Data property in the Data In Table, and click OK.
  
  Data In Table
  
  
  

• Drag another Power Table component on to your window, change the Name to "Data Out Table", and bind the Data property to the Row Selector Data Out property, and click OK.
  
  Note: Don't worry about the 'Unknown' nodes in the Row Selector component, as shown in the example below. The Row Selector has three default Date filters which haven't been configured for your data yet. You will need to reconfigure them, or delete them and configure your own unique set of filters. Once configured, the 'Unknown' nodes will disappear.
  
  Data Out Table
  
  
  
• Now let's configure your filters. Right click the Row Selector component and scroll down to Customizers > Row Selector Tree Customizer.  The Row Selector Tree Customizer provides three default Date filters. Here you can customize the parameters of each Date filter or choose another filter type that is more appropriate for your dataset. Each column on the Data In Table will be listed in the Available Filters tree, and the types of filters available to each column depends on the datatype of the column. After configuring your filters, click OK. All your filter nodes will be displayed in the Row Selector.
  

  This example uses the Date column to filter on the Month, Day, and Time combination.
  
  
  
  

• In Preview Mode, select Month, Day, or Time to filter on. The filtered results are displayed in the Data Out Table: 3 PM on May 6th 2017 is selected in the Row Selector, so the Data Out Table only contains records that match that datetime.
  
  Note: when designing your report window, it's not necessary to display the Data In Table only the Data Out Table. Furthermore, you don't necessarily need a component to house the data: the Data In property on the Row Selector could simply retrieve the raw data with a binding.
  
  

Here are a few more Row Selector examples:

• A Line Graph bound to a Row Selector - Set up grouping to be first by month and year, then day, then hour, like the example above. Clicking on a month and year will dynamically update the graph for that time period. Further clicking to a specific day or hour will re-filter the graph for that period.
  
  
• A Report Viewer bound to a Row Selector - Grouping by department (String) would allow selection by department, automatically regenerating the Report on selection.
  
  
• An "Alarm History" Table bound to a Row Selector - This could first be broken down severity level (Integer), then broken into "Alarm Acknowledged" / "Not Acknowledged" (Boolean based). Clicking "Severity 3" would filter the table to all Severity 3 alarms. Selecting "Unacknowledged" would then filter the table to Unacknowledged alarms of Severity 3.

Just like the Row Selector, the Column Selector also has the same two important properties: Data In and Data Out. The Column Selector filters the data in the Data In property and pushes the filtered results to the Data Out property.  

Let's configure a Column Selector to filter on some columns of employee data. (You can use a Power Table component which gives you the option of using some test data, or creating your own data like we did in the example below).

• Drag a Power Table component onto your window and change the Name of the Power Table to "Data In Table". Scroll down the Property Editor and toggle the TestData property. This will populate the Data property with some test data. Alternatively, you could manually populate the Data property using either the Dataset Viewer or by creating a binding on the property.
  
  

• Drag a Column Selector on to your window. With the Column Selector selected, click the binding icon on the Data In property at the bottom of the Property Editor, select the Property Binding Type and bind it to the Data property in the Data In Table, and click OK. The Column Selector will display a list of all the columns that are available in the dataset, and the Data In Table displays all the raw data.
  
  
  

  
  
  

• Drag another Power Table component on to your window, name this component Data Out Table, bind the Data property of this Power Table to the Column Selector Data Out property, and click OK. All the columns and raw data will be displayed in the Data Out Table.
  
  
  
  
  
• In Preview Mode, you can can hide specific columns by unchecking the box in the Column Selector. Conversely, if you want to bring a column into view, simply check the box. In this example the Date Hired and Shift columns were unchecked. You'll notice that these columns are omitted from the Data Out Table.
  
  
  
  

• The Column Selector component also has a way to hide columns that you don't want the user to deselect. In the Designer, right click the Column Selector and scroll down to Customizers > Column Selector Customizer. Click on Data DataSet, and you'll see a list of all the columns in the DataSet. If you check any of the columns under the Excluded from Selection, they will no longer show up on the Column Selector. It's important to note, that the Excluded from Selection doesn't filter out the column, it simply determines if you are able to filter the data on that column or not.
  
  
  
  

Let's setup the File Explorer and the PDF Viewer to create a window to view a PDF documents.

• In Designer, drag a File Explorer component and PDF Viewer component on to a window and place them side by side.

• Select the PDF Viewer component and Bind its File Path property to File Explorer's Selected Path property. Select the Property binding type, and drill down to the File Explorer Selected Path property.
  
  
  
  
• In the Property Editor of the File Explorer component, set the Root Directory property to any folder. You can either type in the folder path or bind the root directory as shown in the image below. The Root Directory restricts which directories are accessible on the component. This is typically used to restrict access to a particular folder so that the user doesn't have access to the entire file system. All folders nested within the Root Directory can be accessed on the component, so keep this in mind if you do not want user to see specific folders within the rooted directory.
  
  Note: if you set the File Explorer's Root Directory to a network folder, all clients will be able to access documents within all folders in that network folder).
  
  
  
  
• To filter for only PDF file types, enter 'pdf' (without quotes) in the File Extension Filter property, otherwise, all file types will be displayed inside the Root Directory.
  
  
• In Preview Mode, click on one of the reports in your Root Directory. The PDF Viewer works by passing the file path of the file you selected to the PDF Viewer. You'll also notice several PDF Viewer properties that drive the appearance of the PDF Viewer: Page Fit Mode, Hide or Show Toolbar, Utility Bar, Highlight, Select, Save, Print, and more. Note: Clicking on the Save icon in the runtime saves a copy of the report to the client computer, not the Ignition Gateway.