Maximilian Benning
 - 12. Januar 2017

JavaScript Remoting in Visualforce: Ein Code-Beispiel

JavaScript Remoting

JavaScript Remoting ist eine Möglichkeit von einer Visualforce-Seite aus Datenbankaufrufe auszuführen und zu verarbeiten.

In seiner Funktionalität ist es den Visualforce-Konstrukten <apex:form> und <apex:actionFunction> ähnlich, unterscheidet sich in der Handhabung jedoch stark von diesen. Wieso sollte ich mich also mit JavaScript Remoting beschäftigen?

Wieso JavaScript Remoting?

In meinem aktuellen Kundenprojekt beschäftige ich mich zurzeit mit der Weiterentwicklung von Visualforce-Seiten. Der Kunde ist sich noch nicht sicher, ab wann es sich für ihn lohnt, von Salesforce Classic auf Lightning zu wechseln und eine Hindernis für den Wechsel stellen seine alten Visualforce Seiten dar. Die Seiten bestehen aus klassischen Konstrukten, wie <apex:inputField>, <apex:form> oder <apex:actionFunction> und besitzen damit Look-and-Feel der Salesforce Classic Seiten. Betrachte ich diese Seiten jedoch in der aktuellen Lightning Version von Salesforce, so haben diese weiterhin Salesforce Classic Optik oder verkommen gar zu einfachen Textseiten. Salesforce liefert hierfür zwar regelmäßig Updates, doch ist das Ganze noch nicht wirklich rund.

Lightning Design System

Als Entwickler habe ich mich daher entschieden, die Visualforce-Seiten meines Kunden durch Standard HTML Konstrukte zu ersetzen und mit JavaScript Funktionen zu erweitern. Salesforce bietet hierfür kostenfrei das Lightning Design System (Link) an, mit welchem Visualforce-Seiten mit Standard HTML Elementen wie Lightning Standard Seiten aussehen. Der im Vergleich zur alten Visualforce Seite gestiegene Entwicklungsaufwand wird hierbei durch höhere Flexibilität und einen größeren Grad der Anpassung ausgeglichen. Visualforce-Seiten können tatsächlich aussehen wie moderne Webseiten! Aber können Sie sich auch so verhalten?

Problemstellung

Was mich anfangs immer wieder vor Probleme und lästige Bugs gestellt hat, waren die Datenbankaufrufe über den Controller. Hier mal ein Beispiel: Ich benötige eine Funktion, mit der ich die Opportunities massenhaft absagen möchte. Ich habe eine Tabelle mit einer Reihe von Opportunities und möchte diese per Checkbox markieren und danach über einen Buttonclick auf den Status „Closed Lost“ setzen. Hierzu habe ich eine Funktion im Controller, die eine Liste von Ids und einen neuen Status entgegennimmt.

Bediene ich mich der <apex>-Konstrukte so müsste ich als erstes eine <apex:actionFunction> definieren, die diese Funktion im Controller aufruft und zusätzlich noch zwei <apex:param> hinzufügen, die die eingetragenen Werte an Variablen im Controller übergeben. Um auch nur die Ids der Opps zu übertragen, welche ich auch angeklickt habe, benötige ich zusätzlich noch etwas JavaScript. Damit ich das Ganze dann auch automatisch zur Anzeige bringe, benötige ich einen zusätzlichen Rerender-Befehl oder muss die Seite neu laden.

Lösungsvorschlag

Oder ich löse das Problem allein über eine statische Funktion im Controller und einem Javascript-Befehl auf meiner Visualforce-Seite. Und so sieht das dann aus:

JavaScript Remote Call

JavaScript Remote Call (Klicken zum Vergrößern)

Controller JavaScript Remote Action

Controller Remote Action (Klicken zum Vergrößern)

Der Ganze Code des Beispiels findet sich hier (CodeExampleJavaScriptRemoting)

Es ist zu beachten, dass die Funktion des Controllers statisch ist und mit der Annotation „@RemoteAction“ gekennzeichnet wird. Daraufhin kann ich eine JavaScript-Funktion definieren, welche über die Syntax Controllername.Funktionsname(Parameter 1, Parameter 2, …, Callback Funktion) diese Funktion aufruft (Salesforce HowTo).

OnePager: Was ist Salesforce Visualforce?

Salesforce Visualforce ist ein Mix aus HTML, Tags, Apex und Javascript. Aber was genau können Sie damit tun?

Für das Beispiel bedeutet dies folgendes:

Zuerst wird die id meiner angewählten Opportunities ausgelesen, und in einem Array gespeichert. Daraufhin startet eine Spinner-Animation, um dem User zu signalisieren, dass eine kurze Wartezeit folgt, in der die Funktion setOpportunityClosedLost des Controllers aufgerufen wird. Diese rufe ich auf, indem ich schlicht die Controller-Klasse referenziere und dann die Funktion mit einem Punkt getrennt anhänge. Als Parameter wird das ID Array übergeben. Zusätzlich übergebe ich eine Funktion, die den Callback des Datenbankaufrufes verarbeiten soll. Ich unterscheide drei Fälle:

  1. Der Aufruf ist erfolgreich.
  2. Der Controller wirft eine Exception
  3. Ein unbekannter Fehler tritt auf

In jedem Fall definiere ich, was passieren soll, wenn dieser Fall eintritt. Der Einfachheit halber, lade ich in diesem Beispiel die Seite schlichtweg neu. Um das Neuladen der Seite zu vermeiden, ließe sich beispielsweise der Inhalt des tableBody Tag mithilfe der innerHTML Funktion überschreiben. Wird eine Exception vom Controller geworfen, oder erfolgt ein anderer Fehler, wird dies dem Benutzer über eine Alert Box signalisiert. Auch die Fehlerabfragen könnten in einem dafür angelegten <div> gerendert werden, beispielsweise über eine Notification Box (Link)

IMG_8156_Autor-sf-logo
Nun sind Sie dran! Entwickeln Sie Ihre eigene Seite mithilfe von JavaScript Remoting!
Salesforce Consultant Maximilian Benning

Haben Sie Fragen oder Anregungen? Verfassen Sie einen Kommentar oder melden Sie sich per Mail bei info@mind-force.de. Unser Team wird Ihnen schnellstmöglich antworten.

Maximilian Benning

Mein Name ist Maximilian Benning und ich bin begeisterter Salesforce Consultant und Teamleiter im Fachbereich mindforce. Als zertifizierter Administrator und Entwickler stehe ich gerne für fachliche Fragen im Bereich Salesforce bereit. Für interessierete Bewerber stehe ich bei Fragen zur Karriere bei mindsquare in meiner Funktion als Teamleiter ebenfalls gerne Rede und Antwort.

Sie haben Fragen? Kontaktieren Sie mich!



Das könnte Sie auch interessieren


Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Angebot anfordern
Preisliste herunterladen
Expert Session
Support