Server Connect Flow Designer…

We’ve already looked at this component and played with it but it was missing a lot of features which we need, so we built our own. But yes, the idea is quite similar :slight_smile:

Thanks for your and others’ opinions on this, these are really important to us so keep these coming.

1 Like

wowwwwwwwww !!! that’s it!!! @Teodor , @George , @patrick

1 Like

Hi @Apple ,

I have used a similar approach in FlutterFlow a lot and I am still using it. In addition, I argued that there should be a similar visual interface in an older post. Actually, this new visual interface will be good for intermediate and advanced users, contrary to what you think. Because it really reduces the chance of making mistakes in complex workflows. Yes, it is necessary to get used to this new interface, but I assure you that it provides a lot of comfort and a better perspective after you get used to it.

In addition, offering options in the form of old and new looks will make everyone even happier and remove their concerns.

2 Likes

I have to finish a piece of work today before I get to try it out… but I’ve just been working on some quite complex algorithms, so I can’t wait to play with those in the new interface.

For me, it will be all about how it can handle complexity and increase productivity…

… if I can really easily group things and expand/contract them, copy and paste between server actions, have an undo feature, move a group of server action steps to a library action, see as much detail on one screen as I could before, hover over items and see the details in a popup, not have to buy a new laptop and massive screen with a 4k rather than 2k display to sensibly use it…

… then I expect it to be a productivity boost and a benefit!

4 Likes

Good job that’s a small and easy-to-implement list, @Antony!

1 Like

A couple first takes:

  • I share the concerns expressed, but having opened it up, so far so good. Obviously needs real world experience, but up front, it looks great.

  • Having both views would obviously be great, but having to maintain 2 views I would assume is more work for the team long-term, so hopefully one wins out to save dev time for other items.

  • New validation pattern is a HUGE improvement. The current pattern is very disruptive, so big applause for this change.

  • The keystroke tabbing to actions is interesting; could the properties for the action be updated as I “tab” through actions?

  • Property inputs that expand with the panel would be a welcome upgrade

  • The zoom increments seem to small. Also would be great to zoom via Command + mouse like Figma

  • Disabled actions could perhaps be stylized more–not enough difference from an active action right now

  • Perhaps since you are deep into this new view, you’d consider adding some of these requests:

That’s probably enough for now!

Overall, I think I’m on-board.

8 Likes

Just want to add - that drag and drop is well received and long overdue :grimacing: :blush: :clap:

3 Likes

+1 in that.

Replacing the traditional view would be a mistake
My first impression is that a complex api can be difficult to read and for example, it could be very hard to post a screenshot of the new flow view on this community to receive some support, which is related (I guess) to the ux of this forum.
For example this:


I can’t even describe how messy looks this api on the new flow view.
I could eventually get used to it.
But I think it can be very stressfull to understand or compare complex steps.

In the other hand, It’s simple, clear, and for basic apis will work fine. (And it’s a plus for new users).

Saying this, I want to give an applause to the whole team as they’re working for us to have the best experience on Wappler.

Some small hints about the new Flow Designer:

  • You can still toggle groups to hide steps.

  • You can add steps be dragging from the left panel, by clicking the plus icon between the steps.

  • You can ctrl drag to copy a step.

  • You can drag the canvas around

  • Clicking on image will toggle back the old tree designer.

5 Likes

Can someone point me to how I turn on the Flow Designer? I’m in Beta 6.3 and have Experimental Features turned on but can’t see the Toggle to show the Flow Designer. Thanks.

1 Like

You need Wappler 6 beta 4 :slight_smile:

Yes, yes, yes @mebeingken

:slight_smile: :slight_smile: :slight_smile: Please oh please can we have this? :slight_smile: :slight_smile: :slight_smile:

1 Like

Ok, have had a chance to play with it for a couple hours. As I don’t know enough about how to do complex actions, this feature really doesn’t solve any issues for me. I can see some really complex actions looking pretty messy. More advanced users can comment on that. For me, it’s not a ‘wow’ but it’s not a deal breaker either.

Off Topic: I did notice the Project Settings panel is now in a tab. Took me a bit to realize it and figure out how to close the panel. I like the tab idea though.

Others have mentioned that the new flow designer will be less suitable for long server actions. At least from my point of view, one change which would make a big difference to this would be the ability to display multiline comments (within the flow section).

Comments can be entered in a textarea with multiple lines, but unfortunately, it’s necessary to click on the comment to read the text. This is a problem with the current server action editor, but more so with the new flow designer.

The red parallel lines indicate the same steps displayed using the new/old methods. The yellow lines are corresponding comments sections. I wouldn’t usually have so many separate comments (I think this is an old server action), but I would much prefer to be able to read them like this. Ideally, they would be displayed in a collapsible panel, with right-aligned text (like the input panel for example).

The facility for adding comments is much better than in the past, but it’s still very unsatisfactory and cumbersome.

4 Likes

It’s not directly related to the flow designer, but a long-standing request, included in the roadmap:
Add support for case and else if functionality
…is related to the issue/problems with space as mentioned above.

The Condition block takes up a lot of space - if we could use else if and/or switch statements, fewer conditions would be needed. (The need to have extra conditions is unsatisfactory in itself and leads to ‘code’, or flows which are more difficult to read.)

I thought it might be a good idea to mention it again now, while the flow designer is being developed. Obviously, provision for the new options will need to be planned.

image

5 Likes

Validate Data does not display the name so it is not vertically aligned with the icon.

Remove colon from database actions.

flow-designer

1 Like

I’m wondering whether something like these 8 comment lines, or say 8 Set Value lines, can be placed into a group so they appear as one box… I’d love it if you could then just hover over an icon on the box and see the details in a popup in some way… that keeps your attention in the flow and not constantly looking away to a different area of the screen.

That would explain it. LOL! Thx.

Comments appearing in a popup would be a good option too - but I would still like to have then in a collapsible panel, which would remain displayed. If I look at a server action (or any sort of code), I created a year or two ago, I typically spend more time looking at the comments than any other part of the code - and often wishing I’d added more comments.

I like the idea of that.

I tried to use it since this afternoon, but honestly it doesn’t bring any value.

It might look good on paper when you have some simple nested conditions, but in a real life api it would be just 1 or max 2 nested conditions, which is much more organised in the standard view.

But it might be a great feature anyway, others might find it easier for them.
As long as the old/standard view never gets abandoned, that would make Wappler unusable in my case.

Why not implement the drag and drop into the old view?