Our state of the art Gantt chart


Post by muhabbil »

Hi,
We are using gantt in salesforce instance, currently in bryntum gantt we have StartDate, Duration and EndDate. What if we want to add Actual and Current dates just like startDate. What we can do?


Post by alex.l »

Hi muhabbil,

Do you mean add into the model? Please check our docs here https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#subclassing-the-taskmodel-class

class MyTaskModel extends TaskModel {
  static get fields() {
      return [
          { name: 'importantDate', type: 'date' }
      ]
  }
new Gantt({
    project : {
        taskModelClass : MyTaskModel
    }
});

All the best,
Alex


Post by muhabbil »

Hey Alex,

  1. How we can import TaskModel and other models for salesforce lwc as you know that we load the bryntum library as static resource.

    class MyTaskModel extends TaskModel {
      static get fields() {
          return [
              { name: 'importantDate', type: 'date' }
          ]
      }
  2. We have 3 dates
    Planned Start and Planned End :- It's the initial plan

Current Committed Start and Current Committed End :- it's the initial plan which will be copied from Planned Dates once we freeze the planned dates and it may change based on actual end date and dependencies.

Actual Start Date and Actual End Date.

Planned Start and Planned End date will be entered initially and they will be freeze after that and we will copy those dates date to Current Committed Start and Current Committed End.

Task # 01
Planned Start: 03/02/2023. Planned End: 03/05/2023
Current Committed Start: 03/02/2023 Current Committed End: 03/05/2023
Actual Start Date: 03/02/2023 Actual End Date: ?

Task # 02
Planned Start: 03/05/2023. Planned End: 03/10/2023
Current Committed Start: 03/05/2023 Current Committed End: 03/10/2023

Once any task is started, we will enter Actual Start Date and if that task took extra 2 days to finish and it means Actual End Date will be 03/07/2023. Based on that, if there is any dependency i.e. Finish to start, we want to update the commitment start date based on when the last task was added and result should be following for task # 02:-

Task # 02
Planned Start: 03/05/2023. Planned End: 03/10/2023
Current Committed Start: 03/07/2023. Current Committed End: 03/12/2023

Bryntum does the auto calculations for default start date and end date but we are thinking to map actual dates to bryntum default dates and use baselines for Planned and Current Committed dates.

Kindly share your thoughts on it how we can achieve the similar behavior for base line dates or we need to revise the strategy.


Post by Maxim Gorkovsky »

How we can import TaskModel and other models for salesforce lwc as you know that we load the bryntum library as static resource.

When you import static resource you get global bryntum object. Meaning you should be able to extend classes like:

class MyTaskModel extends bryntum.gantt.TaskModel {}

Kindly share your thoughts on it how we can achieve the similar behavior for base line dates or we need to revise the strategy.

As you correctly mentioned, we only calculate start/end dates for the task. You can add as many other fields as you want and fill them by any rules you need. If you listen to https://bryntum.com/products/gantt/docs/api/Gantt/data/TaskStore#event-update event on the task store and copy start/end date values to required fields.

Using baselines is not necessary in this case. Unless you want to show planned/current dates on a schedule using a baseline bar. You can also use indicators feature to point more dates on the scheduling view: https://bryntum.com/products/gantt/docs/api/Gantt/feature/Indicators

Does this answer your question?


Post by muhabbil »

  1. Where we will be defining this class as if create .js file with this code and add it in to our lwc which has bryntum static resource. As you know that bryntum gets loaded after the renderedcallback method but if we have imported this class before i dont think, its going to work.
class MyTaskModel extends bryntum.gantt.TaskModel {}
  1. For example, if we have 2 baselines for planned and current committed dates, can we show different color for each baseline? if yes, for where we can control it.

Post by alex.l »

  1. yes you will need to load js files with your classes after bryntum sources loaded, using same mechanics as for bryntum sources.
    export default class Scheduler_component extends LightningElement {
        renderedCallback() {
            if (this.bryntumInitialized) {
                return;
            }
            this.bryntumInitialized = true;
    
    Promise.all([
        loadScript(this, SCHEDULER + "/scheduler.lwc.module.js"),
        loadStyle(this, SCHEDULER + "/scheduler.stockholm.css")
    ])
        .then(() => {
            Promise.all([
                loadScript(this, SCHEDULER + "/CustomModelClass.js"),
                // ....
            ]).then(() => this.createScheduler());
        })
    
    1. Please see baseline model docs
      https://bryntum.com/products/gantt/docs/api/Gantt/model/Baseline#field-cls
      https://bryntum.com/products/gantt/docs/api/Gantt/model/Baseline#field-style

All the best,
Alex


Post by muhabbil »

Hey Alex and Maxim,
We have a use case w.r.t posted question. We are using bryntum start date, end date and duration fields which we are using. if start date changes in predecessor milestone, it automatically push the dependent milestones considering Finish to start or other dependencies. This logic is fine w.r.t frond end if changes are being done on UI.

We have cron job which update the milestones start, end, duration(mapped to bryntum default dates fields) as the milestones dates comes from 3rd party applications and we want to update them in salesforce milestones table. Do we have any algorithim to handle auto scheduling which we can use in our backend to have the similar logic which bryntum is applying so that updating milestones logic is same as of bryntum UI or you can suggest any alternate route?


Post by Maxim Gorkovsky »

Hello.
You can use ProjectModel in NodeJS app which runs on the backend. There is a short guide here: https://bryntum.com/products/gantt/docs/guide/Gantt/integration/nodejs

Project model has same API there, although you cannot use transport config because it relies on fetch API and expects browser env.


Post by muhabbil »

Maxim, our backend environment is salesforce apex.

Secondly, in provided link there is not enough information how we can run the scheduling logic if start date or end date changes from backend?

As for our use case, we have 10+ milestones and their start & end dates comes from another system and we want to handle the same logic which bryntum is applying if start or end date is changed from bryntum ui. If any user makes dates changes from bryntum gantt ui, it handles the dates changes considering successors for us automatically but we need the same thing implemented if any dates are not changed through bryntum ui, it should update every milestone just bryntum does in background,

May be if we can get any algo information which we can utilize considering all the scenarios which bryntum handle it.


Post by Maxim Gorkovsky »

If you're asking for a salesforce specific solution, I'm afraid we have none. There are only two ways to run our scheduling logic: on the browser page and in the nodejs process. If you want to run it is apex, I suppose you'd have to duplicate the logic somehow.

Secondly, in provided link there is not enough information how we can run the scheduling logic if start date or end date changes from backend?

Indeed the guide is shorter than it could've been and we have a ticket to improve it. However, in the docs overall there is enough information already. Project in NodeJS is no different from the project in browser. You can build backend project using API like applyProjectChanges, changes and commitAsync. Smth like:

const myNodeProject = new ProjectModel(...)

myNodeProject.taskStore.getById(1).duration = 10;

await myNodeProject.commitAsync();

const changes = myNodeProject.changes;

// implement this method to actually send changes to client
setChangesToClient(changes)

There is also applyProjectChanges method which allows things like:

await project1.applyProjectChanges(project2.changes)

For changes object structure see: https://bryntum.com/products/gantt/docs/api/Scheduler/model/ProjectModel#property-changes

May be if we can get any algo information which we can utilize considering all the scenarios which bryntum handle it.

It took us significant amount of time to implement scheduling logic, even though we have had plenty of experience. Also, for calendars we rely on later.js. I'm afraid it is impossible to explain algorithm in a forum post. You can find scheduling engine implementation in the Engine folder in the distributable. Unfotrunately, I'm not aware of any online sources which have detailed explanation of the project scheduling logic. Try searching online or reading through MS Project docs - they certainly do explain some concepts.


Post Reply