Innovation Hub
An initiative by Al Bayat Mitwahid in UAE
Course 2
Making an “Memory Stream” app
Create a working app prototype where users can create posts about things that are important to them. You will create functions that let users sign in, write and save posts, and view their saved items.
Unit 1 – Idea generation and setup
Lesson 4 – Adding Components
In this lesson we will add all the components we need for each screen.
1. On the Activities screen:
Add a form to create new entries into the Activities Collection. Click the plus symbol, select the form component and position it on the left side of the screen. On the left menu, under Which Data Collection, select the Activities collection from the list.
You will already have an Events list that comes with the template we used when you created the screen. We will edit this to display the correct information from the database.
​
Click on the list and go to “What is this a list of?” on the left menu. Select “Activities” from the drop down menu. On the filter menu, choose “Logged in user > Activities” so that a user only sees their own list, not everybody’s list.
Now double click the text in the first row of the list. The text box will turn yellow - changing the size and contents of this text will change all the entries in the list. Go to the left menu and remove the text in the box. Click the palette icon to insert magic text. Select “Current Activity’s…” and then “Type of Activity'' from the menu. You will notice that all the other rows in the list change to look the same as the top row.
​
Do the same thing for Notes, Number of Minutes and Date.
2. On the Ideas for 3D Printing screen:
Add a form to input an 3D printing idea, in the same way as the previous screens.
​
Add a Card List from the components menu. Edit the card on the left menu, adding magic text to display all the properties in the Ideas for 3D Printing collection.
3. On the Books to Read screen:
Edit the text in the top section of the page to describe the function of that page.
Add a form to input a book recommendation, in the same way as the previous screen.
Click on the list and go to “What is this a list of?” on the left menu. Select “Books to Read”. On the filter menu, choose “Logged in user > Books to Read”
Edit the list to show the book titles and plots. You will also need to add a new text box to show the “Recommended by” field. To do this, click the plus symbol and select the text component. Position it inside the top row of the list. The text box should turn yellow, and be repeated on all the rows of the list. Use the magic text button to add the Recommended by field.
​
​Edit the text boxes at the top of the screen to describe how to use the page.
4. On the Creative Writing Notes screen:
Add a form to input a writing note, in the same way as the previous screens.
Add a Custom List from the components menu. Edit the list on the left menu, adding magic text to display the properties in the Creative Writing Note collection.
The last thing to do in this lesson is to add a way to show more details about something in each list. In the last course we added a modal page so that a user could see more details about each restaurant. Go to each list and decide which ones need a modal screen to show more details.
To add a modal, click on the list that you want to open. On the left hand menu, under Advanced Options, click “Add Action”. Select “Link”, then click on “New Screen”. Find the “Modal” option in the Create section and add a name at the top. Click Create Screen.
You will now have an extra screen that contains the modal popup. Edit that screen so that it displays all the information about the type of item you are showing. You will have to use magic text and an image component. Adalo automatically adds buttons that bring you back to the last screen.
That’s it! You now have the screens, collections and components to make your app work. In the next unit we will refine the working of each element, and add details to make it a better user experience.
