nocode-js/sequential-workflow-designer

Detecting step editor unmount

Opened this issue · 6 comments

Hi Bart,

when using a custom step editor in the react designer, i have the problem to loose the
current changes in the form when the user accidentally clicks into the editor space
and the stepeditor component gets unmounted.

I remember you wrote somewhere that this is currently not possible in the react version,
but do you have an idea how to work around this ?

Thanks a lot

Tilo

Hello @tskomudek,

basically you can always save the latest value in the step like:

<input type="text" ... onChange={e => setProperty('x', e.value)} />

So in the definition you will have allways the latest changes.

If you have a save step between changing values and applying them, then you can create a hidden property in the step, such as deltaX.

<input type="text" ... onChange={e => setProperty('deltaX', e.value)} />

During saving changes you need to move values to a final property (deltaX => x).

@tskomudek have you resolved the problem?

Not really.
Yes, i can store the modified data somewhere, but i'd rather ask the user if he wants to navigate away from the current step without saving. Do you have any other idea how to achive this ?

Thx
Tilo

It looks like you need a canCloseEditor callback or something like this. Yeah, it's not available now.

Maybe a temporary solution would be to use the isSelectable callback 🤔, something like:

isSelectable: (step) => {
   if (hasUnsavedChanges()) return window.confirm('You have unsaved data in the editor...');
   // ...
}

When i integrated sequential-workflow-designer-angular in my existing project in place of router outlet but its not getting initialised properly...svg not taking full height and toolbox not getting initialized
963066D4-C63D-4AE6-B37E-7D8205159105_1_201_a

I followed angular demo example -initialize with angular
please let me know what could be the reason
thanks a lot!!

b4rtaz commented

@ShraddhaFutrey it looks like the parent layers have not set any height constraints. The designer doesn't stretch parents, it adjusts to available space. You can check this theory by setting CSS:

.sqd-designer {height: 900px;}

BTW: please don't add comments to not related threads.