nocode-js / sequential-workflow-designer

Customizable no-code component for building flow-based programming applications or workflow automation. 0 external dependencies.
https://nocode-js.com/
MIT License
1.08k stars 111 forks source link

Get properties in iconProvider #148

Closed brampurnot closed 5 months ago

brampurnot commented 5 months ago

Hi guys,

I was wondering if it is possible to get the properties as an attribute in the iconProvider. Our use-case is to load the steps from a backend DB since the idea is that we can add them more dynamically without modifying and redeploying the UI.

These steps that we get from an API have the name of the icon and we would like to get that icon from the step property and then just display it. At the moment only the type and componentType are exposed.

Any help would be appreciated! We are also thinking of getting the pro license since we want to build our own toolbox. Since we will have multiple steps, we would like to put them in a hierarchy where we can drill down into the steps based on their group name instead of show them all. Is that possible with the custom toolbox?

Thanks, Bram

b4rtaz commented 5 months ago

Hello @brampurnot,

the main reason why the icon provider doesn't have the access to the properties it that, if the property would change the value the designer won't notice that. So there is an assumption the icon is not changable, exactly the same as the type and the componentType is not changable.

About dynamic steps. The designer doesn't care from where you have a list of available steps (for example for the toolbox), only what is required is a complete list during creation of the designer.

const configuration = await fetchServerConfiguration(...); // << await is here

const configuration = {
   toolbox: {
      isCollapsed: true,
      groups: configuration.toolboxGroups
   },
   // ...
};

Designer.create(placeholder, definition, configuration);

So you need to introduce the loading step before you will show the designer.

If you have already loaded configuration from the backend then it's easy to use it for resolving icons:

iconUrlProvider: (_, type) => {
   return configuration.stepTypeToIconMap[type];
}
brampurnot commented 5 months ago

Thanks that makes sense. With regards to the toolbox, we implemented it already like that. what I’m looking for is to display all steps in a tree where we only show the groups first and then we can drill down to see all activities. That is not possible in the standard toolbox so I’m wondering if we could achieve that in the pro version.

Bram

b4rtaz commented 5 months ago

Yes, you can implement own toolbox that works as you described with the external toolbox feature.

brampurnot commented 5 months ago

Much appreciated!