Chapter 1:
Build your user interface

Let’s start by building your UI using Anvil’s drag-and-drop editor.

Step 1: Create an app

Log in to Anvil and click ‘Blank App’. Choose the Material Design theme.

Location of the Create App button

First, name the app. Click on the name at the top of the screen and give it a name.

Rename your app by clicking on the title

Step 2: Add the first components

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, you’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 3: Change component properties

Below the Toolbox, you’ll see the Properties Panel, where you edit the styling and behaviour of your components.

Select the Label you just added to the page, and change the text to ‘Feedback Form’.

Location of the 'text' property in the Properties Panel

Next, change the role to Headline.

Changing the 'role' property in the Properties Panel

Step 4: 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 properties to:

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

Step 5: Add input components

Drop two TextBoxes TextBox icon and a TextArea TextArea icon into the page for our user inputs, and rename them name_box, email_box and 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 6: Add submit button

Finally, 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 2, we’ll set up a Data Table to store the data people enter.

Chapter complete

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

In chapter 2, you’ll create a database table to store the feedback.