@cdmx/wappler_ag_grid 1.6.1 → 1.6.3

package/README.md

@@ -35,37 +35,37 @@ To use the "Custom" theme, copy "ag-theme-custom.css" to public/css/ag-theme-cus
 6. **Floating Filter**: Specifies if the column has a floating filter. (Default: true)
 7. **Editiable Cells**: Makes cells editable. (Default: false)
 8. **Editiable Rows**: Makes row data editable. (Default: false)
-9. **CSV Export**: Specifies if Export to CSV is enabled. (Default: true)
-10. **Enable RTL**: Enabled Right to Left, used for Hebrew and Arabic. (Default: false)
-11. **Column Hover Highlight**: Specifies column hover highlighting. (Default: true)
-12. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
-13. **Pagination**: Enables pagination. (Default: true)
-14. **Auto Pagination**: Enables automatic pagination. (Default: false)
-15. **Page Limit Selectors**: Allowed selectors for for page size. Set to false to hide the page size selector. (Default: [20,50,100] ).
-16. **Page Limit**: Number of rows to show per page. (Default: 20)
-17. **Row Selection**: Row Selection (single or multiple).
+9. **Exclude Hidden Fields**: Specifies if Hidden fields are to be excluded in CSV export. (Default: false)
+10. **CSV Export**: Specifies if Export to CSV is enabled. (Default: true)
+11. **Enable RTL**: Enabled Right to Left, used for Hebrew and Arabic. (Default: false)
+12. **Column Hover Highlight**: Specifies column hover highlighting. (Default: true)
+13. **Suppress Row Deselection**: Specifies if rows can be deselected. (Default: false)
+14. **Pagination**: Enables pagination. (Default: true)
+15. **Auto Pagination**: Enables automatic pagination. (Default: false)
+16. **Page Limit Selectors**: Allowed selectors for for page size. Set to false to hide the page size selector. (Default: [20,50,100] ).
+17. **Page Limit**: Number of rows to show per page. (Default: 20)
+18. **Row Selection**: Row Selection (single or multiple).
    - "Single"
    - "Multiple" (Default)
-18. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
-19. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
-20. **Filter Field ID**: Specifies the field ID of the search field when using grid quick filter. Applicable when using Quick Filter feature of AG Grid, called from Dynamic Events on change event on the field. (Default: search_field)
-21. **Loading Overlay**: This enables loading overlay. (Default: false)
-22. **Loading Overlay Duration**: This sets loading overlay duration in ms. (Default: 500)
-23. **Sticky Header and Horizontal Scrollbar**:  Optionally specify the header offset and topbar class.
+19. **Timezone**: Timezone for Date Fields. Select the appropriate timezone from the dropdown list. (Default: Local)
+20. **Date Format**: Date Format for displaying date values. (Default: "dd/MM/yyyy hh:mm A")
+21. **Filter Field ID**: Specifies the field ID of the search field when using grid quick filter. Applicable when using Quick Filter feature of AG Grid, called from Dynamic Events on change event on the field. (Default: search_field)
+22. **Loading Overlay**: This enables loading overlay. (Default: false)
+23. **Loading Overlay Duration**: This sets loading overlay duration in ms. (Default: 500)
+24. **Sticky Header and Horizontal Scrollbar**:  Optionally specify the header offset and topbar class.
    - Fixed Header: Enables sticky header. (Default: false)
    - Header Offset: Specifies offset from the top of the viewport area (Optional). (Default: 100)
    - Topbar Class: Specify class, e.g., "topbar", to measure the offset from (Optional). (Default: "topbar")
    - Topbar Offset: Specify topbar offset (Default: 80)
    - Fixed Horizontal Scroll: Enables Hovering horizontal scrollbar which stays at the bottom all the time. (Default: false)
    - Fixed Horizontal Scroll Width: Fixed horizontal scroll width percentage. (Default: 80%)
-24. **Row Height**: Height of each row in pixels. (Default: Auto)
-25. **Header Height**: Height of the header row in pixels. (Default: Auto)
-26. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
-27. **Auto Header Height**: The header height is automatically set based on the content of the header. (Default: true)
-28. **Auto Height**: The height is automatically set based on the content of the cells. (Default: false)
-29. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
-30. **Center Align (V)**: Specifies if the cell data should be vertically centered. (Default: false)
-31. **Center Align (H)**: Specifies if the cell data should be vertically centered. (Default: false)
+25. **Row Height**: Height of each row in pixels. (Default: Auto)
+26. **Header Height**: Height of the header row in pixels. (Default: Auto)
+27. **Wrap Header Text**: This will cause long headers to wrap. (Default: true)
+28. **Auto Header Height**: The header height is automatically set based on the content of the header. (Default: true)
+29. **Auto Height**: The height is automatically set based on the content of the cells. (Default: false)
+30. **Wrap Text**: This will cause long texts to wrap in the cells. (Default: false)
+31. **Center Align (V)**: Specifies if the cell data should be vertically centered. (Default: false)
 32. **Suppress Row Click Selection**: Disables row selection on row click. (Default: false)
 33. **Suppress Menu Hide**: Prevents hiding the column menu. (Default: false)
 34. **Suppress Movable Columns**: Disables moving columns. (Default: false)
@@ -94,16 +94,40 @@ This grid allows you to define custom type overrides for specific fields in the
 
 # Style Formatting
 
+## Text and Cell Colors
+
 The Style Formatting feature allows you to configure custom colors and fonts for column data based on certain conditions.
 This grid allows you to define custom color and font settings based on specific conditions. The grid has the following columns:
 
 1. **Field**: The field name for which you want to apply the custom color and font settings. (eg. first_name or status)
-2. **Condition**: The condition to check for applying the custom color and font settings. (eg. status=false or name=K den)
+2. **Condition**: The condition to check for applying the custom color and font settings. (eg. status=false or name=K den).
+   You can also supply a function here to return true or false based on the input.
+   eg: input jsTest() in the condition field and define it as below:
+   ```javascript
+   <script>
+     function jsTest(data) {
+       return (data.status == 'success');
+     }
+   </script>
 3. **Color**: The custom color to apply when the condition is met. Enter the color in HEX format (e.g., "#FF0000") or use named colors (e.g., "red"). 
 4. **Area**: Choose where to apply the color: "text" (cell text) or "cell" (cell background).
 5. **Font**: Choose the font style: "normal," "italic," or "bold."
 ---
 
+## Configure Row Colors
+
+1. **Condition**: The condition to check for applying the custom color to rows. (eg. status=false or name=K den).
+ You can also supply a function here to return true or false based on the input. 
+ eg: input jsTest() in the condition field and define it as below:
+ ```javascript
+   <script>
+     function jsTest(data) {
+       return (data.status == 'success');
+     }
+   </script>
+</script>
+2. **Color**: The custom color to apply to row when the condition is met. Enter the color in HEX format (e.g., "#FF0000") or use named colors (e.g., "red"). 
+
 # Tooltip Settings
 
 The Tooltip Settings feature allows you to configure custom tooltips for specific fields in the data.

package/app_connect/components.hjson

@@ -176,7 +176,7 @@
               "defaultValue": true,
               "help": "Specifies if the column has a floating filter"
             },
-            {
+{
               "name": "cellEditable",
               "attribute": "dmx-bind:cell_editable",
               "title": "Editable Cells",
@@ -192,6 +192,14 @@
               "defaultValue": false,
               "help": "Makes entire row editable."
             },
+            {
+              "name": "exportExcludeHidden",
+              "attribute": "dmx-bind:export_exclude_hidden_fields",
+              "title": "Exclude Hidden Fields",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Specifies if Hidden fields are to be excluded in CSV export."
+            },
             {
               "name": "exportToCSV",
               "attribute": "dmx-bind:export_to_csv",
@@ -332,7 +340,7 @@
               "defaultValue": "dd/MM/yyyy hh:mm A",
               "help": "Date Format"
             },
-            {
+{
               "name": "quickFilterField",
               "attribute": "quick_filter_field",
               "title": "Filter Field ID",
@@ -467,7 +475,7 @@
               "defaultValue": false,
               "help": "This will cause long texts to wrap in the cells."
             },
-            {
+{
               "name": "vCenterCellData",
               "attribute": "dmx-bind:vert_center_cell_data",
               "title": "Center Align (V)",
@@ -689,7 +697,7 @@
                 {
                   "name": "listColors",
                   "attribute": "dmx-bind:cstyles",
-                  "title": "Colors",
+                  "title": "Text and Cell Colors",
                   "type": "grid",
                   "dataBindings": true,
                   "jsonFormat": true,
@@ -752,6 +760,64 @@
                   }
                 }
               ]
+            },
+            {
+              "name": "rstyles",
+              "title": "Configure Row Colors",
+              "attributeStartsWith": "dmx-bind",
+              "attribute": "rstyles",
+              "type": "boolean",
+              "defaultValue": false,
+              "display": "fieldset",
+              "show": [
+                "listRowColors"
+              ],
+              "noChangeOnHide": true,
+              "groupEnabler": true,
+              "help": "Add custom Colors function that will return true or false. Add the fucntion name in the Function column."
+              "children": [
+                {
+                  "name": "listRowColors",
+                  "attribute": "dmx-bind:rstyles",
+                  "title": "Row Colors",
+                  "type": "grid",
+                  "key": "field",
+                  "dataBindings": true,
+                  "jsonFormat": true,
+                  "encloseBT": true,
+                  "jsonBT": true,
+                  "initDisplay": "none",
+                  "columns": [
+                    {
+                      "field": "field",
+                      "caption": "Field",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "condition",
+                      "caption": "Function",
+                      "editable": {
+                        "type": "text"
+                      }
+                    },
+                    {
+                      "field": "customColor",
+                      "caption": "Color",
+                      "editable": {
+                        "type": "text"
+                      },
+                      help: "Example: '#FF0000' or 'red'"
+                    }
+                  ],
+                  "newRecord": {
+                    "field": "",
+                    "condition": "",
+                    "customColor": ""
+                  }
+                }
+              ]
             }
           ]
         },
@@ -1384,7 +1450,7 @@
                 "columnsToSum",
                 "enableFixedFooter",
                 "fixedFooterBottomPadding",
-                "columnsToCountNonUnique"
+"columnsToCountNonUnique"
               ],
               "noChangeOnHide": true,
               "groupEnabler": true,
@@ -1420,7 +1486,7 @@
                         "unique_values": ""
                       }
                 },
-                {
+{
                   "name": "columnsToCountNonUnique",
                   "attribute": "dmx-bind:columns_to_count_nonunique",
                   "title": "Count Non-Unique",
@@ -2356,7 +2422,7 @@
           state: 'opened',
           help: 'Get Selected Rows',
           properties: []
-        },
+},
         {
           addTitle: 'quickFilter',
           title: 'Quick Filter',
@@ -2820,7 +2886,7 @@
         "dmx-ag-grid": true
       }
     },
-    {
+{
       "name": "dmx-ag-grid-cell-edited",
       "attributeStartsWith": "dmx-on",
       "attribute": "cell_data_edited",

package/dmx-ag-grid.js

@@ -22,6 +22,7 @@ dmx.Component('ag-grid', {
     tooltip_config: { type: Array, default: [] },
     custom_tooltip: { type: String, default: null },
     cstyles: { type: Array, default: [] },
+    rstyles: { type: Array, default: {} },
     cnames: { type: Object, default: {} },
     cwidths: { type: Object, default: {} },
     ctypes: { type: Array, default: [] },
@@ -76,6 +77,7 @@ dmx.Component('ag-grid', {
     floating_filter: { type: Boolean, default: true },
     column_hover_highlight: { type: Boolean, default: true },
     quick_filter_field: { type: String, default: 'search_field' },
+    export_exclude_hidden_fields: { type: Boolean, default: false },
     export_to_csv: { type: Boolean, default: true },
     export_csv_filename: { type: String, default: 'export.csv' },
     fixed_header: { type: Boolean, default: false },
@@ -727,7 +729,6 @@ dmx.Component('ag-grid', {
           const options = {
             timeZone: timezone,
           };
-
           const convertedTimestamp = date.toLocaleString(options.date_locale, options);
           const [datePart, timePart] = convertedTimestamp.split(', ');
           const [day, month, year] = datePart.split('/');
@@ -754,6 +755,32 @@ dmx.Component('ag-grid', {
       
       return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
     };
+    //Custom Row Styles
+    function createRowStyleFunction(rstyles) {
+      return function(params) {
+        if (!rstyles || !Array.isArray(rstyles) || rstyles.length === 0) {
+          return; // No styles to apply
+        }
+        const rowStyle = {};
+        for (const style of rstyles) {
+          const condition = style.condition.replace(/\(\)$/, ''); // Remove () if present at the end
+          const customColor = style.customColor;
+          let conditionResult;
+          if (typeof window[condition] === 'function') {
+            const result = window[condition](params.data);
+            if (typeof result !== 'boolean') {
+              console.error('Row condition function must return a boolean value.');
+              return;
+            }
+            conditionResult = result;
+          }
+          if (conditionResult) {
+            rowStyle.background = customColor;
+          }
+        }
+        return rowStyle;
+      };
+    }
     dateFilterParams = {
         comparator: function (filterLocalDateAtMidnight, cellValue) {
           var cellDate = new Date(cellValue);
@@ -842,7 +869,6 @@ dmx.Component('ag-grid', {
         if (matchingChange && matchingChange.area === 'cell' ) {
           return matchingChange.new_value;
         }
-    
         // Check if there's a matching change in dataBindedChanges
         const matchingKeyData = keyLookup[key];
         if (matchingKeyData) {
@@ -882,14 +908,11 @@ dmx.Component('ag-grid', {
     
       return function (params) {
         const value = params.data[key];
-        
-    
         // 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 === 'tooltip' ) {
           return matchingChange.new_value;
         }
-    
         // Check if there's a matching change in dataBindedChanges
         const matchingKeyData = keyLookup[key];
         if (matchingKeyData) {
@@ -932,7 +955,6 @@ dmx.Component('ag-grid', {
     
       return function (params) {
         const value = params.data[key];
-    
         // Check if there's a matching change in dataChanges
         const matchingChange = dataChanges.find(change => change.field === key && change.value === String(value));
         if (matchingChange) {
@@ -1035,22 +1057,43 @@ dmx.Component('ag-grid', {
         function applyCellStyle(params) {
           const field = params.colDef.field.toString();
           const styles = cstyles.filter((cs) => cs.field === field);
-          const whiteSpace = options.wrap_text ? 'normal' : 'nowrap'
+          const whiteSpace = options.wrap_text ? 'normal' : 'nowrap';
         
           for (const style of styles) {
             const condition = style.condition;
             const customColor = style.customColor;
             const font = style.font || 'normal';
-            const area = style.area || 'text'; 
-            const [left, operator, right] = extractConditionParts(condition);
-            if (
-              params.data.hasOwnProperty(left) &&
-              (params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false)
-            ) {
+            const area = style.area || 'text';
+            let conditionResult = false;
+            if (condition.endsWith('()') && typeof window[condition.replace(/\(\)$/, '')] === 'function') {
+              const result = window[condition.replace(/\(\)$/, '')](params.data);
+              if (typeof result !== 'boolean') {
+                console.error('Custom condition function must return a boolean value.');
+                return;
+              }
+                conditionResult = result;
+            } else {
+              const [left, operator, right] = extractConditionParts(condition);
+              if (params.data.hasOwnProperty(left) &&
+                (params.data[left] !== null ? evaluateCondition(params.data[left], operator, right) : false)
+              ) {
+                conditionResult = true;
+              }
+            }
+            if (conditionResult) {
               if (area === 'text') {
-                return { color: customColor, fontStyle: font, fontWeight: (font==='bold'?'bold':null), whiteSpace: whiteSpace };
+                return {
+                  color: customColor,
+                  fontStyle: font,
+                  fontWeight: (font === 'bold' ? 'bold' : null),
+                  whiteSpace: whiteSpace
+                };
               } else if (area === 'cell') {
-                return { backgroundColor: customColor, fontStyle: font, whiteSpace: whiteSpace };
+                return {
+                  backgroundColor: customColor,
+                  fontStyle: font,
+                  whiteSpace: whiteSpace
+                };
               }
             }
           }
@@ -1059,7 +1102,6 @@ dmx.Component('ag-grid', {
           }
           return null;
         }
-
         if (cnames.hasOwnProperty(key)) {
         const cname = cnames[key]
         headerName = cname ? cname.custom_name : humanize(key);         
@@ -1301,6 +1343,7 @@ dmx.Component('ag-grid', {
     const gridOptions = {
       ...(idFieldPresent ? { getRowId: params => params.data.id } : {}),
       columnDefs: (groupedColumnDefs && groupedColumnDefs.length > 0) ? groupedColumnDefs : columnDefs,
+      getRowStyle: options.rstyles ? createRowStyleFunction(options.rstyles): undefined,
       localeText: localeText,
       enableRtl: options.enable_rtl,
       onRowClicked: enableRowClickEvent ? onRowClicked : undefined,
@@ -1686,25 +1729,26 @@ dmx.Component('ag-grid', {
               fieldsAndColIds.push({
                 field: column.field,
                 colId: column.colId,
+                hide: column.hide,
               });
             }
           });
           return fieldsAndColIds;
         };
-
         // Traverse columnDefs to gather fields and colIds
         fieldsAndColIds = traverseColumns(gridConfig.columnDefs);
-            
-          } else {
-            fieldsAndColIds = gridConfig.columnDefs.map((column) => ({
-              field: column.field,
-              colId: column.colId,
-            }));
-          }
-      // Filtering out fields based on excludedColumnIds
-      const fieldsToExport = fieldsAndColIds.filter(
-        (column) => !excludedColumnIds.includes(column.colId)
-      ).map((column) => column.field);
+      } else {
+        fieldsAndColIds = gridConfig.columnDefs.map((column) => ({
+          field: column.field,
+          colId: column.colId,
+          hide: column.hide,
+        }));
+      }
+      const fieldsToExport = fieldsAndColIds.filter((column) => {
+        return !excludedColumnIds.includes(column.colId) &&
+               (!options.export_exclude_hidden_fields || !column.hide);
+      }).map((column) => column.field);
+      
       const params = {
         fileName: options.export_csv_filename,
         allColumns: true,

package/package.json

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