@cdmx/wappler_ag_grid 1.2.0 → 1.2.1

package/README.md

@@ -135,9 +135,26 @@ This grid allows you to define custom data changes for specific fields. The grid
 The Display Data Manipulation feature allows you to add custom text, Combine fields data.
 The grid has the following settings:
 
+**Using Field Data**
+
 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%. 
 
+**Using JS Function**
+
+1. **Field**: The field name for which you want to apply the custom data changes. 
+2. **Function**: Create a JavaScript function that defines the custom rendering logic. In your HTML or script section, define the JS function. 
+ex: jsChanges. 
+
+<script>
+  function jsChanges(data) {
+    const html = `
+      <div style="color: red; line-height: 2;">${data.code}</div>
+      <div style="color: green; line-height: 2;">This is a new line in green.</div>`;
+    return html;
+  }
+</script>
+
 ---
 # Custom Headers
 

package/app_connect/components.hjson

@@ -904,6 +904,7 @@
               "display": "fieldset",
               "show": [
                 "displayDataChanges",
+                "jsDataChanges"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -912,7 +913,7 @@
                 {
                   "name": "displayDataChanges",
                   "attribute": "dmx-bind:display_data_changes",
-                  "title": "Fields Data",
+                  "title": "Using Field Data",
                   "type": "grid",
                   "dataBindings": true,
                   "jsonFormat": true,
@@ -939,6 +940,37 @@
                     "field": "",
                     "data": ""
                   }
+                },
+                {
+                  "name": "jsDataChanges",
+                  "attribute": "dmx-bind:js_data_changes",
+                  "title": "Using JS Function",
+                  "type": "grid",
+                  "dataBindings": true,
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      field: "function",
+                      caption: "Function",
+                      editable: {
+                        type: "text"
+                      }
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "function": ""
+                  }
                 }
               ]
             }

package/dmx-ag-grid.js

@@ -25,6 +25,7 @@ dmx.Component('ag-grid', {
     wrap_text: { type: Boolean, default: false },
     data_changes: { type: Array, default: [] },
     display_data_changes: { type: Array, default: [] },
+    js_data_changes: { type: Array, default: [] },
     data: { type: Array, default: [] },
     dom_layout: { type: String, default: 'autoHeight' },
     enable_cell_text_selection: { type: Boolean, default: true },
@@ -728,7 +729,7 @@ dmx.Component('ag-grid', {
             return cellData;
           }, value);
         }
-    
+
         // Check if there's a matching change in dataChanges
         const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
         if (matchingChange && matchingChange.area === 'cell' ) {
@@ -953,6 +954,27 @@ dmx.Component('ag-grid', {
         else {
           headerName = humanize(key);
         }
+        
+        if (options.js_data_changes.length > 0 && Array.isArray(options.js_data_changes)) {
+            // Check if there's a matching change in jsDataChanges
+            const matchingJsChange = options.js_data_changes.find(change => change.field === key);
+            if (matchingJsChange) {
+              cellRenderer = function (params) {
+              if (typeof window[matchingJsChange.function] === 'function') {
+                  const cellValue = window[matchingJsChange.function](params.data); 
+                  return cellValue;
+                }
+            }
+          }
+          else {
+            cellRenderer = undefined;
+            colId = undefined;
+          }
+        }
+        else {
+          cellRenderer = undefined;
+          colId = undefined;
+        }
         if (key =='status' && options.row_status_event) {
           cellRenderer = 'checkboxCellRenderer';
           colId = 'statusColumn';
@@ -965,10 +987,8 @@ dmx.Component('ag-grid', {
             filter = null;
           }
         }
-        else {
-          cellRenderer = undefined;
-          colId = undefined;
-        }
+        
+        
         if (options.hide_sort) {
           const hideSortArray = options.hide_sort.split(',');
           if (hideSortArray.includes(key)) {

package/package.json

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