You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.

Included with the Reporting module are many unique Vision components, all of which are added into a new Reporting section of the Component Palette. The commonly used Report Viewer allows you to view your reports within a Vision Client. The others, such as the PDF Viewer and Row Selector, do not directly interact with a Report, but instead enhance the capabilities of your Vision Clients.

On this page ...


Reports in Vision Clients

Report Viewer

The Report Viewer component provides an easy way to view reports in Vision windows. Once you drag  a Report Viewer component onto your window, you choose the report you want to view from the Report Path property dropdown list. Parameters added during report creation are provided as properties in the Report Viewer, and will override any default values set in the Report Resource. Scroll down to the bottom of the Property Editor and you'll see your report parameters available as properties. The Report Viewer allows you to bind your report parameters to other components on your window.

Report Viewer Properties

While you're in the Property Editor, take a moment to scroll through all the Report Viewer properties. You'll notice that you can customize the visual style of your report by adding page number, change the zoom factor, and the background colors of the report. More information on the Report Viewer's properties can be found in the the Appendix.

Using the Report Viewer

Once you have your reports designed, you're ready to view them in a Vision window using the Report Viewer component. (You need to have a report created before you can view it using the Report Viewer. For information on how to design a report, refer to Report Design

  1. In the Designer, drag a Report Viewer component to a window. 
  2. With the Report Viewer selected, go to the Property Editor and set the Report Path property to display any of your existing reports from the dropdown list. 

  3. Scroll down to the bottom of the Property Editor, and you'll see Report Parameters. This sample report is using a parameter we called "maximum."  Any events that are longer than the duration set in the maximum parameter are  highlighted.

  4. Put the Designer in Preview Mode  to see the report as it would appear in the Client.

Save and Print a Report

In Preview Mode and from the Client, you can right click on the report and print it.  You can even save the report to PDF, HTML, or PNG format.  

Row Selector

The Row Selector component allows users to filter a dataset based on unique values of one or more columns. Each level in the sorting tree is based on these properties. The user will see a dynamically generated expandable tree that groups their data by any number of choices. As a user clicks down the tree, objects bound to the dataset will indicate the filtered data.

A common way to filter the data is by time. For example, you can feed the Row Selector an input dataset that represents a large time range, and have it break it up by Year, Month, and Day. Then you can power a report with the output dataset that lets the user dynamically create reports for any time range. When configuring the Row Selector for the first time, you'll notice some default Date filters in the Row Selector Tree Customizer to help you quickly configure and filter raw data by time.  If you don't want to filter your data by time, then simply delete the default filters and create your own. 

See the Appendix for more information on the Row Selector.


Row Selector

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).

  1. Drag a Power Table component on to your window and change the Name of the Power Table to "Data In Table".
  2. Scroll down the Property Editor and set the TestData property to 'true'. 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.
  3. Drag a Row Selector component on to your window. With the Row Selector selected, click the Binding icon  on the Row Selector's Data In property.

  4. Select the Property Binding Type, and bind it to the Data property in the Data In Table, and click OK.

  5. Drag another Power Table component on to your window, change the Name to "Data Out Table".

  6. With the Data Table Out still selected, bind the Data property to the Row Selector's Data Out property, and click OK.

    Don't worry about the 'Unknown' nodes in the Row Selector component. 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.

  7. 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.

  8. To start customizing, select the first filter, then change the Column Name to Data Column. (This example uses the Date column to filter on the Month, Day, and Time combination.)
  9. Change the Format String to MMMM yyyy.

  10. Click OK.

  11. Put your Designer into Preview Mode .

  12. Select Month, Day, or Time to filter on. The filtered results are displayed in the Data Out Table. In this example, we filtered on June 20th, so the Data Out Table only contains records that match that date.

When designing your report window, it's not necessary to display the Data In Table only the Data Out Table. You also don't 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.

  • 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.

Column Selector

The Column Selector is similar to the Row Selector except that instead of filtering rows, it filters out entire columns from the output dataset. Each column from the input dataset is shown as a checkbox and allows users to show or hide variables in the datasets via the checkboxes, then output the resulting dataset. 

The Column Selector allows users to choose which columns in a dataset they wish to use. If an object is bound to the Column Selector it will update itself whenever a user checks or unchecks a column. This allows users to dynamically show or hide Table columns, "pens" on a graph, data in a Report Viewer, or any other component set up to use a dataset.


Column Selector

  1. Drag a Power Table component on to your window and change the Name of the Power Table to "Data In Table".
  2. Scroll down the Property Editor and set the TestData property to True. This will populate the Data property with some test data.
  3. Drag a Column Selector component on to your window. With the Column Selector selected, click the Binding icon  on the Column Selector's Data In property.
  4. Select the Property Binding Type and bind it to the Data property in the Data In Table, and click OK.

  5. Drag another Power Table component on to your window, change the Name to "Data Out Table".

  6. Bind the Data of the Data Out Table property to the Column Selector Data Out property, and click OK.

  7. Put your Designer into Preview Mode . In Preview Mode, you can can hide specific columns by unchecking the boxes in the Column Selector.
  8. Use the check boxes to select columns you want displayed or hidden. In this example, we hid the Boolean and Int columns as shown in the Data Out Table.

  9. If you want to customize the column display for all users, put the Designer back into Design mode.
  10. Right click on the Column Selector and choose Customizers > Column Selector Customizer.
  11. Click the Excluded from Selection box next to any column that you don't want displayed. The "Excluded from Selection" option determines if the user is allowed to hide the column from the client via the Column Selector. 
  12. Click OK.

  13. Now, the columns are excluded from the selection in the Customizer (Int and Boolean columns) and are not displayed in the Column Selector of the Client and prevented from being hidden by the user. 

See the Appendix for more information on the Column Selector.

PDF Viewer

The PDF Viewer allows you to take PDF files and embed them into your Ignition Client. This can allows you to view PDF documents without having to leave the Ignition Client, perfect when running a client at full screen, or to view any reports that were saved in PDF format.

File Explorer

The File Explorer component displays a file system tree structure that allows users to navigate around various folders.  It can be rooted to any folder including shared network folders, and can filter file types by their file extension like 'pdf.'  The File Explorer is typically used in conjunction with the PDF Viewer component in order to create a PDF viewing window. This is very useful for viewing documents from within a project.


File Explorer and PDF Viewer

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

  1. In Designer, drag a File Explorer component and PDF Viewer component on to a window and place them side by side.
  2. Select the PDF Viewer component and click the binding icon  next to the File Path property.
  3. Select the Property binding type, and drill down to the File Explorer Selected Path property. Click OK

  4. Next, select the File Explorer component. In the Vision Property Editor, set the Selected Path property to a folder path. You can type in a path or bind the root directory by clicking on the binding icon  for the Selected Path 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.

    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.

  5. 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.

  6. 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.

    Clicking on the Save icon in the runtime saves a copy of the report to the client computer, not the Ignition Gateway.

  • No labels