Page 1 of 1

[REACT] Mapping data fields

Posted: Sun Aug 11, 2024 6:41 pm
by 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!


Re: [REACT] Mapping data fields

Posted: Sun Aug 11, 2024 7:28 pm
by wzantout

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


Re: [REACT] Mapping data fields

Posted: Mon Aug 12, 2024 8:11 am
by 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!


Re: [REACT] Mapping data fields

Posted: Mon Aug 12, 2024 8:40 pm
by wzantout

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


Re: [REACT] Mapping data fields

Posted: Mon Aug 12, 2024 9:31 pm
by 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.


Re: [REACT] Mapping data fields

Posted: Tue Aug 13, 2024 1:02 pm
by 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,

Re: [REACT] Mapping data fields

Posted: Thu Aug 15, 2024 12:26 pm
by wzantout

Hi Alex, the above worked for me, thanks!