Observations and Proposals for the Wappler UI

[aschoijett]

Hi @George,

I said in other posts that I’m not a programmer, so many of the concepts that are common to most experienced people are foreign to me. That said, I still want to maximize the usefulness of my time in front of the tool.

I know that many of the points below are largely a matter of preference and taste, but I want to share some of the issues I find using Wappler in the hope that at least a few can be addressed.

I love Wappler and the quality of the support I get, so let me assure you that all that follows is only with the intention of making it even better.

Observations:

1. Modals like “Properties” are docked, are narrow, cannot be resized, and force to scroll down to find what one wants to edit
2. I can get used to having left and right zones for server and client work, but I’m not sure there’s much value in that.
3. Fields are too narrow. This is particularly more annoying when they have complex expressions. Those expressions should be visible to the user without having to copy the and past them on OneNote to see the whole. Having an input field that shows only say 20-30 characters of an expression and allows me to scroll horizontally through is sub-optimal.
4. Many components seem to be repeated in the menu of components offered when I’m creating a page structure. Examples: I get two modals, two paragraphs, etc. It is not clear if they are indeed different objects, and if so in what do they differ, or are they something that just needs to be cleaned up.
5. When I click on a statement that has children, the location where I click moves from under the cursor. This is not only distracting but also error prone, because it forces me to have to find where I was when I clicked and many times I don’t have the proper labels in place yet.
6. The Formatter has many issues:
   a. The old UI allowed me to copy and paste the expression and edit it on MS OneNote because frankly, the formatter seldom puts the parenthesis and the operators the way I wanted them. In the new UI, however, it is not obvious how to do that.
   b. Having a right click menu is a good idea, but if you don’t know Wappler, you’ll never guess that is there.
   c. The option “Operation” provides a different experience from every other option in the right click menu.
   d. Options like ==, !=, >, >=, <, <= , which right now are under “Operation”, in my opinion s/b under “Conditional”
   e. The same is true for the ternary operator.
   f. && and || are connectors. But the implementation of their connecting logic is unclear to me. This may be me, but most times I get the wrong associations because I have no control of where the parenthesis will go. And other times, Wappler just puts parenthesis in the wrong places.
   g. I don’t know what the option General > Default does and it s/b easier for me to know that. I know you guys are working on a link to help text.
   h. Certain conversion operations are under Conversion but others are under other menu options (e.g. To ISO Date)

Proposals (for discussion):

1. To format expressions with conditions, make the formatter’s user experience similar to the user experience that Wappler offers in the Server Action > query > Condition tab , where I can clearly see how my ANDs and my ORs interact with groups (which are the parentesis that the formatter inserts) and the expressions within them.

2. Let all the modals float and be resized.

3. Consider using some of the code of the DMX tool’s UI. Note: I never used the DMX tool but watched some of its videos trying to learn Wappler and the DMX modals look better. They are wider than taller (like my monitor), seem to float, and use tabs for the different parts that could be configured. Also the UI looks cleaner

4. Do not constrain the width of an input field to such a small number of displayed characters. If forced to do that, offer a new modal to edit a size-constrained field using a wider widget.

5. Cleanup some of the options that seem repeated in the menu of components that can be added to a page.

6. Explore when using a double-click would be more intuitive than using a right click. Examples, to “open” and “close” a collapsed component. Not sure about this one yet so I’m open to suggestions.

7. Ensure the “opened” statement does not fly away from under the cursor AND that the statement highligthed with the blue background is the one I clicked, not some other statement as it is now.

8. Homogenize the use of the menus in the Formatter, so all operations are reached the same way, unlike the ones under the current Operations submenu.

9. Use the following formatter menu options
   i. Conditional operations
   ii. Type conversion operations
   iii. Text type operations (may require sub-menus because there are many of these)
   iv. Number type operations (these are the mathematical operations)
   v. Date type operations
   vi. Other operations

Hope that at least some of this long message helps,

Alex