This is a picture of the Anvil Editor, with the most important parts labelled:
- The App Browser lets you select which part of your app you are editing. Your app can contain:
- The App Menu (aka the Gear Menu) is where you configure your application.
- The Run Button runs the app in the Editor and shows the Output Panel (shortcut:
- The Output Panel shows you everything that was
print()ed when you last ran your app. For older log records, look at the App Logs.
- The Form Editor displays what your user interface will look like, and lets you drag and drop components to create your UI. The Form Editor has two modes:
- The Toolbox is where you pick new components to add to your UI.
- The Properties Panel lets you configure the component you have selected in the Form Editor. (You can select components by clicking on them.)
- The Component Tree shows you the hierarchical structure of the components in the current Form. (Click the dropdown to view the tree.)
You construct your UI by dragging-and-dropping components onto your Forms from the Toolbox. (You can also create and add components using code.)
These components are always visible in the Toolbox:
Click ‘More components’ to see these components:
The Theme Elements part of the Toolbox contains components whose style is particular to the current app’s Theme. (This is not the complete list of theme-specific styles that can be applied to components. The Roles view shows you all of them.)
To edit the initial properties of your components, use the Properties Panel.
You can edit the styling and behaviour of your components such as:
- what text a component displays
- what icon a component displays
- the text colour
- spacing around the component
- input type of TextBoxes
- tooltip text
For full listings of each component’s properties, see the API Reference.
The Properties Panel is split into subsections; many properties are not shown until you click the ‘more’ button for the relevant subsection (this keeps the Properties Panel a manageable length).
Each Form has properties as well. You can modify the Form’s properties using the Properties Panel when no components are selected.
To modify what the component is called in the Python code, use the name property at the top of the Properties Panel.
You can set properties in code as well; each property is available as an attribute of the Python object:
self.button_refresh.text = "Check for messages"
When are the properties set?
Each Form contains this line of code:
# Set Form properties and Data Bindings. self.init_components(**properties)
When this line of code runs (during Form initialisation), the properties you set in the Properties Panel are applied to your components.
The Properties Panel also allows you to set up event handlers for your components.
Each component’s events are shown at the bottom of the Properties Panel. You can enter the name of a Python method in the box, and that method will run when the event fires. This method must be a method of the Form that the component is on.
If you click the button next to the event,
an empty method is automatically written for you (it contains a
pass statement, which you can remove.)
def button_refresh_click(self, **event_args): """This method is called when the button is clicked""" pass
You can also set up event handlers in code using
See Anvil Components for more detail on events.
The Form Editor has two modes: Design View and Code View. You choose your view using the tabs at the top of the Form Editor:
The App Browser lists the main parts of your app:
- Client code - the Forms, Modules and Packages that define your app’s UI design and client-side behaviour.
- Services - configuration pages for features such as User management, Data storage and Email
- Theme - configuration of the overall look and feel of your app
You can add Forms, Server Modules, Modules, Folders and Services to your app by clicking on the plus buttons .
You can also use the down-arrows next to existing Forms and Packages:
To delete and rename things, use the down-arrow next to existing Forms, Packages, Modules, Server Modules and Services.
For Forms and Modules, this menu also allows to choose what runs when your app starts.
Forms have a few other options: you can duplicate them, or click ‘use as component’ to make them appear in the Toolbox as Custom Components.
The App Menu (aka Gear Menu) contains configuration and output relating to the entire app. Open it from the top of the App Browser:
Here are the options given in the App Menu:
- Rename your app
- Publish app: Configure your app’s URLs and other hosting/deployment options
- Titles and Logos: Configure your app’s title, logo and description (useful for SEO and social media previews)
- Share app: Clone your app, copy the app’s URL, clone it with Git, and export it as a file
- Version history: save your app, revert to a previous version, publish a specific version, and clone it with Git
- App logs: get a log of
print()ed (and other) output from your app, split by user session
- Background tasks: a record of all Background Tasks this app has run (including those running now)
- Scheduled tasks: set Background Tasks to run according to a schedule, e.g. every Thursday at 3pm (similar to Unix’s
- Uplink: connect to code outside of your app (anywhere connected to the internet where you can write Python)
- Dependencies: use other apps within this app, and make this app available to other apps
- Delete your app
- My Account: see your account details, configure two-factor authentication, add developers to your account, and upgrade your plan
The Output Panel shows the output of
Output from Server Modules will appear with a yellow background.
Exceptions will show a traceback - if the exception occurred on the server, the traceback will still show the whole call stack as if the code ran on the same machine. Click the links to go to that line of code in the Code View.
When Background Tasks are running, their status is shown at the bottom of the Output Panel.
You can show/hide the Output Panel by clicking the
>_Output button in the top-left of the Editor:
The hierarchy of components within the current Form is shown in the Component Tree. Click the arrow next to the component’s name in the top of the Properties Panel to open it.
The currently-selected component is highlighted in context of the other components. You can select any of the other components to view and edit the properties of that component.
Anvil apps use Python code on client and server side. The Editor uses different visual styles for client and server code.
In Modules, code is styled like client code. Module code can be run on both client and server.
In this documentation, client and server code are styled as follows:
def client_code(): """This is a function in the client""" # This is client code print("This is what client code looks like")
def server_code(): """This is a function on the server""" # This is server code print("This is what server code looks like")
The Code Snippets Panel lists all the components on the current Form. It is visible in the Code View.
Click on the arrow next to a component to see a list of all the component’s properties.
Click on the question mark to get a dialog containing more documentation about that component type.