Form Templates

Every Form in Anvil inherits from a template class called <<FormName>Template. For example, Form1 inherits from Form1Template. This class is defined by an HTML file which represents the UI of your Form. When you build a Form visually in Design view, the Anvil Designer updates this file for you. You can also view and edit this file directly in the HTML view of the Form Editor.

Form templates are of three types:

1. Forms that use a Layout
2. Forms that use a Container
3. HTML Forms

Forms with a Layout

When a Form uses a Layout, it inherits from WithLayout and behaves like the Layout it uses. In terms of component placement, rather than placing components anywhere on the Form, you place them into slots defined by the Layout.

A Form using a Layout will have a layout attribute on its <anvil-form> element in HTML view:

<anvil-form layout="form:HomePage">
    ...
</anvil-form>

See Layouts for more details on creating and using Layouts.

Forms with a container

When a Form uses a container, it inherits from a container type that determines how components are placed and arranged. For example, a Form that inherits from a ColumnPanel will stack components vertically.

A Form using a container will have a container attribute on its <anvil-form> element in HTML view:

<anvil-form container="ColumnPanel">
    ...
</anvil-form>

Blank Panel Forms

Blank Panel Forms are the simplest. Their templates inherit from ColumnPanel. In terms of component placement, they behave exactly like a ColumnPanel.

RepeatingPanel templates

When you add a RepeatingPanel, to a Form, Anvil automatically creates a new Form called ItemTemplateN. (where N is a number). This Form is repeated once for each element in the RepeatingPanel’s items list, and inherits from ColumnPanel. In terms of component placement, they also behave exactly like a ColumnPanel.

Data Grid row templates

When you add a DataGrid to a Form, it contains a RepeatingPanel by default. The Form associated with this RepeatingPanel will be called RowTemplateN and inherits from DataRowPanel. In terms of component placement, they behave exactly like a DataRowPanel.

HTML Forms

HTML Forms inherit from HtmlComponent. This is what you get when the top-level element of your Form’s template is ordinary HTML or an <anvil-component>, rather than an <anvil-form>. See Forms as HTML in the Editor for more on editing your Form’s template.

HTML Forms are useful when you want the Form itself to be based on HTML, for example when creating custom components or reusable layouts with your own HTML structure.

Built-in themes come with pre-defined HTML Form layouts. For example, when you create a Material Design 3 app, you get a Standard Page Form with a nav bar at the top, an optional sidebar, and a main content area.

The nav bar and optional sidebar are defined in an underlying Layout that is an HTML Form, with a slot for the main content area. This replaces the older theme pattern where the Standard Page Form used an HtmlTemplate with its html property set to a standard-page.html file in Assets.

HTML Forms are the recommended replacement for Legacy HTMLTemplate Forms.

Legacy HTMLTemplate Forms

Some older apps and built-in themes use Legacy HTMLTemplate Forms. These Forms inherit from HtmlTemplate and have an html property that points to an HTML file in Assets, such as standard-page.html or a Custom HTML file.

Legacy HTMLTemplate Forms are different from HTML Forms. An HTML Form inherits from HtmlComponent because its top-level template element is ordinary HTML, which can contain both HTML elements and Anvil components. A Legacy HTMLTemplate Form uses an HtmlTemplate container whose HTML is defined separately. See Legacy Layouts from HTML for more details.

Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.