Looking for the new OutSystems Now? Click here!
 Features > Take a Picture in Your Application
Take a Picture in Your Application
Use the TakePicture plugin of OutSystems Now to capture photos from the mobile application. There's no need to make them switch between several applications to do this.
Consider an application that allows you to report a car accident right from your mobile phone. Let’s add the capability of adding photos of the accident using the phone’s camera.
Our initial 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: TakePicture and IsUsingOutSystemsNowApp.
Additionally make sure that you reference the Base64ToBinary action of the BinaryData extension; 
3. Add a button above the Save button, name it ‘TakeAPic’.
Set its label with the text ‘Take a picture’.
Set the Method property with ‘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 a local variable of Text type to the screen, name it PhotoVar;
5. Add an Input widget to the screen, name it PhotoInput, and bind its Variable property to PhotoVar;
6. Add a TakePicture web block to the screen, set it’s ‘ButtonId’ agument with TakeAPic.Id, and the ‘InputId’ argument with PhotoInput.Id;
7. To display the photo the user takes, add any image to the screen and name it Photo. In our example we use an image saying ‘No picture available yet’.
After the user takes the photo , it will be shown here in place of this default image;
8. Add an Extended Property called onchange to the PhotoInput, with the following value:
"$('#" + Photo.Id + "').attr('src', 'data:image/jpeg;base64,' + $('#" + PhotoInput.Id + "').val());" 
When the user takes the photo, the Input receives the photo data. This event triggers the onchange event, runs the script defined for it, which updates the image with the photo loaded in the input field.
9. Enclose the Photo, the PhotoInput, the TakeAPic button and the TakePhoto web block in an If, and set the condition to IsUsingOutSystemsNowApp();
10. Modify the existing Save button’s action to save the picture together with the AccidentReport record. Use the Base64ToBinary(PictureVar) value. 
After completing the above steps, we have the ‘Take a picture’ button in our application:
Tapping the ‘Take a picture’ button calls the device camera, and when the photo is taken, it is displayed on your screen:
Note: If you use this screen to display not only new but existing records as well, you need to add logic to the screen to load the image.
How does it work?
When OutSystems Now loads the screen, the TakePicture 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 event to the calendar. 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 script that the TakePicture web block adds.
When the user takes the photo, the button loads it to the input field. This triggers its onchange event with the script, which updates the image on the screen.
 To learn more about the Cordova plugin, check the plugin documentation and source code.
Click here to see your activities