Building a No-Code Mobile App with Adalo (Part 2)

Part 1  covered signing up with Adalo, creating a blank mobile native app, setting up the database, and starting to work on the different screen displays for the app. At that point there were two screens, a "Home" screen that would act as a main menu and an "Add Item" screen that was still empty. The last thing I did in Part 1 was to add a button on the home screen that transferred control to the "Add Item" screen if it was clicked.

Special Note: It's fairly easy to accidentally delete a component or entire screen in Adalo. You can usually back up and recover from a mistake like that by pressing the CTRL (CMD on a MAC) and "Z" keys to undo your last action (you may have to do that more than once if you don't catch the mistake right away).

The next step is to add the components to the "Add Item" screen so the user can enter the data for a new item: the item keyword(s), the date the record was added, a target date (if any), a description, and a reference (such as a URL). To do I went through these steps:

• First, I added an "app bar" to provide navigation and a place for a screen title. With the "Add Item" screen selected, click on "+Add Component" and drag and drop an app bar onto the screen. Note: A left icon (a left-pointing arrow) is added to the app bar automatically to allow the user to navigate back to the previous screen.
• Next, I found the "Form" component under "Forms & Fields" and added it: 

• Then I connected the "Form" component to the Items collection. Once that was done a form wiith each of the fields in the Items database record displayed on the "Add Items" screen:
  
  
  
• Each field has a label and some placeholder text inside the input box. I didn't need both the label and the input hint, so I went to the left side of the window, selected "> Fields", and selected each field in turn and removed the placeholder text. That helped "clean up" the screen a little, by removing unnecessary text (although, if you had another line or two to fit on one screen you might want to remove the labels instead and gain some vertical space).
• Each field also has an option as to whether or not it's a required field. Since the keyword(s) and the description are the only fields that are absolutely necessary, I changed the option on the others to "not required".
• A "Submit" button is also added as part of the form and you can choose whether to have the app loop back to add another item or return to the home screen after the submit button is clicked. In this case, I had the app flip back to the home screen since I wasn't going to be entering a bunch of records at one time. Note: You can also exit the screen at any time by clicking on the left arrow in the app bar.

Now I had a way to add new items to the database, so the next step was to be able to display existing records and update or delete them. I decided start by going back to the home (main menu) screen and adding another button titled "List Items" that would take the user to a new screen. 

I'll go through that process in Part 3 of this post...