Odoo 10.0 introduced a remarkable mobile app that grants users access to all Odoo apps, including customized modules, right on their mobile devices. The app seamlessly combines Odoo Web and Native Mobile components, delivering a unified user experience. In this blog post, we will explore how you can harness the power of the Mobile API with JavaScript to access mobile native components such as Camera, Vibration, Notification, Toast, and more, directly from within Odoo Web.
A Web Page in a Mobile Native Web Container
The mobile application loads as a web page within a Mobile Native Web container. However, it's cleverly integrated, allowing you to access native resources through JavaScript. This integration involves a Bridge layer that acts as an intermediary between Odoo Web (JS) and the native mobile components.
When you trigger a call from JavaScript, it passes through the Bridge, which then forwards the request to the appropriate native invoker to perform the action. Once the native component completes its task, the result is passed back to the Bridge, and you get the output in JavaScript. Depending on the requested Native resources, the processing time may vary—for instance, accessing the Camera or GPS Location might take longer.
Utilizing the Mobile API
To interact with these mobile native components, you can use the Mobile API provided by the web_mobile.rpc object. The API offers a list of methods that are available exclusively for use within the mobile app. Let's take a look at some of the essential methods and how to use them:
1. Show Toast in the Device
A Toast is a simple and non-intrusive popup that provides feedback about an operation. It occupies only the required space for the message, allowing the user to interact with the current activity while the Toast is visible.
mobile.methods.showToast({'message': 'Message sent'});2. Vibrating Device
This method allows you to vibrate the mobile device for a specified duration in milliseconds.
mobile.methods.vibrate({'duration': 100});3. Show Snackbar with Action
A Snackbar is a lightweight way to provide feedback, showing a brief message at the bottom of the screen (or lower left corner on larger devices). You can also include an action button in the Snackbar.
mobile.methods.showSnackBar({'message': 'Message is deleted',
'btn_text': 'Undo'}).then(function(result){
if(result){
// Do undo operation
}else{
// Snack Bar dismissed
}
});4. Showing Notification
This method allows you to display a system-controlled notification outside of your application's normal UI. You can set the title and message for the notification.
mobile.showNotification({'title': 'Simple Notification', 'message':
'This is a test for a simple notification'})5. Create Contact in Device
You can use this method to create a new device contact with specific details such as name, mobile number, phone, email, etc.
var contact = {
'name': 'Michel Fletcher',
'mobile': '9999999999',
// Other contact details...
}
mobile.methods.addContact(contact);6. Scanning Barcodes
This method enables real-time barcode detection on the device, supporting various formats like EAN-13, QR Code, Data Matrix, and more.
mobile.methods.scanBarcode().then(function(code){
if(code){
// Perform operation with the scanned code
}
});7. Switching Account on a Device
Finally, you can use switchAccount() to switch between different accounts on the device.
mobile.methods.switchAccount();
Odoo's mobile app offers seamless integration of Odoo Web and Native Mobile components, providing access to native resources through JavaScript. By leveraging the Mobile API, you can easily incorporate features like Toasts, Vibrations, Notifications, and Barcode Scanning into your Odoo applications, enhancing the mobile user experience. If you're using Odoo Enterprise 10.0 or later, give these mobile native components a try and take your Odoo app to the next level!
We hope this blog post helps you explore the exciting possibilities of accessing the Mobile API in Odoo.