Introduction
The Report Search Datalist Binder Plugin is a Datalist Binder that enables data aggregation and data pivoting on a raw data using SQL queries. This plugin is best paired with EChart Userview Menu Plugin.
Lets understand little bit about data aggregation and data pivoting.
Pivoting
Pivoting refers to the process of transforming rows into columns or, more generally, reorganizing data from a long format to a wide format. It is typically used when you have data that needs to be presented in a different structure. For example, if you have a table with dates, categories, and values, and you want to turn the categories into columns, you would pivot the data.
Please refer to https://learn.microsoft.com/en-us/sql/t-sql/queries/from-using-pivot-and-unpivot?view=sql-server-ver16 to read more on pivoting.
Aggregating
Aggregating involves performing a calculation on a set of values to return a single summary value. Common aggregate functions in MySQL include SUM, COUNT, AVG, MAX, and MIN. Aggregates are used to summarize or extract information from a dataset, such as finding the total, average, or maximum value in a column. Aggregates are typically used in conjunction with the GROUP BY clause to perform calculations on groups of rows based on a common attribute.
Please refer to https://www.simplilearn.com/tutorials/sql-tutorial/sql-aggregate-functions to read more on the aggregation.
Plugin Info
Plugin Available in the Bundle:
JDBC Datalist Database Binder (Report)
This plugin bundle is compatible with Joget DX 8.
Expected Outcome
To perform aggregative and pivoting on raw data and proceed aggregated data in datalist.
Figure 1: Raw Data
Figure 2: Aggregated / Pivot Data
Getting Started
Plugin Setup
1. Obtain the Plugin
Get the plugin jar file from Joget Marketplace.
2. Upload the Plugin
Upload the plugin jar file in Joget by going to Settings → Manage Plugins → Upload Plugin
3. Plugin Configuration
Once the plugin in uploaded, create a datalist and go to Data and select JDBC Datalist Database Binder (Report) and press Next.
Figure 3: Select Plugin
Figure 4: Configure JDBC Datalist Database Binder (Report)
| Name | Description |
|---|---|
| Datasource |
By selecting Default Datasource, the database your Joget is currently using will be selected. |
| Custom JDBC Driver | Custom JDBC Driver. This field is required when Custom Datasource is selected in Datasource above. Example: |
Custom JDBC URL | Custom JDBC URL. This field is required when Custom Datasource is selected in Datasource above. Example: |
Custom JDBC Username | Custom JDBC Username. This field is required when Custom Datasource is selected in Datasource above. |
Custom JDBC Password | Custom JDBC Password. This field is required when Custom Datasource is selected in Datasource above. Test the connection parameters Click on the "Test Connection" button at the bottom of the page to quickly test out your configurations. |
| SQL SELECT Query * | This SQL SELECT Query is meant to select/query the raw data. Aggregation and Pivot will be applied to this raw data. You can also specify the columns name instead of *. Example SELECT * FROM app_fd_budget_item ORDER BY c_year ASC, c_status ASC If a column name contains reserved keywords, do ensure it is encapsulated properly. For example for MySQL, if the column identifier itself contains a dot symbol ( . ), it should be encapsulated like this: SELECT `myAppName.myColumn` FROM app_fd_myTable; Table & Column Naming
|
| SQL Select Query (Data) * | This SQL Select Query (Data) is the aggregated query to group and summarize the raw data from the SQL SELECT Query above. Aggregated Query SELECT c_name as `name`, c_year, c_status, sum(c_amount) as `amount` FROM #data# GROUP BY c_year, c_status, c_name Take note here that #data# place holder is used to inject the SQL SELECT Query which queries the raw data. Here we are selecting c_category as name, c_year, c_type, sum(c_amount) columns. We are using aggregate function SUM(). GROUP BY is used to group the to group the rows with the same values in columns specified in SELECT statement. GROUP BY GROUP BY is used to group rows that have the same values in specified columns into summary rows. It is typically used in combination with aggregate functions like SUM, COUNT, AVG, MAX, or MIN to perform calculations on the grouped data. |
| Primary Key * | Primary key to uniquely identify each row of the table. In here we are using name (c_name) as primary key as GROUP BY will be applied to c_name column. |
| Pivot Data | When this option is checked, plugin will perform pivoting on the data. Pivot Data Please take note that when Pivot Data option is checked, it is not possible to determine the column name and plugin will generate the column name dynamically as part of its functionality. Plugin will generate a column name in the datalist under columns/filter section based on the column the aggregation is performed on. In this example, it is c_name as `name`. Drag this column in the datalist and it will generate the others columns dynamically as shown in Figure 5. We only need to use this column to generate others columns dynamically.
|
| Pivot Column Name * | Refers to selecting the field or column in your dataset that you want to use as a basis for creating columns or headers in the pivot table. Multiple columns supported. Separate multiple columns using semicolon. (e.g. year;customer) |
| Pivot Value Column Name * | Refers to the field or column in your dataset that contains the data you want to summarize or aggregate in your pivot table. Multiple columns supported. Separate multiple columns using semicolon. (e.g. outstanding;paid) |
| Value to Fill Up Empty Cell | The value to fill up if there is an empty cell. E.g. 0.00 |
Plugin Usage
1. Create a datalist and attach this plugin as source of data at "Select Data Store".
Figure 6: List Builder Select Data Store
2. Fill in the plugin configurations as shown in Figure 4.
3. If everything is filled appropriately, you can preview the pivot table.
Figure 7: List Builder Preview
4. Create an UI using UI Builder. You can pair this plugin with EChart Userview Menu Plugin to dynamically change the chart value and shape based on the datalist value. "Show Filters" must be enabled so that you can dynamically change the chart display parameters. Under "Data Mappings", attach the List created previously.
Figure 8: UI Builder
5. Save and return to the front end UI. We can see the List attached with the EChart. Below shows that filter is not used.
Figure 9: Pivot table with EChart without filter
6. 2021 is entered at "year" filter. You can see that the datalist dynamically changed based on the filter. The EChart's value was also updated based on the modified datalist.
Figure 10: Pivot table with EChart with "year" filter
Related Links
Demo app
The app below is a quick showcase of this plugin
