Zugriff auf Salesforce-Daten in hybriden Anwendungen

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

Verwenden der force.js-Bibliothek für den Zugriff auf die Salesforce REST-API ausgehend von einer hybriden Anwendung
Verwenden von Apex-Steuerfeldern für den Zugriff auf Salesforce-Daten ausgehend von einer hybriden Remote-Anwendung

Zugriff auf die Salesforce-API mit force.js

In unserer Erkundung der ContactExplorer-Anwendung wurde die Funktionalität der force.js-Bibliothek vorgestellt. Diese Bibliothek stellt eine umfangreiche Auswahl von Funktionen für die Durchführung von Vorgängen für Salesforce-Datensätze zur Verfügung. Neben dem Erstellen, Löschen, Aktualisieren und Einfügen werden SOQL-Abfragen, SOSL-Suchen, Metadatenbeschreibungen und Dateiverwaltung unterstützt.

Sie können force.js und die anderen Mobile SDK JavaScript-Bibliotheken aus den GitHub-Repositories SalesforceMobileSDK-Shared/libs und SalesforceMobileSDK-Shared/dependencies herunterladen.

Obwohl sich dieser Trail hauptsächlich mit hybriden lokalen Anwendungen befasst, d. h. eigenständige hybride Anwendungen auf dem mobilen Gerät, können Sie auch hybride Remote-Anwendungen erstellen. Eine hybride Remote-Anwendung lädt Visualforce-Seiten vom Salesforce-Server, formatiert sie um und zeigt sie auf mobilen Geräten an. Der Quellcode kann auf dem Server verbleiben oder zwischen Server und Gerät aufgeteilt werden.

Wenn Sie eine hybride Remote-Anwendung erstellen, fordert Sie das forcehybrid-Skript auf, eine Startseite anzugeben. Geben Sie den relativen Pfad zu Ihrer Visualforce-Zielseite mit /apex/ davor ein. Beispiel: Wenn die Adresse Ihrer Zielseite https://<MyDomainName>--<PackageName>.vf.force.com/apex/BasicVFPage lautet, geben Sie /apex/BasicVFPage ein.

Erste Schritte mit force.js und dem Mobile SDK

Zuerst müssen Sie die notwendigen Anwendungsressourcen in die Salesforce-Cloud hochladen.

Erstellen Sie eine Archivdatei, z. B. eine ZIP-Datei, die cordova.js, force.js sowie alle anderen statischen Ressourcen enthält, die Ihr Projekt benötigt.
Laden Sie die Archivdatei in Salesforce über Ihr Name | Anwendungs-Setup | Entwickeln | Statische Ressourcen hoch.

Ein Beispiel für eine einfache Visualforce-Seite

Der folgende Code zeigt eine einfache Visualforce-Seite, die fast vollständig mit Apex- und JavaScript-Code definiert wird. Die Logik folgt derselben Gliederung wie der JavaScript-Code der ContactsApp. Sie lädt force.js, initialisiert die Sitzung und übergibt dann eine SOQL-Abfrage an die asynchrone force.query()-Methode. Bei einer erfolgreichen Abfrage zeigt die Anwendung das erste abgerufene Name-Feld in einem HTML-Tag <span> an.

<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>

Verwenden von Apex-Steuerfeldern in einer hybriden Remote-Anwendung

Bei hybriden Remote-Anwendungen erfolgt der Zugriff auf Salesforce-Daten normalerweise über eine Visualforce-Seiten und das zugehörige Apex-Steuerfeld. Wenn Ihre Visualforce-Seite JavaScript-Code verwendet, kann der betreffende Code Daten mit dem serverseitigen Apex-Steuerfeld verwenden und bearbeiten.

Apex unterstützt die beiden folgenden Möglichkeiten, um Apex-Steuerfeldmethoden in JavaScript aufzurufen:

Beide Verfahren verwenden eine AJAX-Anforderung, um Apex-Steuerfeldmethoden direkt in JavaScript aufzurufen. Der JavaScript-Code muss in einer Visualforce-Seite gehostet werden.

Im Vergleich mit apex:actionFunction bietet JavaScript Remoting mehrere Vorteile.

Dieses Verfahren bietet größere Flexibilität und bessere Leistung als apex:actionFunction.
Es unterstützt Parameter und Rückgabetypen in der Apex-Steuerfeldmethode mit automatischer Zuordnung zwischen Apex- und JavaScript-Typen.
Es wird ein asynchrones Verarbeitungsmodell mit Rückmeldungen verwendet.
Im Gegensatz zu apex:actionFunction enthält die AJAX-Anforderung keinen Ansichtsstatus für die Visualforce-Seite. Dies führt zu einem schnelleren Hin- und Rückweg.

Im Vergleich mit apex:actionFunction müssen Sie bei JavaScript Remoting jedoch mehr Code erstellen.

Im folgenden Beispiel wird JavaScript-Code in ein <script>-Tag in der Visualforce-Seite eingefügt. Dieser Code ruft die invokeAction()-Methode für das Visualforce-Remoting-Verwaltungsobjekt auf. An invokeAction() werden die erforderlichen Metadaten zum Aufrufen einer Funktion namens getItemId() für das Apex-Steuerfeldobjekt objName übergeben. Da invokeAction() asynchron ausgeführt wird, definiert der Code auch eine Rückmeldungsfunktion für die Verarbeitung des Werts, der von getItemId() zurückgegeben wird. Im Apex-Steuerfeld macht die @RemoteAction-Anmerkung die getItemId()-Funktion für externen JavaScript-Code verfügbar.

//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) { ... }

In der getItemId()-Methode können Sie beispielsweise eine Salesforce-API aufrufen und den Rückgabewert in JavaScript erfassen.

Geschätzte Zeit

Themen

Benötigen Sie Hilfe?

Salesforce Mobile App – Ressourcen

Zugriff auf Salesforce-Daten in hybriden Anwendungen

Lernziele

Zugriff auf die Salesforce-API mit force.js

Erste Schritte mit force.js und dem Mobile SDK

Ein Beispiel für eine einfache Visualforce-Seite

Verwenden von Apex-Steuerfeldern in einer hybriden Remote-Anwendung

Ressourcen