@cdmx/wappler_ag_grid 1.0.5 → 1.0.7

package/README.md

@@ -61,9 +61,10 @@ The overrides for the "Custom" theme can be applied in the ag-theme-custom.css f
 29. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
 30. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
 31. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
-32. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-33. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-34. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+33. **Numeric Column Align**: Align numeric columns to the right. (Default: false)
+34. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
+35. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+36. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
 
 # Data Type Overrides
 
@@ -101,7 +102,7 @@ This grid allows you to configure custom tooltips for specific fields. The grid
 # Advanced Data Manipulation
 
 The Advanced Data Manipulation feature allows you to add custom values to the field data based on specific conditions.
-This grid allows you to define custom data changes for specific fields. The grid has the following columns:
+This grid allows you to define custom data changes for specific fields. The grid has the following settings:
 
 1. **Field**: The field name for which you want to apply the custom data changes. (field name)
 2. **Data**: The new data source or value to be used for the field. (Eg. SC data source array or JSON Data source)
@@ -115,7 +116,7 @@ This grid allows you to define custom data changes for specific fields. The grid
 # Data Manipulation
 
 The Data Manipulation feature allows you to add custom values to the field data based on specific conditions.
-This grid allows you to define custom data changes for specific fields. The grid has the following columns:
+This grid allows you to define custom data changes for specific fields. The grid has the following settings:
 
 1. **Field**: The field name for which you want to apply the custom data changes. 
 2. **Value**: The value to be replaced in the field data. 
@@ -124,7 +125,17 @@ This grid allows you to define custom data changes for specific fields. The grid
 
 **Amount Fields** (Type: textbox, Default: null)
 - Define the fields where the comma-separation and float parsing need to be applied.
-  
+
+---
+
+# Display Data Manipulation
+
+The Display Data Manipulation feature allows you to add custom text, Combine fields data.
+The grid has the following settings:
+
+1. **Field**: The field name for which you want to apply the custom data changes. 
+2. **Data**: The value to be replaced in the field data ex: %first_name% %last_name%. 
+
 ---
 # Custom Headers
 

package/app_connect/components.hjson

@@ -890,6 +890,59 @@
             }
           ]
         },
+        {
+          "group": "📒 Display Data Manipulation",
+          "variables": [
+            {
+              "name": "display_data_changes",
+              "title": "Configure Fields",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "display_data_changes",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "displayDataChanges",
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Add custom values for Display, Combine columns and add custom text for display."
+              "children": [
+                {
+                  "name": "displayDataChanges",
+                  "attribute": "dmx-bind:display_data_changes",
+                  "title": "Fields Data",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "data",
+                      caption: "Data",
+                      editable: {
+                        type: "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "data": ""
+                  }
+                }
+              ]
+            }
+          ]
+        },
         {
           "group": "📒 Custom Headers",
           "variables": [

package/dmx-ag-grid.js

@@ -24,6 +24,7 @@ dmx.Component('ag-grid', {
     auto_header_height: { type: Boolean, default: true },
     wrap_text: { type: Boolean, default: false },
     data_changes: { type: Array, default: [] },
+    display_data_changes: { type: Array, default: [] },
     data: { type: Array, default: [] },
     dom_layout: { type: String, default: 'autoHeight' },
     enable_cell_text_selection: { type: Boolean, default: true },
@@ -337,6 +338,7 @@ dmx.Component('ag-grid', {
     let groupedColumnDefs = [];
     let exportToCSV = this.props.export_to_csv;
     let gridInstance = null; 
+    let cellRenderer;
     this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
@@ -617,7 +619,7 @@ dmx.Component('ag-grid', {
         return 'text';
       }
     }
-    createCombinedValueGetter = (key, dataChanges, dataBindedChanges) => {
+    createCombinedValueGetter = (key, dataChanges, dataBindedChanges, displayDataChanges) => {
       const keyLookup = {};
     
       dataBindedChanges.forEach(change => {
@@ -636,6 +638,20 @@ dmx.Component('ag-grid', {
     
       return function (params) {
         const value = params.data[key];
+
+        if ((displayDataChanges.length > 0) && displayDataChanges.some(change => change.field === params.colDef.field)) {
+          const placeholderMap = Object.fromEntries(
+            Object.entries(params.data).map(([field, fieldValue]) => [`%${field}%`, fieldValue])
+          );
+          return displayDataChanges.reduce((cellData, change) => {
+            if (change.field === params.colDef.field) {
+              const placeholders = Object.keys(placeholderMap).join('|');
+              const regex = new RegExp(placeholders, 'g');
+              cellData = change.data.replace(regex, match => placeholderMap[match]);
+            }
+            return cellData;
+          }, value);
+        }
     
         // Check if there's a matching change in dataChanges
         const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
@@ -821,7 +837,7 @@ dmx.Component('ag-grid', {
           }
         }
         else {
-          valueGetter = createCombinedValueGetter(key, options.data_changes, options.data_binded_changes);
+          valueGetter = createCombinedValueGetter(key, options.data_changes, options.data_binded_changes, options.display_data_changes);
           filterValueGetter = createCombinedFilterValueGetter(key, options.data_changes, options.data_binded_changes);
           tooltipValueGetter = createCombinedTooltipValueGetter(key, options.data_changes, options.data_binded_changes);
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "1.0.5",
+    "version": "1.0.7",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",