nocode-js/sequential-workflow-designer

Convert JSON to Flow

Closed this issue · 6 comments

In my scenario, I encounter a situation where I create a flow and proceed to the next page, utilizing JSON data. However, when I navigate back to the flow page, I face the need to reconstruct the flow based on the previously generated JSON. The challenge lies in efficiently converting the stored JSON back into a functional flow.

Hello @kaleem-uet! I think you should save somewhere the definition before you navigate to a next page. It could be localStorage for example.

I have stored it already in the local storage but how i can load the json to canvas (flow-diagram), starting from an empty page ?

const definition = { /* ... */ }; // < here you set your JSON
Designer.create(placeholder, definition, { /* configuration */ });

We have a lot examples how to load the definition at start:

I am using this libray with react js where the definition is:

const startDefinition: WorkflowDefinition = { type: "root", properties: { }, sequence: [] }

There is no doubt that when some one place createWrite() function "that is created already" in the sequence it will create the createWrite node when the canvas open but in my case,
the local stored json look like this:
{ "type": "root", "properties": {}, "sequence": [ { "id": "4a461004e0b7b9b164d007f784eec730", "componentType": "switch", "name": "if", "properties": {}, "branches": { "true": [], "false": [] } } ] }
and i want to make the flow from this json.

the local stored json look like this:

Yes, and this JSON should be set to the startDefinition variable.

If you use React you can implement it in this way:

const [definition, setDefinition] = useState(() => {
    const ls = localStorage['lastState'];
    return wrapDefinition(ls ? JSON.parse(ls) : { properties: {}, sequence: [] });
});

@b4rtaz
Thanks 🙏 for the speedy responses and great support – your dedication has made using NoCodeJS a breeze!