QueryViewer is a user control that must be included in a web panel or panel for mobile applications, in order to allow viewing the data obtained as a result of executing a Query object or a Data Provider object. The possible viewing options are:
- Table: is a static table, with fixed rows and columns.
- Pivot Table: is a table that allows swapping columns of place and grouping information.
- Chart: several kinds of charts can be selected like Timeline chart, Circular Charts, Polar Charts and more.
- Card: is a static representation of the query value which can show the trending of it.
Important note: the support for mobile applications is available since GeneXus 17
- Compatible with all browsers, including smartphones
- Allows exporting data to PDF, HTML, XML, and XLSX formats (only valid for Table and Pivot Table options).
- Intuitive handling of Pivot Tables by using drag & drop
- Programmatically configurable as well
Note: attributes can be hidden in the Table and Pivot Table just by right-clicking upon the right corner of the attribute. In the Pivot Table case, remember that if all the Data attributes are hidden, the Quantity field will appear without having the possibility to hide it.
The following steps show how to work with this control for a web application, for mobile applications works in the same way.
1) Drag the QueryViewer control from the Toolbox onto the Web form.
2) Set in the QueryViewer Object property which Query object or Data Provider object will generate the displayed data.
3) Set the Type property, below the Output group. This allows the developer to select one of the four ways in which the output can be displayed:
In the case of selecting the Chart option, the developer can choose a specific type of chart by setting the Chart Type property:
Let's suppose the developer sets the following QueryViewer properties:
- Type = Chart
- Chart Type = Stacked column 3D
This is enough for executing the object that contents the QueryViewer control to see the result at runtime.
In addition to that, the developer may set another QueryViewer properties. For example, the following properties related to a column chart:
- XAxis Title = Country
- YAxis Title = Attractions
As a result, the following query is displayed in runtime:
Note: Upon the first time that a QueryViewer control is dragged to a web form in a Knowledge Base, GeneXus will include the QueryViewer folder containing the Structured Data Type necessary for using the control, as well as a set of new GeneXus Domains. Also, a set of variables is automatically created in the object Variables section, and a sample source is added in the Object Events section. Such code is intended to guide the developer in using and setting the control at runtime.
Let’s now see a series of scenarios we could find when using the QueryViewer control.
- Dynamic filter to obtain new views of a query
New views of a single query are possible by changing the value shown of one participant in the query (Query Element). This is done by passing parameters between the QueryViewer control and the query.
- Customizing a QueryViewer control at runtime
Through the associated variable in the Axes property, it is possible to change programmatically some of the properties that have effects on the control’s view.
- Changing queries at runtime
It is possible to change the query associated with the control by replacing it with a different one, by altering the control’s Object property, as in the following example:
Attractions.Object = AttractionsByCountry(<Parameter1>, <Parameter2>, ...)
In this example, Attractions is the QueryViewer control’s name, Object is the control’s property that stores the name of the Query object that performs the query, and AttractionsByCountry is the name of that Query object. The same applies if the associated object is a Data Provider object.
- Changing aggregation by code
If a Data Provider object is associated with the Quer Viewer, aggregation can be changed by code using the QueryViewerAxes.Axis Aggregation field.
The default aggregation is Sum.
Please refer to QueryViewer control properties.
||Allows programming actions when an action drag and drop is found.
||Allows programming actions when the user expands a Query Element that contains nested data.
||Allows programming actions when the user collapses a Query Element with nested data.
||It is executed every time that values are removed from or added to the list of possible values for an attribute, whether it’s located in the rows, columns or pages area.
||It is executed upon clicking on a query element.
||It is executed upon double-clicking on a query element. (This event is not supported in case you are executing the control in a mobile device)
||Returns a QueryViewerAxes type object which contains the list of attributes (properties included). (More information about Elements Property)
||Returns an XML on a string variable containing all the data for the attributes loaded in the Pivot Table.
||Returns an XML on a string variable containing the data which is being visualized at the moment (the difference with the GetData() method it's seen on the Pivot Table, data can be different because of filters application).
||Makes a list of attributes (properties included). This method doesn't return an object as a result but generates a QueryViewerAxes type variable that can be captured later by a TrackContext event.
||Load all the data referenced by the attributes loaded in the Pivot Table. This method doesn't return an object as a result but generates a variable that can be captured later by a TrackContext event.
||Load the data which is being visualized at the moment with filters application (can be different from the data loaded by the method NotifyData()). This method doesn't return an object as a result but generates a variable that can be captured later by a TrackContext event.
As an example of usage, let´s see how to save/restore metadata to/from the Database. To do so, we define the following events at the Web Panel where the QueryViewer is embedded:
Saving the metadata:
Restoring the metadata:
&Axes = RestoreMetadata()
- The procedures SaveMetadata and RestoretMetadata have to be implemented.
- &Metadata variable has to be defined based on QueryViewerAxes SDT
- Remember Layout property of the QueryViewer control has to be the value False.
QueryViewer control compatibility