Versions Compared

Old Version 4

changes.mady.by.user Hugo

Saved on

compared with

New Version Current

changes.mady.by.user Hugo

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents


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.

Info
titlePivoting

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

a database Binder Using JDBC with support for search filters before performing aggregate and pivot.

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.

Info
titleAggregating

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:

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

Image Added

Figure 1: Raw Data


Image Added

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.

Image Added

Figure 3: Select Plugin


Image Added

Figure 4

JDBC Datalist Database Binder (Report) Properties

Configure Database SQL Query

Image Removed

Figure 1: Configure JDBC Datalist Database Binder (Report)


NameDescription
Datasource
  • Custom Datasource - setup to connect to an external database, has additional configuration.
  • Default Datasource- connect to the Joget database.

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: com.mysql.jdbc.Driver

Custom JDBC URL 

Custom JDBC URL. This field is required when Custom Datasource is selected in Datasource above.

Example: jdbc:mysql://localhost/jwdb?characterEncoding=UTF8&useSSL=false

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.

Info
titleTest the connection parameters

Click on the "Test Connection" button at the bottom of the page to quickly test out your configurations.

SQL SELECT Query *

The SQL query specific to your database type (MySQL, MSSQL, Oracle, etc.). Use question mark ? in your query to represent the primary key or foreign keyThis 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 *.

Code Block
languagesql
titleExample
linenumberstrue
SELECT
   * 
FROM
   app_fd_table 
WHERE
   id = ?budget_item ORDER BY c_year ASC, c_status ASC
Note

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:

Code Block
languagesql
SELECT `myAppName.myColumn` FROM app_fd_myTable;
Info
titleTable & Column Naming
  • For database tables created by Joget Forms, Joget adds a "c_" in front of table column names (or "t_" if your column name starts with a number) and "app_fd_" in front of database table names.
  • If you use environment hash variables to store SQL query strings, use "?noescape" to escape SQL query strings in JDBC binders to prevent the "<>" "not equal" operator from being converted, i.e. disables XSS prevention checking. Read here for more information.
This is the query to fetch all columns
  • .

E.g.: SELECT * FROM dir_user

SQL Select Query (Data) *

This SQL Select Query (Data) is the aggregated query to group and summarize the raw data from the database.E.g.: SELECT locale, active, COUNT(active) as `count` FROM #data# GROUP BY active, locale SQL SELECT Query above.

Code Block
languagesql
titleAggregated 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.

Info
titleGROUP 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

If When this option is checked, Pivot Column Name, Pivot Value Column Name, and Value to Fill Up Empty Cell will be shown.plugin will perform pivoting on the data.

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

When we choose not to pivot the data, we will need to drag individual columns one by one into the datalist.



Image Added
Figure 5: Datalist Columns

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

Image Added

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.

Image Added

Figure 7: List Builder Preview


4. Create an UI using UI Builder. You can pair this plugin 2. Pair 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.

Image Added

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.

Image Modified

Figure 29: 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.

Image Modified

Figure 310: Pivot table with EChart with "year" filter



Related Links

Demo app

The app below is a quick showcase of this plugin

View file
nameAPP_budget-1.jwa
height250