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.
Step 2: Add components
Drop a Button into the page. Our users will click this button when they want to add a new news article:
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’.
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.
role to ‘primary-color’.
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:
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).
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:
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
- Content: TextArea, rename this
- Category: DropDown, rename this
- Image: FileLoader, rename this
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’.
Our ArcticleEdit UI is now complete.
We’ve constructed a UI to Create and Update articles. Nice work!
In Chapter 3 we’ll write a few lines of client-side Python to populate that ‘categories’ dropdown from the database.