Jul 13, 2022·1 min read

Creation of a Mobile Application that Adds a User Contact According to the Specified Parameters.

Learn how to add new contacts to the address book in mobile applications.

Creation of a Mobile Application that Adds a User Contact According to the Specified Parameters.

A variety of business process blocks in AppMaster allow you to build a variety of logic in mobile and web applications. This article considers an example of a simple mobile application that creates a user contact according to the specified parameters. Most of the application settings are omitted and not presented in detail in this article (such as setting the onLaunch trigger).

The main logic is implemented using the pre-installed Add contact business process block.

  • Name [string];
  • Phone number [phone]
  • Email [email]
  • Position [string]
  • Company [string]
  • Birthday [date]

First, you need to install the Mobile apps module in your application. This module is located in the Modules section.

After installing the module, go to the mobile app designer tab and remove all auto-generated screens, except for the Sign In Screen. The authorization business process is generated. You can read about customizing the authorization business process at this link.

Next, an empty screen (View) is created and filled with functional elements. Text Field for Name; Phone Field for a Phone number; Email field for Email and Date Picker for Birthday. The interface looks like this:

The logic for adding a contact is a business process that starts with the onTap trigger of the Add contact button and looks like this:

  • InputString Get Properties - gets the name value (Name) from the Text Field widget;
  • InputEmail Get Properties - gets the email value (Email) from the Email Field widget;
  • InputPhone Get Properties - gets the phone number (Phone number) from the Phone Field widget;
  • Datepicker Get Properties - gets the birthday date (Birthday) from the Date Picker widget;
  • Add Contact - receives input values from the above inputs and creates a contact on the user's smartphone.

The last thing left is to set up navigation when loading the app. Navigation is configured using the launch trigger in the Triggers & Actions section.

Navigation is done using the Navigate block. The Navigation type at application startup (onLaunch) must always be root. In our example, the user must first go to the Sign In screen, so this screen is specified in the Screen property of the Navigate block.

Don't also forget to edit the authorization business process so that in case of successful authorization, the Screen property of the Navigate block points to the screen we created for adding a contact to the user's address book.

Thus, in this article, the principle of using the Add Contact block in mobile applications to add new contacts to the user's address book was considered.

FAQ

What do I need before building the contact app?

Install the Mobile apps module from the Modules section before you start. It adds the mobile app designer and the tools needed to build the contact screen.

Which mobile screens should I keep?

Keep the Sign In Screen and remove the other auto-generated screens. Then create an empty View for the form where users enter contact details.

Which fields should the contact form include?

Use a Text Field for the name, a Phone Field for the phone number, an Email Field for email, and a Date Picker for the birthday. Add fields for position and company if your form needs them.

What starts the contact-creation process?

Attach the process to the Add contact button's onTap trigger. This makes the app read the form values only when the user taps the button.

How does the Add Contact block get the form values?

Each input widget uses its Get Properties block to pass its current value into the process. Connect the name, email, phone number, and birthday outputs to the matching Add Contact inputs.

Where does the new contact get saved?

The Add Contact block creates the contact in the user's smartphone address book. It does not only save the data inside the app.

How should navigation work when the app opens?

Set the onLaunch Navigate block to use the root navigation type. Point its Screen property to the Sign In Screen so users begin with authorization.

What should happen after a user signs in?

Update the successful authorization path in the authorization business process. Its Navigate block should point to the contact form screen after the user signs in.

How can I test that the contact is added correctly?

Check that every form widget connects to the matching Add Contact input, then test the app on a mobile device. Enter a sample contact and confirm it appears in the device address book.

Can I build this contact app without coding?

You can build the form and business process visually in AppMaster without writing the app logic by hand. AppMaster generates the mobile application code when you build and publish the project.

Easy to start
Create something amazing

Experiment with AppMaster with free plan.
When you will be ready you can choose the proper subscription.

Get Started