It’s a major PITA to move elements around in the app structure and place them at the right spot.
Can we have buttons to put them one spot higher or lower in the tree structure, or a keyboard shortcut?
Nice idea.
Unfortunately, not every element will function properly unless in a specific order. Hence, there are restrictions in place for adding and dragging certain type of elements by Wappler.
I never found it to be of any value, but its supposed to save beginners from getting confused and misconfiguring stuff.
P.S. You can vote for your own feature request.
This is probably not a helpful reply, but in case you haven’t realised, you can move elements in App Structure by dragging. The reason I mention this, is that it doesn’t work reliably. This is not in relation to the restriction pointed out by @sid. Sometimes the option to drag just doesn’t work; this could be something as simple as reordering items in a list. However, most of the time it does work, and it’s very useful.
If you happened to try it when it wasn’t working, you might have assumed the feature wasn’t available at all.
@TomD thank you, yes I am aware that we can drag elements, but it’s not ergonomic imo. It’s also not reliable as you mentioned so I find myself wasting a lot of time just trying to move the element to the spot I want. I have actually found the DOM view to be much more responsive instead so I use that at the moment.
Instead, I am talking about a feature (could be a button or a keyboard shortcut) to just push the element to the next possible spot.
1 Like
Or a possible contextual up/down arrow on the highlighted element?
I very much agree with you about the need for more keyboard shortcuts. I have raised the subject quite a few times - and to be fair, a lot more have been added in the meantime.
One of the most useful shortcuts in code view is Alt+Arrow up/down for moving selected lines/blocks of code. I think this would be an ideal shortcut for App Connect too. I think it’s been suggested before that it would be very useful if making a selection in App Connect would make the corresponding selection in code view; if this were more feasible to implement, then the existing shortcut keys could perhaps be used.
@TomD Alt + arrow up/down is a great tip, thank you for sharing it!
Interesting point. When I was a beginner I was even more confused as I couldn’t find any documentation as to what should or shouldn’t go inside of what so it just became a complete frustration.
@mebeingken, do you cover this in your tutorials?
I think it would be a matter of duplicating the Bootstrap documention or other HTML resources. Having said that, the fact that the feature behaves a little erratically means it might not always be obvious what is not 'allowed' and what's not working.
We’ve been discussing such move up/down buttons for app structure and design view with team.
As for dragging things in App Structure i thought the UI is pretty clear - the X icon shows you cannot drop the item you are dragging there. The > arrow icon shows you can drop it there. Simple as that.
I’ve tested multiple page builders which allow you to drop everything everywhere and the results can be disastrous. Users not having an idea of how HTML works nesting unbelievable things, creating unbelievable structure and messing the whole layout and of course then blaming the tool 
1 Like
One thing that took me a while to realise is you need to drop the item on the words of another item. Going to the side of it doesn't work. Not sure if that's deliberate or not but it was a little while before I realised. Now it's second nature and I move things around without any issues at all.
Thanks @sitestreet. Usually the red arrow indicator appears without much persuasion, and it works fine - probably without much thought about the exact positioning. At other times it seems to require more effort before the indicator appears - or it doesn’t appear at all. It could be that I’m missing the target but I usually persevere a little before giving up.
1 Like