a. Page Header
b. Filter Section:
c. Charts Section:
d. Data Table Section:
e. Pagination Section:
a. Add the variable named 'ProductsFootprints1' which is used for the filtering options. To order the selection list of the filters, go to Ordering and order the filtering options descendingly, as follows:
b. Add the variable named 'ProductsFootprints2' to refresh the data of the charts, when a filter option is selected. To achieve that, go to the Filter Condition and add the following formula:
IF( IS_EMPTY(pageVars.filterCondition),{type: "and", conditions: [{type: "greater", value: 0, property: ["TotalCO2eQuantity"]}]}, {type: "and", conditions: pageVars.filterCondition})
c. Add the following Page Variables, which will be used later in the configuration of the table and pagination:
a.Bind the Dropdown fields, by accessing Option List under Properties > Select Formula and add the below formulas:
CONCAT([{label:"All Products", value:""}], MAP(data.ProductFootprints1, { label:data.ProductFootprints1[index].ProductName , value: data.ProductFootprints1[index].Product }))
CONCAT([{label:"All Plants", value:""}], UNIQUE_BY_KEY(MAP(data.ProductFootprints1, { label:data.ProductFootprints1[index].PlantName , value: data.ProductFootprints1[index].Plant }), "value"))
CONCAT([{label:"All", value:""}], UNIQUE_BY_KEY(MAP(data.ProductFootprints1, { label:data.ProductFootprints1[index].CalculatedYear , value: data.ProductFootprints1[index].CalculatedYear }), "value"))
CONCAT([{label:"All", value:""}], UNIQUE_BY_KEY(MAP(data.ProductFootprints1, { label:data.ProductFootprints1[index].CalculatedMonth , value: data.ProductFootprints1[index].CalculatedMonth }), "value"))
The dropdown fields require mapping to their corresponding variables to ensure that when there is a change in the dropdown values, the selected option is stored in the designated Page Variable. This can be achieved through bounding each dropdown to it's respective Page Variable , as follows:
b. Set-up the logic of the 'Apply Filter' button:
i. Integrate a JavaScript component by:
ii. Add ' Set Page Variable' component, configure it and connect it the JS, as shown below:
iii. Add and configure another 'Set Page Variable' component for refreshing the data:
c. Configure the first Bar Chart to display the Product on the x-axis and Total Carbon Emission on the y-axis, through configuring the Chart Data under Properties:
Then, configure the second Bar Chart to display the Plant on the x-axis and Total Carbon Emission Quantity on the y-axis:
d. Bind the table by configuring the Table Resource under Properties, as follows:
Add a Filtering Conditions under Properties by adding the following formula:
IF( IS_EMPTY(pageVars.filterCondition),{type: "and", conditions: [{type: "greater", value: 0, property: ["TotalCO2eQuantity"]}]}, {type: "and", conditions: pageVars.filterCondition})
The table component is directly bound to External OData Destination and the data for the table is loaded by default at the time of first rendering. This means that when we want to apply a filter dynamically after the data is already displayed in the Table, we would have to manually refresh the data in the Table and trigger a reload. To address this, we introduce a refresh variable via the component template editor – a Boolean variable that, when its value changes, triggers a reload of the table data. Subsequently, bind this component property ‘refresh’ to the Page Variable refresh and toggle the value upon apply filter button action.”
Follow the detailed steps outlined below to refresh the table data:
i. Create a refresh property to reload the data of the table, once a filter has been applied. To do so, access the Component Editor > go to the Properties at the top right > Select 'Refresh', then go back to View mode and drag and drop a 'Receive Event' , select the 'Internal property refresh changed' from the Event Source and connect it to the 'Get Record Collection'
ii. Toggle the Enabling Sorting to False
iii. Bind the Refresh property to the Page refresh variable which was configured earlier (Step 3):
e. Configure the Pagination buttons & text field of displaying the number of the current page:
When linking the Basic Table to OData integration, in the configuration, Pagination can be enabled. If there is an increment or decrement in page numbers, an additional trigger is required for the table refresh logic. To control the availability of increment and decrement page buttons, the total number of items in the OData response must be determined. Achieving this involves an additional call to "Get Data Collection," which is connected to the OData integration, follows same filter logic and provides the total count.
To enable/disable the Previous Page button, navigate to Disabled under Properties > Select and add the following Formula:
IF(pageVars.CurrentPageNumber > 1, false , true )
To enable/disable the Next Page button, navigate to Disabled under Properties > Select and add the following Formula:
IF(pageVars.CurrentPageNumber < pageVars.TotalItemCount ,false,true)
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
28 | |
17 | |
15 | |
13 | |
11 | |
9 | |
8 | |
8 | |
8 | |
7 |