[REACT] Mapping data fields

[wzantout]

Hello,

How can I map project fields to custom fields? My backend API returns fields in snake_case format, but the library by default expects camelCase. I tried extending the ProjectModel class as follows, but it doesn't seem to be working:

import { ProjectModel } from "@bryntum/gantt";

export default class MyProjectModel extends ProjectModel {
  static get fields() {
    return [
      {
        name: "startDate",
        dataSource: "start_date",
      },
    ];
  }
}

Thanks in advance!

[wzantout]

Additionally, can I do the same for load/sync payloads?

[alex.l]

Hi,

That should be working as you showed, but I tested it and found it's not working. I've opened a ticket https://github.com/bryntum/support/issues/9796
You can subscribe on ticket updates to be notified when it's done.

load/sync should simply pick up correct field mapping after setting it in ProjectModel.

Sorry for inconveniences!

[wzantout]

Thanks, Alex! This is a blocker for us. Could you please provide us with an ETA?

[marcio]

Hey wzantout,

As it was recently created, we'll need some debugging from our dev team to be able to provide an ETA, please watch the ticket to check when a milestone is set to it, and then you'll have an estimation of when the fix will be available.

[alex.l]

Hi could you please share version on Bryntum lib you used? I just re-tested it in lastest release and it worked there.
You can check in our advanced demo with small changes applied

in launch-sass.json

{
  "success" : true,
  "project" : {
    "calendar"     : "general",
    "start_date"    : "2019-01-18", <<<<<<<

In app.js

import ProjectModel from '../../lib/Gantt/model/ProjectModel.js';

class MyProjectModel extends ProjectModel {
    static idField = 'Id';

static get fields() {
    return [
        { name : 'name', dataSource : 'Name' },
        { name : 'startDate', dataSource : 'start_date' }
    ];
}
}

const pm = new MyProjectModel({
    // Let the Project know we want to use our own Task model with custom fields / methods
    taskModelClass : Task,
    transport      : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    },
    autoLoad  : true,
    taskStore : {
        wbsMode : 'auto'
    },
    // The State TrackingManager which the UndoRedo widget in the toolbar uses
    stm : {
        autoRecord : true
    },
    // Reset Undo / Redo after each load
    resetUndoRedoQueuesAfterLoad : true
});

const gantt = new Gantt({
    appendTo : 'container',
    

project : pm,

[wzantout]

Hi Alex, the above worked for me, thanks!