@cdmx/wappler_ag_grid 1.0.4 → 1.0.6

package/README.md

@@ -49,20 +49,22 @@ The overrides for the "Custom" theme can be applied in the ag-theme-custom.css f
 17. **Header Height**: Height of the header row in pixels. (Default: 30)
 18. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
 19. **Auto Header Height**: The column header height is automatically set based on the content of the header cells. (Default: true)
-20. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
-21. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
-22. **Suppress Movable Columns**: Disables moving columns. (Default: false)
-23. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
-24. **Animate Rows**: Enables row animation on data changes. (Default: false)
-25. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
-26. **Suppress Aggregation at Root Level**: Disables aggregation at the root level. (Default: false)
-27. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
-28. **Suppress Scroll on New Data**: Prevents scrolling to newly added data. (Default: false)
-29. **Suppress Property Names Check**: Disables checking for duplicate property names. (Default: false)
-30. **Hide ID Field**: Hides the ID Field in the Grid. (Default: false)
-31. **Row Click Events**: Enables row click events. This can be used in Dynamic events => Grid Events => Row Clicked. (Default: false)
-32. **Enable Row Selection**: Enables row selection. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
-33. **Enable Row Status Toggle**: Enables row status toggle events. This can be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked. (Default: false)
+20. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
+21. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
+22. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
+23. **Suppress Movable Columns**: Disables moving columns. (Default: false)
+24. **Enable Cell Expressions**: Enables expressions in cell values. (Default: false)
+25. **Animate Rows**: Enables row animation on data changes. (Default: false)
+26. **Suppress Aggregation Function in Header**: Hides the aggregation function in column headers. (Default: false)
+27. **Suppress Aggregation at Root Level**: Disables aggregation at the root level. (Default: false)
+28. **Suppress Clipboard Paste**: Disables pasting data from the clipboard. (Default: false)
+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)
+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
 
@@ -100,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)
@@ -114,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. 
@@ -123,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

@@ -377,6 +377,14 @@
               "defaultValue": true,
               "help": "The column header height is automatically set based on the content of the header cells."
             },
+            {
+              "name": "wrapText",
+              "attribute": "dmx-bind:wrap_text",
+              "title": "Wrap Text",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "This will cause long texts to wrap in the cells."
+            },
             {
               "name": "suppressRowClickSelection",
               "attribute": "dmx-bind:suppress_row_click_selection",
@@ -882,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

@@ -22,7 +22,9 @@ dmx.Component('ag-grid', {
     cfilters: { type: Array, default: [] },
     wrap_header_text: { type: Boolean, default: true },
     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 },
@@ -616,7 +618,7 @@ dmx.Component('ag-grid', {
         return 'text';
       }
     }
-    createCombinedValueGetter = (key, dataChanges, dataBindedChanges) => {
+    createCombinedValueGetter = (key, dataChanges, dataBindedChanges, displayDataChanges) => {
       const keyLookup = {};
     
       dataBindedChanges.forEach(change => {
@@ -635,6 +637,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));
@@ -820,7 +836,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);
 
@@ -1092,6 +1108,7 @@ dmx.Component('ag-grid', {
         resizable: options.resizable,
         wrapHeaderText: options.wrap_header_text,
         autoHeaderHeight: options.auto_header_height,
+        wrapText: options.wrap_text,
         filter: options.filter,
         sortable: options.sortable,
         floatingFilter: options.floating_filter

package/package.json

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