Hi there,
I am a newbie in Anvil. I am aware that the following is potentially either a very stupid question and the answer is so obvious it hurts or it inflicts on some basic design principles of Anvil and is therefore impossible. I appreciate any feedback.
What I’m trying to do:
I would like to setup many (>100) components of various types over multiple forms in a questionnaire. The input-fields are all tied to an external database. The manual setup of these components works but it is error-prone and tiresome .
To be more flexible and eliminate the manual repetitions and errors, I configured the components next in an input-file (thinks DSL) and set them up in code. This works in principle even tough I am still fighting with the positioning of the components (but here I don’t seem be the only one). So far so good.
Now, some components on these forms need to be wired with special event handlers (standard handlers per component class are more or less ok in code). This wiring should be done best directly in the editor.
These are event handlers like: “If radio button A is clicked, make that Textbox XY visible!”. This is a no-brainer in the editor but quite abstract to do in code. Conceptually it removes the methods of a component from the component itself to a central handler. This seem a bit against OOP-Principles.
This raises my question: Is there a way to save/substantiate a form populated with components in code as a form in the editor (it would appear under Apps) for further editing and later use?
Four steps:
- Configure components in DSL
- Generate the form and its components in code and add them to the forms in the App.
- Edit and complete the handlers (and the layout).
- Use the completed form
Is there a way to do that?
Any help, hint or clue is appreciated. Thank you. Franz
What I’ve tried and what’s not working:
I looked in the documentation and the forum but I seem to have missed that one.
I tried to find the parent of a form and add it there. But this did not work.
Code Sample:
# this is a formatted code snippet.
# paste your code between ```
Clone link:
share a copy of your app
I don’t understand your point 1, what is dsl?
I think you want to create a form dynamically. You can do that with add_component.
You can have a look at InputBox, it allows to create a form either from a list of dictionaries or with a call per added component.
Hi Stefano,
thanks for your message. Sorry about the dsl. DSL is “Domain Specific Language”, meaning a defined set of fields with codes that define a component and its initial configuration (typ, text, role, tags etc.)
The following is for example the blueprint definition of a textbox which then is refined (add name and other specifics).
CompType=tb
Description=Textbox
Bemerkungen=normale Box
has_text?=1
stored?=1
Display=placeholder
Value=text
init=get_or_create
events=show,lost_focus,pressed_enter
Properties=role=outlined,type=text,visible=True Tags=UserID,CaseID,Year,DocSet,Field_ID,Field_Name,Field_type
Each component used has such a blueprint.
The textfile, actually a database table, contains a set of such definitions. This set is then read and interpreted during the initialization of the form. The components are added with add_component that you mention. This all works.
So: The problem is not adding the components to the form but make the created form persistent and available for further editing.
Thanks for the InputBox hint - I will certainly check this out.
I hope I am somewhat clearer. Thanks again, Franz
Do you mean you want to create a form from code and have it available in the ide?
You could try cloning the app to a local git repository, then convert your dsl to yaml, commit and push. The yaml is not documented, but you should be able to reverse engineer most of it. I tried editing some forms, not creating new ones, and with the exception of some column ids on some component, I was able to manage everything I needed.
It’s hacky, clunky, and I’m not sure you can address 100% of the form features, but i think it’s worth trying.
Take a look a this:
https://anvil.works/build#clone:W2PZYWN5ABWNTTWK=PDEVFFF4N5FZVH2AW6Q66Y2R
That example dynamically generates and displays a form based on a column of values from a data table. It populates the form with saved values stored in a 2nd column, and saves the values entered by the user (using the generated form), back to the second column in the data table.
Hi Stefano,
Thanks for your comment. Yes, indeed. It would like to make a created form available in the IDE.
It seems strange to me that this is such a problem. Basically I add components either in the editor or through code. Behind the scenes, if I move a component onto a form, it adds a component to the form-object as well. Just in one case the change is somehow permanent (stored with the form object) while in the second it is transitory (it exists only during program execution).
Another way would be to extend the forms-object as if I had added a component manually.
A third way would be to say self.parent.addform(self) with self being the populated form.
Will see what I will find but I look into the YAML-thing. Many thanks for your assistance!
Regards, Franz
Hey Nick,
thank you for that. I look into that!
Best, Franz
This one is really meta:
https://anvil.works/build#clone:SKGOM74GKTVIOMZP=QSLZQYX4PCEZRIKHSAAFX7WM
That one generates all the code needed to generate the code to create the form. Run it, copy the code to Form1 (completely overwrite the default contents of Form1 and replace it with the generated code), then run the app with Form1 as the startup form.
In this example, I left instances of “Form1” hardcoded in the static default form code, but that can easily be replaced with some concatenated variables.
Perhaps you could follow that general approach to generate the YAML file…
Also, have a look at custom components.
Hi Nick,
I am busy with another thing at the moment that has deadline tomorrow. I will certainly look into these solutions and come back to you tmr afternoon. Thanks so much for your kind support. I appreciate it. May be there is someone from @anvil that could give me some technical insights, why this requires such stretching of the system.
Cheers! Franz
Yes, but these are happening at very different times, in two (or more) far-apart places. Taking those into consideration, “the” form is a misnomer. There are many instances of that form, in many different states of completion, in many different places, at many different times.
When you do it in the IDE, via the GUI editor, it is happening only in your instance of the IDE. The IDE is able to do it only because keeps and saves an independent specification (.yaml file), for shipment to the end-user’s browser, as part of the App. With that specification, later on, in millions of different places, each user’s browser can re-create (on demand) the specified structures.
When you do it via code, it is happening only on-demand, only in the end-user’s browser. That construction is in a completely different computer – possibly thousands of different computers – inaccessible to the IDE.
Seen that way, there is no single, shared Form instance that every browser in the world is changing at the same time. Everybody’s working with their own copy.
Dear Phil,
Thank you for the clarification, your time and effort. I see that the components are created “on the fly” in the browsers as they are called up.
But so are the components in the form that you created in the Editor. They are using/copying/instantiating - as you mention - the structures in the YAML file. So the way for me is to look at the YAML-file and add the structures I need there.
I just try to use the computer for the boring stuff and manual adjustments for code and design. Putting components on a page in code at the right place is not ideal if you deal with many components.
The combination could be very powerful. I will play a bit with that.
Look, in the end I can do everything by hand. I know this works. But I am just a bit lazy, maybe.
Thanks again for the great input.
Best regards, Franz from Switzerland
Has anyone fully documented Anvil’s YAML UI specification (especially the positioning syntax)?
I would love to create some internal tools to generate full Anvil apps by editing YAML files. I understand that might open the door to competitors creating products to replace Anvil’s drag and drop builder (which could hurt their business model), so I don’t want to discuss this in public (but anyone willing to put in the time can get it worked out).
I like Anvil a lot. Great product. My interest is that their business is thriving!
My ambitions with YAML would be more limited: just get my app up and running (stably).
Regards, Franz
I also don’t want to see Anvil ever go away 
1 Like
I agree that work done manually is often sloppy and error prone.
My problem with Anvil IDE is that it’s impossible to make sure that things have the same width and are aligned with manual dragging, and it’s impossible to set the column widths from the IDE. And sometimes it’s difficult to put component X inside component Y when Y is inside Z, because X wants to go inside Z.
In these cases I pull, edit the yaml and push.
Another great tool to improve productivity and form quality are custom components.
The good thing about custom components is that you design them once and reuse them wherever you like.
The bad thing is that they are not WYSIWYG, hence this old feature request.
One more thing that I have used on day one, was to customize our company page template. Since then, every time I create a new app, I clone, copy the theme folder from the template app to the new app and push. At this point the form where I drag the components is different from the default form. I have added some slots and removed others, so I can drag components in those slots and all my apps look identical.
Summary: there are 3 tools (pull-edit yaml-push, custom components, edit template) that allow you to improve productivity and quality while designing your forms. These tools could use some love, but they are very useful as they are.
Said that… I don’t understand why would you want to create editable forms from code. I obviously don’t know your plans, but I have the feeling that if you get familiar with these 3 tools/techniques, you may change your mind. But, as I said, I don’t know your plans.