disclaimer - I am writing this from a position of slight frustration. Once the pills kick in I may see things differently …
As my forms get ever more complex, I find myself fighting the IDE form designer more and more. My principle issue is imprecise widget placement, especially inside containers. This issue is being compounded by variable amounts of IDE lag, and is especially frustrating when you have to make changes to an existing form.
I think its problem is in trying to be too WYSIWYG. I think it would benefit from emphasising the borders & boundaries more, giving us a larger target area to wedge in a new component between two others. I would wager that anyone creating more complex forms would find the slightly less wysiwyg view a worthwhile sacrifice. Depending on how it’s, you could maybe even have a preview toggle to remove such boundaries (I’m thinking css).
Not an exact representation of my thoughts, but along the same lines :
but geared to anvil components.
Another possible aide would be a tree layout of the form components which allows you to move things about. You already have the first half of that in the properties panel.
I’d love to hear any other suggestions, especially if you have found a good way to mitigate some of this.
I sometimes get so frustrated that I do the job in 4 steps:
(1) dump components in the form, knowing that they will often be in the wrong position or container
pull to local repository
(2) edit the yaml and indent and shift components around (this is enough dangerous that sometimes the app doesn’t load anymore, but I’ve done it enough that now it works more than it doesn’t)
push to the Anvil server
(3) adjust column widths a little, but it’s impossible to really adjust them (see here)
There is nothing special to consider, just make sure you don’t break the indentation in the middle of a component.
Strings in yams may or may not be quoted and if you are not fluent in yaml (I’m not!) things could at first look confusing and it’s easy to get one indentation wrong.
Now I always use PyCharm and I have less problems with it. PyCharm speaks yaml, so it helps by highlighting what’s wrong and by folding/unfolding sections for you.
If something goes wrong, you can still right click on the previous commit and reset the master (or dev or whatever branch) there.
Trying to get components inside the right container is super annoying! More than once I’ve wanted to be able to drag components inside the dropdown that shows the hierarchy, so that I could get a component in to the right container.
I have used at least ten different outliner programs. Nearly all of them have drag-and-drop tree restructuring. I’m tempted to invent a two-way transfer program: yaml → outliner, and outliner → yaml. Then use the outliner to arrange the tree as needed.
Here is an example I just went through: I needed two column panels, one with 2 and one with 3 columns, to have the column on the right aligned and the first of the 3 columns to be very small.
I edited the yaml file making sure that the sum of the column widths on both column panels is the same and that the width of the 3rd is the same:
The columns were originally listed in different order. Now they are listed as they appear.
There is no way to obtain this result using the IDE.
PS: That tiny first column is a spacer I used to add a little indent. In another world I could/should have played with css, but I decided to go the fast way. I know what to do with an Anvil spacer, I don’t know what padding of what style of what role of what element I should play with.
PPS: It wasn’t the fast way after all, because I ended up wasting time writing this post. Oh, well…
And … I just did my first ever git push back into Anvil, which worked!
I had somehow - only the universe knows how - managed to encase an entire form inside a column_panel which was used for something else, mixing up loads and loads of components. All attempts to extract them from the component failed for one reason or another (multi-select whilst also scrolling the screen for one).
I made one small change to the yaml file and it was fixed!
So, 6 hours trying to find a solution, 15 mins to apply it
Thank you for your pointers, they were instrumental in getting this fixed today.
What I usually do to make things less frustrating while adding or moving components in an old form is to amplify the spacing between columns (in column or flow panels) or rows (layout option) to Large. I often use tiny or None for my components and this makes the editor struggle when determining where I want to put a certain component. Specially when you have things like a component inside a Link inside another container.
Going back to the original idea (which I think is good):
What about some kind of zoom feature?
Kind of like what happens when you zoom in the browser, but without making every object larger, just what is in the WYSIWYG IDE so you can place things with more precision, and the ‘snappiness’ would have much higher thresholds with more space for in-between pixels.
Like a magnifying glass that follows the cursor and expands the drop zones on the areas is passes. I feel, however, that might be harder to do than increasing the gaps all round.
Me too, and I sometimes add the “card” role which helps a bit. This is fine for new forms, but if you have a working form it can be one hell of a pain to go around going that to however many column panels, labels & links you have …
Has there been any acknowledgement from Anvil that this issue is something they are looking at.
It can be super frustrating when you just can’t position a component correctly.
I don’t want to moan without thinking about a possible solution so how about the following:
Allow a double click of the placed component list
This will open a popup window with an expanded list of the placed components
Allow either drag and drop or up down buttons to select a component and adjust it’s position in the list.
I have seen this work well in other IDE’s the one that springs to mind is AppGyver. It’s a very intuitive method for fine positional placement
This would reduce the modifications required to the existing IDE to allowing a double click in the placed components list. The reorder modifications are then isolated from the rest of the IDE and should be easier to implement without potential side effects.
Gross changes to structure can still be done with drag and drop but finer positional control can be achieved with the re-order window.
The current situation really makes Anvil look Clunky.
Perhaps my solution is harder to implement than I imagine so it would be good to get some Anvil feedback on this.
Just adding my voice in this, as this is something that have also lost me quite a few hairs on my head.
Reading through the thread @stefano.menci’s approach of editing the yaml files, seems to be a workaround for some of the issues, but the whole “zoom” feature being discussed is also very interesting.
Another thing that would seem like a good fix to this, would be to allow for components to be positioned in the “Tree-list”, as suggested by @apearce.
Joining the choir of those, who want to see improvements made to this, before we all go bald!
I have used at least ten different outliner programs. Nearly all of them have drag-and-drop tree restructuring. I’m tempted to invent a two-way transfer program: yaml → outliner, and outliner → yaml. Then use the outliner to arrange the tree as needed.
As if I had the spare time to build it…
