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.
First, name the app. Click on the name at the top of the screen and give it a name.
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:
Drop a Card , and a Label into the page.
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’.
Next, change the
role to Headline.
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 into the page, and change their
text properties to:
Step 5: Add input components
Drop two TextBoxes and a TextArea into the page for our user inputs, and rename them
We’re changing the name of each user input component, to make it easier to identify them from code.
In Chapter 2, we’ll set up a Data Table to store the data people enter.