Creating a Notepad App in Adalo

By Soliudeen Ogunsola

This tutorial was brought to you by Soliudeen Ogunsola

In this tutorial, you will learn how to build a Notepad app in Adalo. Adalo allows you to build apps on an intuitive drag-and-drop interface, either by using pre-made design elements or by creating your own. It takes the headache out of publishing your apps to the Android or Apple stores — with a subscription plan, it allows you to easily publish your apps.

Adalo

When you’re finished, you should have a solid knowledge to create apps with features such as:

  • Basic understanding of how forms work in Adalo.
  • A list component that syncs across devices when new data has been added.
  • Linking to a new screen with a button component in Adalo.
Adalo

Setting up the app Database

1. Create a new database collection,

2. Set the name to ‘Notes’

3. Add a new property as content.

Adalo

Customizing the App

  1. Create a new app in Adalo, set the app name as Notepad App, select a blank template and choose the brand color of your choice.
Adalo

2. Add a new screen with an app bar, name the screen ‘Notes’, disable the left icon on the app bar.

Adalo

3. Add a new custom list and drag-and-drop into the app screen you created earlier. Set the custom list component to be the list of notes in the database, delete the title text label in the custom list and leave the subtitle text label since its only property available in the database which is the content property.

Adalo

4. Set the item spacing of the custom list component to 14 and open the style editor to change the font size of the subtitle text label so as to make it readable and bigger.

Adalo

5. Link the subtitle text component with the content property in the database through the magic text icon with the Current Notes > Content parameter.

Adalo

6. Add a toggle button component, set it to link to a new screen with form and name the new screen as ‘New Note’.

Adalo

7. Link the form database collection to ‘Notes’ and change its action to ‘Create New Note’.

Adalo

8. Change the form field label to ‘No notes’ and the placeholder text for: ‘Enter your notes… ‘ and also the input type to multi-line so as to ensure it contains as more contents as possible.

Adalo

9. Preview your app for testing and share it with your family and friends.

Demo: https://previewer.adalo.com/3a00b6a6-ef70-45b0-9f54-f2ab2f985708

Adalo

Conclusion

In this tutorial, you have learned how to build a notepad app in Adalo without writing a single line of code.

With Adalo, you can easily create visually stunning apps using drag and drop expert-designed components or make your own in which you’re in complete control of the design.