Looking for the new OutSystems Now? Click here!
 Features > Add a Contact to Your Device
Add a Contact to Your Device
Use the AddContact plugin of OutSystems Now to save a contact from your application to the Contacts of a mobile device.
In this example we’ll extend a screen of our Sales Mobile App that displays a contact, by adding the possibility of saving it directly to the mobile device address book. This will allow salespeople to have the information they need, when they need it.
Our initial Contact screen looks like this: 
To implement the new feature, follow these steps:
1. Ensure that the OutSystems Now component of the Forge is installed. Learn how to install a component from the Forge;
2. In your application module, create a reference to the following elements of the OutSystemsNow module: AddContact and IsUsingOutSystemsNowApp;
3. Add a button below the contact details, name it ‘AddToDeviceContacts’.
Set its label with the text ‘Add to device contacts’.
Set the Method property to ‘Navigate’.
As Destination set an External Site with the dynamic URL value of “#”. This means, the button will navigate to the top of the screen;
4. Add an AddContact web block next to the button. Its ButtonId parameter receives the id of the AddToDeviceContacts button. The other parameters receive the contact details that are displayed on the screen. In our case the contact information comes from a Form widget;
5. Enclose the AddToDeviceContacts button and the AddContact web block in an If, set the condition to IsUsingOutSystemsNowApp().
This ensures that the button is only displayed when the user is accessing the page from OutSystems Now;
6. Add an OnChange action to the first input field of the Contact form. In the action flow, add an Ajax Refresh element to refresh the AddToDeviceContacts button. This is necessary because if the user edits the contact, the button needs to receive the up-to-date data, as it is the component that will store it in the device’s address book; 
7. Set the action you created in the previous step as OnChange Destination in every input field that you use in the MyAddContact web block.
After completing the above steps, we have the ‘Add to device contacts’ button in our application:
Tapping the ‘Add to device contacts’ button saves the contact to our device address book:
How does it work?
When the page loads, the AddContact web block adds some JavaScript to the HTML code of the page. When you tap the button, the application first executes the JavaScript which saves the contact. Then it executes the navigation defined in the button properties. In our case it jumps to the top of the page as the “#” value in the URL property indicates.

Note that it’s not supported to add any other logic to the button, as it interferes with the execution of the JavaScript.

As you can see in the above steps, we refresh the button every time the user types a new value into the input fields. The reason for this is, that those values are used in the JavaScript of the button. However, the JavaScript receives them when the page is rendered. If the user types a new value, the JavaScript still has the old values, hence we need to refresh it.
 To learn more about the Cordova plugin, check the plugin documentation and source code.
Click here to see your activities