Form Templates
Every Form in Anvil inherits from a template class called <<FormName>Template. For example, Form1 inherits from Form1Template. This class defines the basic outline and structure of the 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.
Blank Panel Forms behave like ColumnPanels.
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.
Auto-generated RepeatingPanel Templates behave like ColumnPanels.
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.
Inside Data Grids, auto-generated RepeatingPanel templates are
split into the Data Grid’s columns.
HTML Forms & Custom HTML Forms
HTML Forms are based on an HTML file in the Assets section of the App Browser. As well as writing standard HTML, you can define drop slots and drop zones to configure the drag-and-drop behaviour of the template in the Anvil Editor. See Layouts in HTML for more information.
Built-in themes come with some pre-defined HTML Forms. For example, when you create a new Material Design app, you get the Standard Page Form, which has a nav bar at the top and an optional sidebar.
The Material Design Theme’s Standard Page Form.
The Standard Page Form has a ColumnPanel auto-populated in the main body of the Form (called self.content_panel). The nav bar and sidebar are defined in standard-page.html, found in the Assets section of the App Browser.
From the Properties Panel in the Anvil Editor, you can change the html property of your Form. This specifies which html file the Form should use.
The html property sets the file to
base the Form on.
You can also set this property to ‘Custom HTML’, which allows you to write HTML for this particular Form in the Anvil Editor. Alternatively, you can also set the html property of a Form to a string literal in code:
self.html = '<h1>Hello, World!</h1>'html property in code is very dangerous. If user-supplied input is included in the value of the .html property, an attacker could inject Javascript code, also known as a Cross-Site Scripting (XSS) attack. If you are displaying user-supplied input, consider using a RichText component.Do you still have questions?
Our Community Forum is full of helpful information and Anvil experts.