Renaming Grid Column Title

Kinetic ERP
1

Is it possible to rename grid column header programmatically, preferably with variables? I have a need to rename the resulting BAQ grid column names dynamically with dates like “MMMdd”. In the classic dashboard, a simple 2 line customization was used to do this.

image

1 Like
2

I highly doubt it.
The only thing I can think of is if it allows the {Dataview.Column} notation.
If so, you may be able to set that column dynamically in an event.

Happy Adam Scott GIF by Sky

3

I check in few event widgets like event-column, event-view, dataview-xxx but didn’t see any way.
Oh well, back to the drawing board. I’ll probably have to resort to creating an event to call function to call a sp to return a ready-to-use table. Can you think of other ways?

4

I’ve been attempting the same with no luck. Did you get anywhere?

5

haven’t tried, but…

nevermind this idea as prop name is not dynamically evaluated

wonder whether set-property would eval an expression like

gridModel.columns[gridModel.columns.findIndex(c => c.field === "JobNum")].title = "JOB NUM";

with the property-set component:

  • Enter the grid component id
  • Property:

gridModel.columns[gridModel.columns.findIndex(c => c.field === “JobNum”)].title

  • Value:

“JOB NUM”

where “JobNum” is the BAQ field name and “JOB NUM” is the new column header display name.

:man_shrugging:

However, you may be able to overwrite the entire columns array like:

with the property-set component:

  • Enter the grid component id
  • Property:

gridModel.columns

Value:

"#_ (function(cols) { var idx = cols.findIndex(c => c.field === 'JobNum'); if(idx !== -1){ var copy = cols.slice(); copy[idx] = Object.assign({}, copy[idx], { title: 'JOB NUM' }); return copy; } return cols; })(gridModel.columns) _#"
  • surrounding with “#_ _#” makes the expression eval as javascript
  • the function replaces the columns array with a copy of itself except for substituting the title of the JobNum field. looks like this well formed:
(function(cols) {
    // Find the index of the column where the 'field' property is 'JobNum'
    var idx = cols.findIndex(c => c.field === 'JobNum');
    if (idx !== -1) {
        // Create a shallow copy of the columns array to avoid mutating the original
        var copy = cols.slice();
        // Create a shallow copy of the found column and update its 'title' property
        copy[idx] = Object.assign({}, copy[idx], { title: 'JOB NUM' });
        // Return the modified columns array with the updated title
        return copy;
    }
    // If no column with field 'JobNum' is found, return the original columns array unchanged
    return cols;
})(gridModel.columns)

Before:

{
  "columns": [
    {
      "field": "Company",
      "title": "Company Name"
    },
    {
      "field": "Part_PartNum",
      "title": "PartNum",
      "width": 250
    },
    {
      "field": "JobNum",
      "title": "JobNum",
      "width": 80
    },
    {
      "field": "Customer",
      "title": "Customer",
      "width": 80
    }
  ]
}

After:

{
  "columns": [
    {
      "field": "Company",
      "title": "Company Name"
    },
    {
      "field": "Part_PartNum",
      "title": "PartNum",
      "width": 250
    },
    {
      "field": "JobNum",
      "title": "JOB NUM",
      "width": 80
    },
    {
      "field": "Customer",
      "title": "Customer",
      "width": 80
    }
  ]
}

No idea if this will work, but give it a try and let us know.

6

PS - If it works, then try this:

#_ (function(cols, updates) {
    var copy = cols.slice();
    updates.forEach(function(pair) {
        var idx = copy.findIndex(function(c) { return c.field === pair.field; });
        if (idx !== -1) {
            copy[idx] = Object.assign({}, copy[idx], { title: pair.title });
        }
    });
    return copy;
})(gridModel.columns, [
    { field: "JobNum", title: "JOB NUM" },
    { field: "Part_PartNum", title: "PART NUMBER" },
    { field: "Company", title: "COMPANY NAME" }
]) _#
1 Like
7

I tried this and none of it works. Sorry for cluttering your thread.

Anyway, this function indeed executes, but gridModel.columns is not in context when it does.

You could overwrite the gridModel.columns array entirely but getting the existing columns array using expression language seems impossible.

You could also explore the SaveLayout REST method (like when users personalize)

Best of luck,
Josh

More info:

Learned a lot about the classes involved including MetaFxPropertSetEvent, MetaFxEventParamService, MetaFxComponentService, MetaFxDynamicFunctionService, and gridService. Hope to share sometime.

The crux on property-set is:

  1. Property name is static text - not evaluated, only Value is evaluated using expression syntax.
  2. components are not in scope on js eval only the following are passed: (context, transactionService, session, user)

I tried

~_myGrid.gridModel.columns_~

which triggers the component expression parser but it requires the format componentID.propertyName, is limited to top level properties only, and returns only strings (no objects, no arrays of obj). So even if it parsed, it would return [object object].

too bad they didn’t include JSON.stringify and JSON.parse in the expression parsers.

1 Like