Wappler 4 RFC: Editor Tabs for Server Connect actions

Oh yeah. Definitely much better. :+1:

Can we have the option anyway? Having a page open and the API action open alongside it is my normal way of working. Having it in a tab means I can’t see the page anymore.

Maximum flexibility would be my request.

1 Like

Hopefully split tabs is implemented and this is not needed.

2 Likes

This beta did add resizing option for SPLIT view as per the changelog. So could be the way to go with tab-split.

1 Like

I’m on a 27" iMac so have plenty of screen space. Having the wider API column would still work well and have plenty of space for the tabs. I suspect most people have large monitors these days.

Adding these suggestions here.

1 Like

I guess this goes without asking. Fields in steps will take the whole width of the tab in next iterations, right?

Yes we will be getting to that too.

1 Like

Yes we were thinking about that, but if the code view is editable- a whole new design / code synchronization challenge appear.

And actually we discourage a direct json editing, so there won’t be much use for code view and it will cause only confusion.

1 Like

I understand and makes sense.

When I do copy and paste actions I usually do it in VSC @sid because I’ve seen that kind of sync issues when doing it in wappler. So maybe you want to try it out there.

A valid point.
But can we at least have an option separately to open the JSON file?

Ever since Monaco was added, I have grown more confident in using Wappler for such things. Also saves me from keeping another app open.

1 Like

instead of direct editing to copy and paste would there be no way you could do something like command click etc to highlight any steps you want to copy then command c to copy go into the other action command v on the step before where you want to paste im not sure if this would even be possible

edit I imagine ir would get pretty confusing thinking about it because this wouldn’t really work unless you was copying everything inside a condition for example where it has nested items

@george LIbrary items open in code editor in case you missed them.

And custom modules need to be checked with this new feature.

Do you want a bug report for both?

My feedback on the new functionality.

  1. There is a problem with custom extensions when the tab opens. The message always occurs, even if the server action does not use the extension. The extension itself works stably (thanks John for the useful extension):

  2. This is what my SC area looks like in the latest stable version of Wappler:


    As you can see, the largest space is occupied by the area of steps, because with complex logic, the steps are very cumbersome. The current implementation suits me and its advantage is that there is no step of double-clicking and opening an additional tab. It is enough to select the server action and immediately get access to its editing, it is very convenient.

This is what the new SC tab looks like in the new Wappler 4:


Large “+”: A lot of space is convenient.

“-” (at the moment):

  • you have to do an additional action to open the edit-friendly mode. It is not yet clear how significant this point is, we need to try it in the workflow.
  • the size that the user sets for the area with steps is not saved, it is constantly reset when moving to another step and becomes small and the area with properties is large, although it should be the opposite.
  • when you close a tab, all changes are instantly lost without any warning.

When opening a tab in the app workflow actions, the tab has only a code representation, not a visual one:

Currently we have implemented just the Server connect API actions to be opened in the tab editor .

Will get shortly to all other server connect types as well App Flows.

1 Like

I would try to think of a way of streamlining the UI so it looks more like the two top toolbars in webpages.

There is some space there in the two top toolbars to reimagine the utilities.

Also:

image

Maybe change the tab icon to this?

Yellowish book for Library
image

Blueish arrows for API
image

Blueish graph for Flow(maybe change color as it’s very similar to API if not the same)
image

And leave the current one for DB tabs(if they come at some point).

image

3 Likes

Another idea.

I’m not going back to the old panel(that’s for sure). I do understand some people might still want it for quick edits. So I won’t get in the middle of that.

However the old panel is now annoying me a lot because I still have to scroll a lot in the browser.

Suggestion: Make the steps panel collapsible to the bottom as the properties one and make it remember the position of both. This should satisfy everybody.

This way I can have a better view on the SC browser and not have to scroll so much.

Also there are two small UI bugs I’ve noticed.

  1. A few pixels in between the properties collapsed bar and the bottom.
  2. When properties is collapsed it seems the steps panel doesn’t resize and you can see the browser behind it.

1 Like

Good idea. We are toggling between full tree, if an action is open in tab editor, or with inline steps and properties if it isn’t.

I was thinking of making the default view inline steps or directly in tab editor, an option, but having them collapsed might also do well.

Both options work for me. I just want to browse SC in all it’s glory :slight_smile:
I just thought that collapsing and remembering would be less traumatic por people but I’m all for making it disappear as an option or altogether.

The problem I see keeping the old panel is that you will have to keep the modals so you won’t be able to stick to one design pattern moving forward. And I think consistency is something important for a good UX, for new users and for learning materials.

Anyway, that’s just my opinion. All in all, I’m just happy I will be able to browse through the whole height.

1 Like

On second thought. I would scrap the old panel altogether and for a very good reason @George

Check this image. A SC open in a tab and a SC open in the old panel.

What are you saving when you click on the save button? It’s rhetorical. I know what I’m saving but it’s going to create a UX havok and impact specially new users.

Am I saving the tab? Am I saving the old panel? What if I made a stupid small change to the old panel SC I forgot about but I click it thinking I’m saving the tab. Bad things can end up in production. What about the modals that pop when you have unsaved work? How would I know which is it affecting.

From the bottom of my heart. Be done with the old panel altogether.