Chapter 2:
Build your user interface

Let’s build a UI using Anvil’s drag-and-drop editor. The UI will collect the data we want to pass to our send_feedback function.

Step 1: Add the first components

Click on ‘Form1’ in the App Browser to go to our UI. We construct the UI by dragging-and-dropping components from the Toolbox into the page.

The Theme Elements part of the Toolbox contains components that are specific to the current app’s Theme. Here, we’ll find the Card component:

Location of the Card component in the Toolbox

Location of the Card component in the Toolbox

Drop a Card Card icon, and a Label Label icon into the page.

Anvil Design View with a UI consisting of a Card and a Label

Step 2: Change component properties

Select the Label we just added to the page. Then modify the text of the Label by double clicking the Label in the designer.

Changing the text of the Label

Below the Toolbox on the right, we’ll find the Properties Panel where we can edit the styling and behaviour of our components. Let’s change the role to Headline in the Properties Panel.

Changing the 'role' property in the Properties Panel

Step 3: Add field labels

Our feedback form will ask our users for their name, email address, and to leave some feedback.

We’ll use Labels for our input prompts. Drop three Labels Label icon into the page, and change their text to:

  • Name:
  • Email:
  • Feedback:
Dropping three Labels onto the page

Step 4: Add input components

Drop a TextBox TextBox icon into the page next to our “Name:” label. Then change the component name to name_box by clicking the component name in the Object Palette. Repeat this with another TextBox TextBox icon beside our “Email:” label and change its name to email_box. Finally, add a TextArea TextArea icon underneath our “Feedback:” label and rename it to feedback_box.

Dropping two TextBoxes and a TextArea onto the page

We’re changing the name of each user input component, to make it easier to identify them from code.

Step 5: Add submit button

Finally, we’ll drop a Button Button icon into the page. In the Properties Panel:

  • Change the name from ‘button_1’ to ‘submit_button’
  • Change the text from ‘button_1’ to ‘Submit’
  • Change the role to ‘primary-color’.
Adding a Button, and changing the text, role, and name using the Properties Panel

In chapter 3, we’ll connect our UI to our server function using client-side Python.

Chapter complete

Congratulations, you’ve just built a User Interface in Anvil! Your users can now enter feedback into your app.

In chapter 3, we’ll connect up our UI to our server function using client-side Python.