Chapter 2:
Build your user interface

Let’s build your UI using Anvil’s drag-and-drop editor.

Step 1: Rename your Form

Click on ‘Form1’ in the panel on the left. You will see your app in the centre of the screen.

‘Forms’ are the pages that make up your Anvil app. Form1 was automatically created when you created your app, and will act as your homepage.

Rename it ‘Homepage’ by clicking on the dropdown next to Form1 in the panel on the left.

Mark Complete Mark Incomplete

Step 2: Add components

We construct the UI by dragging-and-dropping components from the Toolbox into the page.

Drop a Button into the page. Our users will click this button when they want to add a new news article:

Mark Complete Mark Incomplete

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 Button you just added to the page, and change the text to ‘Add an article’.

The Properties panel with 'add an article' in the 'text' property.

Next, change the Button’s name. Click on the red text that says self.button_1 at the top of the Properties Panel, and change it to add_article_button. We’re changing the name of our Button to make it easier to identify from code.

The Properties panel with 'add_article_button' in the 'name' property.

Change the role to ‘primary-color’.

The Properties panel with 'primary-color' in the 'role' property.

Then, in the ‘Icon’ section of the Properties Panel, add an icon to the Button by clicking the . This allows you to search for an icon to use. I’m using plus-circle in this example.

With those changes applied to its properties, the Button looks like this:

The final button, with text added, blue background, and icon.

Mark Complete Mark Incomplete

Step 4: Add a create/update Form

Next, we’ll build the UI for Creating and Updating news articles. We can save work by using the same UI and code for both! (We talk about this more in our CRUD best-practice guide.)

Add a new Form by clicking the ‘+’ icon to the right of ‘Client Code’ in the App Browser and selecting ‘Add Form’.

Choose the ‘Blank Panel’ template, and rename the Form ‘ArticleEdit’ (in accordance with our recommended naming convention).

Choosing a template when creating a new Form

Our ArticleEdit Form will ask our users for the ‘name’, ‘content’, ‘category’ and ‘image’ for each article they want to add to the Data Table (we’ll add the ‘created’ and ‘updated’ columns programmatically).

We’ll use Labels for our input prompts. Drop four labels into the page, and change their text properties to:

Title:
Content:
Category:
Image:

Creating the name and content inputs for the ArticleEdit Form

We’ll then need user input components for each of these. Drop these components into the page, renaming them as you go:

Title: TextBox, rename this title_box
Content: TextArea, rename this content_box
Category: DropDown, rename this category_box
Image: FileLoader, rename this image_uploader

We’re changing the name of our user input components to make it easier to identify them from code.

We’ll also add a placeholder to our DropDown. Select the DropDown you just added, check the ‘include_placeholder’ box, and set the placeholder to ‘choose category’.