215 lines
5.8 KiB
ReStructuredText
215 lines
5.8 KiB
ReStructuredText
:banner: banners/mobile.jpg
|
|
:types: api
|
|
|
|
.. _reference/mobile:
|
|
|
|
==================
|
|
Mobile JavaScript
|
|
==================
|
|
|
|
Introduction
|
|
============
|
|
|
|
In Odoo 10.0 we released a mobile app, allows you to access all **Odoo apps**
|
|
(even your customized modules).
|
|
|
|
The application is a combination of **Odoo Web** and **Native Mobile
|
|
components**, in other words it is a Odoo Web instance loaded inside native
|
|
WebView container of mobile.
|
|
|
|
This page documents how you can access mobile native components like Camera,
|
|
Vibration, Notification, Toast through Odoo Web (via JavaScript). For this, you
|
|
do not need to be a mobile developer, if you know Odoo JavaScript API you can
|
|
access all available mobile features.
|
|
|
|
.. warning:: These features work with **Odoo Enterprise 10.0+** only
|
|
|
|
How does it work?
|
|
=================
|
|
|
|
Internal working of Mobile application:
|
|
|
|
.. image:: images/mobile_working.jpg
|
|
|
|
Of course, it is a web page that loads on a Mobile Native Web container. But it
|
|
is integrated in such a way that you can access native resources from your web
|
|
JavaScript.
|
|
|
|
WebPages (Odoo Web) is on the top of each layer, where second layer is a Bridge
|
|
between Odoo Web (JS) and Native component of mobile.
|
|
|
|
When any call from JavaScript triggered it passes through Bridge and Bridge
|
|
pass it to native invoker to perform that action.
|
|
|
|
When the native component has done their work, it again is passed to Bridge and
|
|
you get the output in JavaScript.
|
|
|
|
Process time taken by the Native component depends on what you are requesting
|
|
from Native resources. Like Camera or GPS Location.
|
|
|
|
How to use it?
|
|
==============
|
|
|
|
As Odoo Web Framework, Mobile api can be used anywhere by getting object of
|
|
**web_mobile.rpc**
|
|
|
|
.. image:: images/odoo_mobile_api.png
|
|
|
|
Mobile rpc object provide list of methods available (Works only with Mobile
|
|
App).
|
|
|
|
Just check for method availability and execute it.
|
|
|
|
Methods
|
|
-------
|
|
|
|
.. note:: Each of the methods returns JQuery Deffered object with returning
|
|
data JSON dictionary
|
|
|
|
Show Toast in device
|
|
.....................
|
|
|
|
.. js:function:: showToast
|
|
|
|
:param object args: **message** text to display
|
|
|
|
A toast provides simple feedback about an operation in a small popup. It only
|
|
fills the amount of space required for the message and the current activity
|
|
remains visible and interactive
|
|
|
|
.. code-block:: javascript
|
|
|
|
mobile.methods.showToast({'message': 'Message sent'});
|
|
|
|
.. image:: images/toast.png
|
|
|
|
|
|
Vibrating device
|
|
................
|
|
|
|
|
|
.. js:function:: vibrate
|
|
|
|
:param object args: Vibrates constantly for the specified period of time
|
|
(in milliseconds).
|
|
|
|
Vibrate mobile device with given duration.
|
|
|
|
.. code-block:: javascript
|
|
|
|
mobile.methods.vibrate({'duration': 100});
|
|
|
|
Show snackbar with action
|
|
.........................
|
|
|
|
.. js:function:: showSnackBar
|
|
|
|
:param object args: (*required*) **Message** to show in snackbar and action **button label** in Snackbar (optional)
|
|
:returns: ``True`` if User click on Action button, ``False`` if SnackBar auto dismissed after some time
|
|
|
|
Snackbars provide lightweight feedback about an operation. They show a brief
|
|
message at the bottom of the screen on mobile and lower left on larger devices.
|
|
Snackbars appear above all other elements on screen and only one can be
|
|
displayed at a time.
|
|
|
|
.. code-block:: javascript
|
|
|
|
mobile.methods.showSnackBar({'message': 'Message is deleted', 'btn_text': 'Undo'}).then(function(result){
|
|
if(result){
|
|
// Do undo operation
|
|
}else{
|
|
// Snack Bar dismissed
|
|
}
|
|
});
|
|
|
|
.. image:: images/snackbar.png
|
|
|
|
Showing notification
|
|
.....................
|
|
|
|
.. js:function:: showNotification
|
|
|
|
:param object args: **title** (first row) of the notification, **message** (second row) of the notification, in a standard notification.
|
|
|
|
A notification is a message you can display to the user outside of your
|
|
application's normal UI. When you tell the system to issue a notification, it
|
|
first appears as an icon in the notification area. To see the details of the
|
|
notification, the user opens the notification drawer. Both the notification
|
|
area and the notification drawer are system-controlled areas that the user can
|
|
view at any time.
|
|
|
|
.. code-block:: javascript
|
|
|
|
mobile.showNotification({'title': 'Simple Notification', 'message': 'This is test of simple notification'})
|
|
|
|
.. image:: images/mobile_notification.png
|
|
|
|
|
|
Create contact in device
|
|
.........................
|
|
|
|
.. js:function:: addContact
|
|
|
|
:param object args: Dictionary with contact details. Possible keys (name, mobile, phone, fax, email, website, street, street2, country_id, state_id, city, zip, parent_id, function and image)
|
|
|
|
Create device contact with given contact details.
|
|
|
|
.. code-block:: javascript
|
|
|
|
var contact = {
|
|
'name': 'Michel Fletcher',
|
|
'mobile': '9999999999',
|
|
'phone': '7954856587',
|
|
'fax': '765898745',
|
|
'email': 'michel.fletcher@agrolait.example.com',
|
|
'website': 'http://www.agrolait.com',
|
|
'street': '69 rue de Namur',
|
|
'street2': false,
|
|
'country_id': [21, 'Belgium'],
|
|
'state_id': false,
|
|
'city': 'Wavre',
|
|
'zip': '1300',
|
|
'parent_id': [8, 'Agrolait'],
|
|
'function': 'Analyst',
|
|
'image': '<<BASE 64 Image Data>>'
|
|
}
|
|
|
|
mobile.methods.addContact(contact);
|
|
|
|
.. image:: images/mobile_contact_create.png
|
|
|
|
Scanning barcodes
|
|
..................
|
|
|
|
.. js:function:: scanBarcode
|
|
|
|
:returns: Scanned ``code`` from any barcodes
|
|
|
|
The Barcode API detects barcodes in real-time, on device, in any orientation.
|
|
|
|
It reads the following barcode formats:
|
|
|
|
* 1D barcodes: EAN-13, EAN-8, UPC-A, UPC-E, Code-39, Code-93, Code-128, ITF, Codabar
|
|
* 2D barcodes: QR Code, Data Matrix, PDF-417, AZTEC
|
|
|
|
.. code-block:: javascript
|
|
|
|
mobile.methods.scanBarcode().then(function(code){
|
|
if(code){
|
|
// Perform operation with code scanned
|
|
}
|
|
});
|
|
|
|
Switching account in device
|
|
...........................
|
|
|
|
.. js:function:: switchAccount
|
|
|
|
Use to switch device account.
|
|
|
|
.. code-block:: javascript
|
|
|
|
mobile.methods.switchAccount();
|
|
|
|
.. image:: images/mobile_switch_account.png
|