Our state of the art Gantt chart


Post by muhabbil »

Hi, we are using bryntum gantt in salesforce. We have a following use case and needs your input how we can make it possible:-

We are trying to save the milestones changes with throttling property using project store. We applied throttling with 5000ms timeframe. On project change event, we are getting the changes, and making a callout to save the records in salesforce.

There are few scenario where we are struggling to handle.

  1. From Project Change event, as we are making the callout to update the salesforce database. First we are the getting the changes ( using project.changes ) and making a callout to salesforce and once the callout is complete then we are accepting the changes ( using project.acceptChanges() ). But during the callout completion, if user makes any change on milestone these changes are also getting accepted once callout complete and in the next throttling cycle, we are not getting that change and we won't be able to save that change. Please suggest, How we can resolve these issues?

  2. Suppose within throttling timeframe 5000ms, we made changes in two milestones. and in salesforce database, we have some validation by which one milestone updation is get failed and one milestone is saved successfully.
    Now the challenge is, how we can accept project changes partially which are synced to backend successfully? As we want to highlight the changes which didn't get updated in salesforce database. Please suggest how we can handle this use case?

gantt.project.on({
  thisObj: this,
  change: () =>{
    let changes = {};
    if (gantt.project?.changes) {
      changes = gantt.project?.changes;
      console.log('JSON.stringify(changes)', JSON.stringify(changes).replace("$PhantomId","id"));
      let hasError = true;
      if(records && records.length){
        hasError = validateTaskRecords(records, REQUIRED_FIELD);
      }
      if (!hasError) {
        this.isShowSpinner = true;
        // apex callout
        handleBryntumAllStoreData({
          bryntumData: JSON.stringify(changes).replace(
            "$PhantomId",
            "id"
          ),
          recordId: this.recordId
        })
          .then((result) => {
            if (result !== null && result !== undefined) {
              console.log("result:", JSON.stringify(result));
            }
            //here accepting the changes
            project.acceptChanges();
            // using sync to hide the highlighted changes 
            project.sync();
            this.isShowSpinner = false;
          })
          .catch((exp) => {
            this.isShowSpinner = false;
            showToastMessage(
              "Error",
              JSON.stringify(exp.body.message),
              "error"
            );
          });
      }
    }
  },
  buffer: 5000,
  throttle: 5000
});

Post by alex.l »

Hi!

  1. You need to block screen with load mask during loading to avoid collisions. This is that we do by default when you use built-in CrudManager.
    https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#function-maskBody
    https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#function-unmaskBody
  2. You need to use https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#function-applyChangeset instead. It will apply required changes, including scenario you described and ids for new created records.

All the best,
Alex


Post Reply