Accès aux données Salesforce dans des applications hybrides

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

Utiliser la bibliothèque force.js pour accéder à l’API REST Salesforce depuis une application hybride
Utiliser les contrôleurs Apex pour accéder aux données Salesforce depuis une application hybride distante

Accès à l'API Salesforce avec Force.js

Lors de notre découverte de l’application ContactExplorer, vous avez pu observer la bibliothèque force.js. Elle fournit un vaste ensemble de fonctions permettant d’effectuer des opérations sur les enregistrements Salesforce. En plus des opérations de création, de suppression, de mise à jour et d'upsert, il prend en charge les requêtes SOQL, les recherches SOSL, les descriptions de métadonnées et la gestion des fichiers.

Vous pouvez télécharger force.js et d’autres bibliothèques JavaScript du kit de développement mobile à partir des référentiels GitHub SalesforceMobileSDK-Shared/libs et SalesforceMobileSDK-Shared/dependencies.

Bien que ce parcours s’intéresse aux applications locales hybrides, c’est-à-dire aux applications hybrides autonomes sur l’appareil mobile, vous pouvez également créer des applications distantes hybrides. Une application distante hybride charge les pages Visualforce depuis le serveur Salesforce, les reformate, puis les affiche sur les appareils mobiles. Le code source peut rester sur le serveur, ou être réparti entre le serveur et l’appareil.

Lors de la création d’une application distante hybride, le script forcehybrid vous invite à spécifier une Page de démarrage. Saisissez le chemin relatif de votre page de destination Visualforce, qui commence par /apex/. Par exemple, si l’adresse de votre page de destination est https://<NomMonDomaine>--<NomPackage>.vf.force.com/apex/BasicVFPage, saisissez /apex/BasicVFPage.

Premiers pas avec force.js et le kit de développement Mobile SDK

Pour commencer, chargez vos ressources en applications essentielles sur le Cloud Salesforce.

Créez un fichier d’archive, comme un fichier ZIP, qui contient cordova.js, force.js et toute autre ressource statique nécessaire à votre projet.
Dans Salesforce, chargez le fichier d’archive en cliquant sur Votre nom | Configuration de l’application | Développer | Ressources statiques.

Exemple de page Visualforce simple

Le code suivant montre une simple page Visualforce définie presque entièrement avec un code Apex et JavaScript. La logique suit le même plan que le code JavaScript ContactsApp. Elle charge force.js, initialise la session, puis transmet une requête SOQL à la méthode asynchrone force.query(). Si la requête réussit, l’application affiche le premier champ Nom récupéré dans une balise HTML <span>.

<apex:page docType="html-5.0" sidebar="false" showHeader="false" 
    contentType="text/html" applyHtmlTag="false" applyBodyTag="false" 
    standardStylesheets="false" cache="true">
<html>
    <head>
      <meta charset="utf-8"></meta>
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"></meta>
      <apex:includeScript value="{!URLFOR($Resource.Easy, 'cordova/cordova.js')}"  />
      <apex:includeScript value="{!URLFOR($Resource.Easy, 'libs/force.js')}"  />
      <script>
(function() {
    /* Do login */
    force.login(
        function() {
            console.log("Auth succeeded"); 
            showUsersList();
        },
        function(error) {
            console.log("Auth failed: " + error); 
        }
    );
    /* This method will render a list of users from current salesforce org */
    var showUsersList = function() {
        fetchRecords(function(data) {
            var users = data.records;
            var listItemsHtml = '';
            for (var i=0; i < users.length; i++) {
                listItemsHtml += ('<li class="table-view-cell"><div class="media-body">' + 
                    users[i].Name + '</div></li>');
            }
            document.querySelector('#users').innerHTML = listItemsHtml;
        })
    }
    /* This method will fetch a list of user records from salesforce. 
    Just change the soql query to fetch another sobject. */
    var fetchRecords = function (successHandler) {
        var soql = 'SELECT Id, Name FROM User LIMIT 10';
        force.query(soql, successHandler, function(error) {
            alert('Failed to fetch users: ' + error);
        });
    };
})();
      </script>
    </head>
    <body>
      <header>
         <h1>Hello, Visualforce!</h1>
      </header>
        <!-- Placeholder to add users list -->
      <ul id="users">
      </ul>
      <p>Welcome to Mobile SDK.</p>
    </body>
</html>
</apex:page>

Utilisation des contrôleurs Apex dans une application hybride distante

Avec les applications hybrides distantes, vous accédez généralement aux données Salesforce par le biais d’une page Visualforce et de son contrôleur Apex associé. Si votre page Visualforce contient un code JavaScript, ce code peut interagir et partager des données avec le contrôleur Apex côté serveur.

Apex prend en charge les deux modes d'invocation de méthodes de contrôleur Apex depuis JavaScript suivants :

Les deux techniques utilisent une requête AJAX pour invoquer les méthodes de contrôleur Apex directement depuis JavaScript. Le code JavaScript doit être hébergé sur une page Visualforce.

Par rapport à apex:actionFunction, JavaScript Remoting offre plusieurs avantages.

Il propose plus de flexibilité et de meilleures performances que apex:actionFunction.
Il prend en charge les paramètres et les types de retour dans la méthode de contrôleur Apex, avec un mappage automatique entre les types Apex et JavaScript.
Il utilise un modèle de traitement asynchrone avec rappels.
Contrairement à apex:actionFunction, la requête AJAX n’inclut pas l’état de vue de la page Visualforce. Cela se traduit par un aller-retour plus rapide.

Comparé à apex:actionFunction, en revanche, JavaScript Remoting vous oblige à écrire davantage de code.

L’exemple suivant insère le code JavaScript dans une balise <script> sur la page Visualforce. Ce code appelle la méthode invokeAction() sur l’objet de gestionnaire à distance Visualforce. Il transmet à invokeAction() des métadonnées nécessaires pour appeler une fonction intitulée getItemId() sur l’objet de contrôleur Apex objName. Comme invokeAction() s’exécute de manière asynchrone, le code définit également une fonction de rappel pour traiter la valeur renvoyée par getItemId(). Dans le contrôleur Apex, l’annotation @RemoteAction expose la fonction getItemId() au code externe JavaScript.

//Visualforce page code
<script type="text/javascript">
     Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.MyController.getItemId}',
        objName,
        function(result, event){
            //process response here
        },
        {escape: true}
    );
<script>
//Apex Controller code
@RemoteAction
global static String getItemId(String objectName) { ... }

Dans la méthode getItemId(), par exemple, vous pouvez appeler une API Salesforce et capturer la valeur renvoyée dans JavaScript.