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

Part 2 covered creating the screen to add new items. The final part of this app allows the user to list the records in the database and to update or delete selected records. 

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

After I added the "List Items" button to the home screen I needed to link it to a new screen that would list all the current records in the Items database. I added a "Link" action so that clicking the button would take the user to a new screen: 

Then I followed these steps to finish building the list and edit/delete screens:

• Once I selected to link to a new screen, Adalo displayed a pop-up with the "new screen" setup information: 
  
  
  
• You can choose different types of screens to create (blank, form, etc.). In this case, I chose a blank screen with an app bar, and added a simple list component to display the item records: 

  

  
  
• You can display two fields from each record. The first or "Title" field is the primary key for your records, which in this case is the keyword(s) field. The second or "Subtitle" field is optional, but I set mine to display the "Date added". To do that I scrolled down to "Subtitle" in the property manager, removed the placeholder text, and used the "magic text" icon (the red capital "T") to connect the subtitle line to the Date Added field in the database records. 
• Quick note: "Magic text" can be used to link fields from one screen to components on a different screen or from one database to another.
• I also wanted the user to be able to search for a certain record by entering one or more keywords, so I added a text input field just above the simple list component and named it "Search". 
• Next, I selected the list component and selected to add a new, custom filter that would display only those records where the keyword(s) contained the text entered in the input box: 

  
• Now I had a list showing the keywords and date added for each item in my database and I had the ability to search for a specific item, but I needed to be able to select a record and display it on a different screen where the user could view it, update it or delete it. 
• The easiest way to create a screen to display an item record was to copy the "Add Item" screen and modify it. To do that I clicked on the "Screens" icon on the left side of the window, selected the "Add Item" screen, and pressed the CTRL and "C" keys to copy it. Then I clicked on the open space next to the Add Items screen and pressed the CTRL and "V" keys to paste the copy onto the design area.
• Once the item detail screen had been created, I clicked on "Form" in it's properties manager and selected to "update the current item" (meaning the item record currently selected on the Item List screen): 
  
• That provides all the necessary functions for the app, except for the ability to delete a record. Rather than set up another screen to do that I placed a second button below the "Update Item" button and added two actions to take place if the button is clicked: one action to delete the record being displayed and another action to transfer control back to the "List Items" screen: 

  

  
  

The actual screens for this (very basic) app look like this: 

Home Screen

Add Item 

List Items

Item Details 

Of course, there are more features available in Adalo, but this should give you a basic idea of how to build a mobile app with Adalo. Here's the URL of the app if anyone wants to try it out:

https://previewer.adalo.com/d21385ed-2e5d-47d0-bb2b-14c4f7c1c112