Redesigning the Insert Elements Panel

Request For Comments
#1

We are redesigning the context based Insert Elements Panel and I wanted to hear your opinion on this one, before we finalize it.

This is the Insert Panel for the front-end components, available in the [ + ] in design view or in App Strcuture panel.

Here is what the panel looks like:

image
image.png550Ă—555 31.4 KB

Many things have being greatly improved like:

  • categories are now clearly in the sidebar
  • components have a framework tag to indicate when they come from
  • search is greatly improved to be able to search on multiple words, including even category names and word order doesn’t matter (space delimited)
  • the special “Suggested” category shows context aware components for direct insertions as default.

Further more we will be reorganizing the categories a bit more, but that is a first look for you.

Let us know what do you think of the new design.

Thanks to @jowhiskey for the creative ideas :slight_smile:

PS. the Server Connect, insert Action steps panel will look pretty much the same but with the server connect categories.

5 Likes
#2

Looks good to me. I might rethink the order of the categories though so the most used ones are near the top of the list such as data.

#3

I like the simplicity. One question though: What happens to the insert after/before toggle? Have you already an alternative for that. You originally mentioned, that the insert position is weird and you need a more logical place for it.

#4

When called from the App Structure, the position toggles appear, this time on the left side:

image
image.png544Ă—550 12 KB

3 Likes
#5

Ah nice I’ve already asked myself how you’re gonna use the space on the top left!

1 Like
#6

It’s getting really cool, congratulations, guys.

#7

maybe you can add “most used” tab

#8

I think you can add a filter that gives us plain html element(without javascript depended), and html element with javascript dependent…

#9

This is very good. Superb suggestion from @jowhiskey. I think it will really help navigation through the elements panel very efficient and more intuitive. Finding what you want quickly and easily is key to any good program and you guys are putting a lot of innovative ideas to task. This looks like it effectively gives you three ways to find what you want, and more importantly, the categories are always in view. This is very well implemented!

This will certainly raise the bar on accessibility for Wappler and you guys are really perfecting the program with changes like these.

Posts like this one where you are asking for feedback should be stickied or something in the forum so people are sure to see it. It will keep it front and center until you hear what you need, and it will also indicate that it is an important post that people should be looking at.

1 Like
#10

I too think it looks like it’s going to be a big improvement. I usually use the search facility to select components, but a disadvantage of this is that I overlook some of the available options and am sometimes (pleasantly) surprised to find some option I didn’t know about. This new design will be helpful in learning more about the many options.

Something your screenshot does demonstrate is a general issue with Wappler - the need for a lot of scrolling. To select something visually from the options in the proposed insert panel, it may be necessary to scroll in both panels; if you don’t quite know what you’re looking for, this could result in a lot of scrolling backwards and forwards. Would it be possible to increase the height of some of these panels - or include some options to do so (I realise you have to cater for a variety of screen resolutions etc.)? I appreciate it’s not feasible to reduce the need to scroll completely.

The right side of the Wappler interface would benefit even more from some options to reduce scrolling. It’s necessary to do a great deal of scrolling as you switch between the App Structure and Properties panels - then perhaps you need to apply a dynamic event and might have to scroll up and down to locate the required action etc…

Generally, I really like the Wappler UI - and look forward to it becoming even better.

1 Like
#11

I like the idea of most used on top. Or perhaps even better: Drag and drop your own favorite order and save it as a user preference.

1 Like
#12

Like it the way it came out, but by being able to set it up in the most used categories should speed things up.