Converting form template from YAML to python

Anvil Q&A
1

What I’m trying to do:

Convert a format template YAML file to a python only template similar to that produced by the anvil-app-server CLI.

What I’ve tried and what’s not working:

Not sure where to start because the format template YAML syntax isn’t documented anywhere

Code Sample:

The following is just an example of what I’m trying to convert:

components:
- components:
  - layout_properties: {grid_position: 'LDNKGK,MJTDOC'}
    name: repeating_panel_1
    properties: {item_template: Form1.ItemTemplate1}
    type: RepeatingPanel
  layout_properties: {slot: default}
  name: content_panel
  properties: {col_widths: '{}'}
  type: ColumnPanel
- layout_properties: {slot: nav-right}
  name: navbar_links
  properties: {}
  type: FlowPanel
container:
  properties: {html: '@theme:standard-page.html'}
  type: HtmlTemplate
is_package: true
2

There are several third-party .yaml readers available. That would be my starting point. This will at least get the template into your Python code as a properly-nested data structure.

Then it’s time to start picking apart that structure, from the top down, and see what you find in each object (dict). I’d pay special attention to the type entry. You’ll find that these types are documented.

3

@p.colbert The YAML structure is readable, and the type entry is self-explanatory. While I know the type is documented in the Anvil API, I’m referring to the documentation for the YAML file itself, not the type, which is simply the UI component the form template inherits from.

I’m raising a broader issue: for users with a development background, it should be possible to build apps entirely without the Anvil Editor. As someone familiar with Python, I find it much easier to work with text files in a code editor like VS Code. Constantly switching to the Anvil Editor for major UI changes interrupts my workflow.

One of the key benefits of the anvil-app-server is the ability to develop using just a text editor:

“To learn how to create an Anvil app using your favourite Text Editor, check out our guide.”

However, the guide is minimal and lacks details on the form template YAML syntax. The create-anvil-app CLI tool suggests the possibility of omitting YAML files entirely, as it generates _template.py files. But these files only contain a nearly blank __init__ method.

Through experimentation, I found that the YAML-generated templates perform additional tasks like setting the item property, establishing data bindings, etc., none of which are included in the _template.py files. Additionally, they set an opaque, auto-generated grid_position property, which is hard to manually edit.

Does anyone have suggestions on how to work with Anvil’s YAML-based templates more effectively, or tips for overcoming the limitations of the _template.py files?

4

It is.

Of course, without the Anvil IDE, you don’t get .yaml files in the first place. In that case, your Python code is responsible for constructing your Forms, and all their subcomponents, at run-time.

I haven’t done that for an entire App, but I’ve certainly done it for selected component trees (navigation outlines), driven by my own metadata. Not fun, but feasible.

If you’re going to bypass Anvil’s IDE – the only program I know of that produces them – where do you expect to get your .yaml files from?

1 Like
5

I’ve done a bit of reverse engineering in the past to understand how the YAML file is structured: I’d tweak some UI components, pull the changes, inspect the diff, and repeat as needed.

From what I’ve seen, you can reproduce most of the form-building process programmatically. However, there are some limitations. For instance, I recall that the unique IDs assigned to columns in a ColumnPanel are only handled via YAML—they don’t seem to be accessible or manageable through code.