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’.

Location of the Add Form button

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
Creating the name and content inputs for the ArticleEdit Form

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’.

setting a placeholder for the `category_box` dropdown

Our ArcticleEdit UI is now complete.

The final ArticleEdit UI design view.