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.