New Design for Server Connect and App Flows Editors

Teodor · October 21, 2021, 3:31pm

Intro

Thanks to the valuable feedback about the design of Server Connect and App Flows editors, which we received here in our community, we decided to introduce a new design concept for them.
The idea of the new design is to make the steps in Server Connect and App Flows easier to maintain, navigate and edit, especially for more complex workflows.

So let’s take a look at what’s new.

NOTE: The new design is available as an Experimental Feature, so don’t forget to turn on the Experimental Features in Wappler general options if you want to check it!

Overview

Adding New Steps

Adding a new step in your new API Action (Server Action) is as easy as before. You either click the + button in the Server Connect toolbar (1) or click the new + button in the Exec (2):

Clicking any of them brings up the insert component dialog:

You can also add new steps by right clicking an existing step.
In order to select and adjust a step in the API Action, just select it and you will see it highlighted:

Its properties will appear on the right, as usual:

Complex / Nested Steps

We’ve improved the design of the nested steps. For example the Condition step - it has Then and Else Parts, which render horizontally or vertically depending on the available space. When we add the Condition step, they are empty, so they fit horizontally:

As soon as you add some steps, the layout adjusts and the two steps are stacked vertically:

And if you decide to increase the panel width, they adjust to the new size as well:

This works really well with deeply nested steps, making them more easy to work with:

Deleting a step

Deleting a step from your API Action is as easy as before, just select the step and click the X button in the toolbar or just press the Del key:

Conclusion

The same design is also available for App Flows panel!
So try it out and let us know what you think of the new design. Post complex server actions designs to show us all how awesome they look (or not)!

sid · October 21, 2021, 4:35pm

Only thing that’s great here is getting rid of the STEPS node.

Haven’t downloaded the new version, but from the screenshots the UI & UX looks really really bad.
Side-by-side then & else based on content inside & size of panel - a BIG NO.

The designs shared in the referenced post had a really clean border design, which made everything clear and readable.

The vertical THEN/ELSE/EXECUTE & the weird thick border on top and right edges look extremely disorienting.

And the PLUS icon… what a waste of space. I remember a feature request where a context menu was suggested to have more options on the step - like toggle disable, toggle output & add - instead you guys have implemented this!
If you guys absolutely want to put an icon there, a three-dot icon on hover of step with the three options on click would make for a great UX. But I would still prefer just the option on right-click which is more natural.

Plan to test this out tomorrow. Probably wont change my initial impressions.

sw11 · October 21, 2021, 4:51pm

too much and confusing

brad · October 21, 2021, 5:00pm

I'm kinda mixed on it. I don't think it's horrible. I could get used to it.

However, most of my APIs are fairly simple and this just seems to clutter what was very simple. A little bit of overkill for simple APIs. Seems it's trying to solve a problem that wasn't actually there?

But as mentioned, I don't hate it and can get used to it. I appreciate the work that went into it.

To me this is the most annoying part:

JonL · October 21, 2021, 5:25pm

Not a fan. The steps removal is a good thing as @sid said. It looks like an endless image inside of image. Same as when you point a camera to a screen

sitestreet · October 21, 2021, 5:26pm

I’ve just been actively using it for the last half-hour and I think I quite like it. But there’s definitely room for improvement. I’ve not got any really complex flows, though.

sitestreet · October 21, 2021, 5:27pm

I thought exactly the same. But that was a particularly complicated structure so I can't see me having some that complex.

s.alpaslan · October 21, 2021, 5:44pm

I’m sorry, but why was it necessary to switch to such a complex flow? Now I’m having a hard time understanding what I’ve prepared myself. It certainly shouldn’t be like this.

Mr.Rubi · October 21, 2021, 5:48pm

mebeingken · October 21, 2021, 6:04pm

I’m an hour into using and so far, I’m not enjoying this. Among the other things mentioned, the responsive nature of it has actions jumping location as actions are added or removed. I much prefer the original.

George · October 21, 2021, 6:06pm

Maybe try it with your own action flows and post some results.

TomD · October 21, 2021, 6:27pm

Here is an extract from the same server action, old and new. It looks as if a challenge has been set to fit the code into a box. It’s very clever, and looks interesting, but it’s not very usable:

I think if the same ingenuity can be applied differently, I’m sure something useful could be accomplished.

There are many places in Wappler where space is frustratingly unused/unusable - and requests have been made in relation to this from the beginning (mainly unanswered). However, the reorganisation of blocks, as in my screenshot, makes use of the space but reduces simplicity and usability dramatically.

The original design, with less unnecessary clutter, some vertical lines, and perhaps borders would be a relatively straightforward improvement, I would have thought. (And would give more time for really important matters like resizalbe panels and the much requested ‘else if’ statement addition.)

While Wappler is different and unique in many ways, I would have thought it needs to be familiar to some extent to new users, who probably have some experience with code - or might have a lot of experience. If they saw the nested condition example above, they might think Wappler is some extraordinarily complex software (or they might think it’s a toy).

Antony · October 21, 2021, 6:28pm

I’ve not used it but I’ve taken a close look at the images here.

I do have some epically complex algorithms I could throw at it…

… but I’m currently in Spain emptying out my house and olive grove which are about to be sold, and trying to find the time to record 40 videos about my product so I can formally launch it…

…so I don’t have a lot of time to experiment right now.

I’ve got used to the existing layout, and so something like this doesn’t feel a priority. I think the screen within a screen feel would probably drive my eyes crazy.

What would really help my more complex server actions would be;

removing the steps line (as done here)
have more sophisticated expand/collapse functions on a right click (expand all below, collapse all below, expand all at this level, collapse all at this level)
More width to fill in fields that are currently narrower than the space they occupy (maybe this is fixed in v4 but I’m still a Luddite on 3.9.9)
Search function
Option to copy Set Values where the name is not changed to name_copy.
Inserted action appearing where you asked for it and not 1 step below, which could be miles lower down the page. (Maybe fixed in 4.0?)
multi-action selection with cut / copy / paste, and ability to paste both within the current action and to other actions
A formal “Copy SA to Library Action” function.
Better correlation of console error messages to the lines in my server action that created them
I do a lot of maths based algorithms, so some other ideas I have to help with those (but I won’t describe them here)

(And less important for me now, but more important for Wappler in general, a true expression editor rather than data binding window. It would mean I could use the menus more often and Teodor would be able to stop asking me why I type expressions rather than using the menus )

I hope this feedback helps!

Best wishes,
Antony.

StevenM · October 21, 2021, 7:35pm

Exactly what @TomD has said! I have some complex SC and after seeing those images there is no way in a million years I am going to use this. What a complete visual mess.

There was nothing wrong with the original design and some improvements to functionality would have been enough it needed tweaking nor redesigning.

There are plenty of requests waiting to be implemented and instead of always reinventing the wheel how about we focus on building out the rest of the car.

This is going to be impossible to work out for new users, they will think this is just an overwhelming complex application.

There are plenty examples of good code presentation for low code applications and being different isn’t a product differentiation when no one can figure out what the hell is going on.

This wasn’t needed and so many other things like bigger windows for those popup windows is more of a priority!

Spending time and resources on this really worries me that you are losing your focus on what is otherwise a great application!

max_gb · October 21, 2021, 8:22pm

This brings back so many memories…

Dave · October 21, 2021, 8:42pm

Ohhhh man that is chaos!

otavionestares · October 21, 2021, 8:43pm

Thanks for the effort, guys! Lines are too thick! I think removing icons and setting lines thinner will be better!

JonL · October 21, 2021, 9:51pm

I think there are only two ways to build good UI for this.

You go the flowchart route with something like:

Or you just make a “beautifier” for code view as it was until today. So actions, conditions and loops resemble what coding would look like.

Both options are good being one very no-codish and the other one very readable. As people said the current view just needed some minor tweaks like removing the steps and other minor things.

StevenM · October 21, 2021, 9:58pm

I vote for 2! But do like the flowchart method, but you can end up with very complex flowcharts.

Still not sure why it was redesigned when the current UI solution is consistent with everything else in tool and for a no coder who is learning about the code was great.

I do hope they don’t start playing with the App Structure Nested UI like this, that would be an absolute nightmare

I might have to learn just how to code.

cy2 · October 21, 2021, 10:33pm

I think the idea and direction are great but the design can be simplified. Below is a rough diagram of a simpler layout. Ignore the code, colours and lack of icons; it’s just to show a basic layout – i.e. moving the then/else sections.