Tipps & Tricks für Salesforce Entwickler: So entwerfen Sie ganz einfach eine benutzerdefinierte Modals-Komponente
Nach längerer Zeit gibt es wieder ein paar Tricks für die Salesforce Entwickler unter uns. Dieses Mal werfen wir einen genaueren Blick auf die Salesforce Komponente Modals und Quick Actions. Genauer gesagt: wir erstellen ein benutzerdefiniertes "Pop-Up" mit Text und zwei Buttons. Klingt simpel und ist mit unserem Trick auch einfach umzusetzen, so dass Sie hinterher ein gut aussehendes Pop-Up-Fenster vor sich haben.
Was sind Modals?
Modals sind Lightning Komponenten, mit welchen Inhalte in einem sogenannten Layer innerhalb einer App angezeigt werden - einfach gesagt "Pop-Ups". Viele kennen diese Komponente, denn sie wird oft z.B. bei der Erstellung oder Bearbeitung eines Datensatzes oder auch bei verschiedenen Arten von Nachrichten und Wizards in Salesforce verwendet.
Zunächst eine kurzer Überblick, wie Modals aufgebaut sind, denn in den meisten Fällen werden sie als Standard-Modals verwendet.
- Modals nehmen 50% des eigentlichen Ansichtsfensters ein und haben eine minimal und maximal festgelegte Breite, um nicht zu schmal oder zu breit zu werden.
- Sie haben nach oben und unten immer den gleichen Abstand - ähnlich wie ein Rahmen -, so dass der Schließen-Button gut zu sehen ist.
- Modals können auch einen "Tagline" in der Kopfzeile haben, die einfach unter der Überschrift eingefügt werden kann.
- Modal-Überschriften können ebenfalls Taglines haben, wenn zusätzlicher Text angegeben werden muss. Diese "Tagline" kann auch Links enthalten, oder auch nur aus einem Link bestehen.
Quick Actions und Lightning Komponeten
Quick Actions erleichtern Benutzern die Arbeit in Salesforce oder in der Salesforce Mobile App. Mit benutzerdefinierten Quick Actions können Sie z.B. die Navigation Ihrer Benutzer so reibungslos wie möglich gestalten, indem Sie ihnen einen bequemen Zugriff auf die wichtigsten Informationen ermöglichen. Beispielsweise können Sie Benutzer Datensätze erstellen oder aktualisieren, Anrufe direkt in ihrem Chatter-Feed oder von ihrem mobilen Gerät aus, protokollieren lassen.
Quick Actions können auch Lightning-Komponenten, Abläufe, Visualforce-Seiten oder Canvas-Anwendungen mit von Ihnen definierten Funktionen aufrufen. Beispielsweise können Sie eine benutzerdefinierte Quick Action erstellen, damit Benutzer Kommentare schreiben können, die länger als 5.000 Zeichen sind. Oder erstellen Sie eine, die eine Videokonferenz-Anwendung integriert, so dass Service-Mitarbeiter per Video mit Kunden kommunizieren können.
Das Problem
Wir wollen nun einen Quick-Action-Button in einem bestimmten Objekt platzieren, um eine benutzerdefinierte Lightning-Komponente als Modal anzuzeigen. Dabei soll im "Pop-Up" bzw. mit der Modals-Komponente, ein Text mit zwei Buttons angezeigt werden.
Das Quick-Action-Popup, also das Modals, wird aber mit einer Standard-konfigurierten Kopf- und Fußzeile (wie oben beschrieben) dargestellt. Das wiederum führt dazu, dass unsere Modal-Komponente zusätzliche Ränder hat, die wir in diesem Fall nicht haben wollen.
Die Lösung
Um dieses Problem zu beheben, nutzen wir CSS-Style, um unsere Komponente so darzustellen, wie wir es wollen. Wir fügen dafür das CSS in die Komponenten-Ebene ein, nicht in die Style-Ebene. Um die CSS in die Komponente-Ebene zu schreiben brauchen wir <aura:html>.
Der CSS-Code lautet dann:
<aura:html tag="style"> .cuf-content { padding: 0 0rem !important;
Dann fügen wir den CSS-Code folgendermaßen in die Komponente ein:
<aura:component implements="force:lightningQuickActionWithoutHeader,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="FileUploadController"> <aura:html tag="style"> .cuf-content { padding: 0 0rem !important; } .slds-p-around--medium { padding: 0rem !important; } .slds-modal__content{ overflow-y:hidden !important; height:unset !important; max-height:unset !important; } </aura:html> <div class="modal-header slds-modal__header slds-size_1-of-1"> <h4 class="title slds-text-heading--medium" >Upload File</h4> </div> <!-- MODAL BODY / INPUT FORM --> <div class="slds-modal__content slds-p-around--x-small slds-align_absolute-center slds-size_1-of-1 slds-is-relative" aura:id="modalbody" id="modalbody"> <form class="slds-form--stacked"> <!-- All the fields for the form input --> </form> </div> <!-- End of Modal Content --> <!-- MODAL FOOTER --> <div class="modal-footer slds-modal__footer slds-size_1-of-1"> <div class="forceChangeRecordTypeFooter"> <ui:button class="slds-button slds-button_neutral" label="Cancel" press="{! c.cancel}" /> <ui:button class="slds-button slds-button--brand" label="Save" press="{!c.save}"/> </div> </div> </aura:component>
Und das Ergebnis sieht dann so aus:
Mit diesem Trick können Sie ganz einfach benutzerdefinierte Modals für Ihre Quick Actions entwerfen.
