[REACT] How to add SwimLanes dynamically

[jasonlunsford]

Dear Support,

We would like to give users the ability to dynamically switch swimlanes. The idea being they could reorganize the board based on the swimlane they select.

I know getting to the swimlane model can be done like this:

boardRef.current.instance.swimlanes

However, what method should I use to ADD or REMOVE swimlanes dynamically? I looked through the documentation for SwimlaneModel but did not see anything that would do the job.

Thank you!

[mats]

The swimlanes property is a Store. https://bryntum.com/products/taskboard/docs/api/TaskBoard/view/mixin/TaskBoardSwimlanes#property-swimlanes

So all the regular add / remove APIs are available: https://bryntum.com/products/taskboard/docs/api/Core/data/Store#function-add

[jasonlunsford]

Hi Mats,

Okay that's very helpful - and makes more sense. Here's my follow up question.

To set up a swimlane here's what I'm doing in the configuration object for TaskBoard:

  swimlaneField: 'lookupActionType',
  swimlanes: [
    { id: 'Internal Deliverable', text: 'Internal Deliverable' },
    { id: 'Client Deliverable', text: 'Client Deliverable' },
    { id: 'Event', text: 'Event' },
  ],

However, what I REALLY want to do is to pass this configuration information to the Kanban board dynamically. So, for example, when the user selects a new field in a drop down menu we will change that swimlandField and the associated swimlanes. Ideally we'd start the board with NO swimlanes, then the user would select their swimlane and we'd rearrange the board to show them.

So here are my questions:

How do I set/reset the swimlaneField?
How do I set/reset the swimlanes ASSOCIATED WITH that swimlaneField?

Thank you!

[jasonlunsford]

Follow up:

I was able to get us part way there.

However, I cannot get the card DATA to appear, just the swim lanes. Also, I can't get the swimlanes to disappear once I add them.

Here's our code:

  const onGroupByChange = (payload) => {
    setGroupByItem(payload);

switch (payload) {
  case 'none':
    //boardRef.current.instance.swimlaneField = null;
    //boardRef.current.instance.swimlanes = [];            <-- does not work, swimlanes still exist
    break;

  case 'lookupActionType':
    boardRef.current.instance.swimlaneField = 'lookupActionType';  <-- works
    boardRef.current.instance.swimlanes = [                                           <-- works, but no data
      { id: 'Internal Deliverable', text: 'Internal Deliverable' },
      { id: 'Client Deliverable', text: 'Client Deliverable' },
      { id: 'Event', text: 'Event' },
    ];
    break;

  default:
    break;
}
  }

[marcio]

Hey Jason,

For managing the swimlanes, as Mats already mentioned, is a Store, which means that all available methods are possible, so for resetting you could use https://bryntum.com/products/taskboard/docs/api/Core/data/Store#function-removeAll and the add function already mentioned here.

As the swimlaneField is a property https://bryntum.com/products/taskboard/docs/api/TaskBoard/view/mixin/TaskBoardSwimlanes#property-swimlaneField
You can change at runtime like this

taskBoard.swimlaneField = 'category';

[marcio]

So,

You need to do like this

boardRef.current.instance.swimlanes.removeAll();
boardRef.current.instance.swimlanes.add([                                         

      { id: 'Internal Deliverable', text: 'Internal Deliverable' },
      { id: 'Client Deliverable', text: 'Client Deliverable' },
      { id: 'Event', text: 'Event' },
    ]);

[jasonlunsford]

Perfect!! This works exactly as expected. Thanks Marcio!