Zum Hauptinhalt springen

dhtmlxScheduler mit SalesForce LWC

Dieses Tutorial zeigt, wie Sie dhtmlxScheduler in eine SalesForce Lightning Web Component integrieren.

Wenn Sie mit einer anderen Technologie arbeiten, finden Sie unten weitere Integrationsmöglichkeiten:

Wir verwenden die SalesForce CLI, um die Lightning Web Component zu erstellen und in Ihre Organisation zu deployen. Details zur Installation finden Sie in diesem Artikel. Zusätzlich können Sie das Salesforce Extension Pack" für Visual Studio Code installieren, um die Arbeit mit Entwicklungsumgebungen zu erleichtern.

Hinweis

Der vollständige Quellcode ist auf GitHub verfügbar.

Hier finden Sie ein Video-Tutorial, das zeigt, wie Scheduler mit Salesforce LWC erstellt wird.

Voraussetzungen​

Stellen Sie sicher, dass die SalesForce CLI installiert ist. Falls nicht, finden Sie in diesem Artikel Anweisungen zur Einrichtung.

Schritt 1. Projekt erstellen​

Falls Sie noch keinen Account haben, können Sie sich hier für ein kostenloses Entwicklerkonto registrieren. Dieser Artikel bietet hilfreiche Hinweise.

Verwenden Sie die Suchleiste auf der linken Seite, um Dev Hub zu finden und auszuwählen:

Aktivieren Sie anschließend im sich öffnenden Einstellungsfenster Dev Hub:

Erstellen Sie nun einen Basisordner für Ihr Salesforce DX-Projekt:

$ mkdir ~/salesforce

Erzeugen Sie ein Salesforce DX-Projekt mit der CLI:

$ cd ~/salesforce
$ sfdx project generate -n scheduler-salesforce-app
    target dir = C:UsersUsersalesforce
        create scheduler-salesforce-appconfigproject-scratch-def.json
        create scheduler-salesforce-appguides/README.md
        create scheduler-salesforce-appsfdx-project.json
        create scheduler-salesforce-app.huskypre-commit
        create scheduler-salesforce-app.vscodeextensions.json
        create scheduler-salesforce-app.vscodelaunch.json
        create scheduler-salesforce-app.vscodesettings.json
        create scheduler-salesforce-appforce-appmaindefaultlwc.eslintrc.json
        create scheduler-salesforce-appforce-appmaindefaultaura.eslintrc.json
        create scheduler-salesforce-appscriptssoqlaccount.soql
        create scheduler-salesforce-appscriptsapexhello.apex
        create scheduler-salesforce-app.eslintignore
        create scheduler-salesforce-app.forceignore
        create scheduler-salesforce-app.gitignore
        create scheduler-salesforce-app.prettierignore
        create scheduler-salesforce-app.prettierrc
        create scheduler-salesforce-appjest.config.js
        create scheduler-salesforce-apppackage.json

Wechseln Sie in den neuen Projektordner:

$ cd scheduler-salesforce-app

Schritt 2. Autorisierung​

Autorisieren Sie Ihre Organisation über den Web Server Flow mit folgendem Befehl:

$ sfdx org login web -d

Successfully authorized ...@...com with org ID ...

Aktualisieren Sie anschließend Ihre Projektkonfigurationsdatei (sfdx-project.json), indem Sie den Parameter "sfdcLoginUrl" auf Ihre "My Domain URL" setzen. Diese URL finden Sie auf der "My Domain"-Einrichtungsseite Ihrer Organisation. Zum Beispiel:

scheduler-salesforce-app/sfdx-project.json
"sfdcLoginUrl" : "https://xbs2-dev-ed.my.salesforce.com"

Erstellen Sie eine Scratch Org mit folgendem Befehl:

$ sfdx org create scratch -f config/project-scratch-def.json -d


Creating Scratch Org...
RequestId: 2SR8a000000PLf5GAG (https://xbs2-dev-ed.my.salesforce.com/2SR8a000000PLf5GAG)
OrgId: 00D8G000000EEMs
Username: test-3baxo2k0tpej@example.com
✓ Prepare Request
✓ Send Request
✓ Wait For Org
✓ Available
✓ Authenticate
✓ Deploy Settings
Done


Your scratch org is ready.

Schritt 3. Scheduler zu Salesforce hinzufügen​

Um die Bibliothek zu verwenden, laden Sie sie als Static Resource in Salesforce hoch. Öffnen Sie Ihre Scratch Org mit folgendem Befehl:

$ sfdx org open

Navigieren Sie dann zum Tab "Static Resources" und klicken Sie auf "New":

Geben Sie der Resource einen eindeutigen Namen (hier dhtmlxscheduler), laden Sie das ZIP-Archiv mit den Bibliotheksdateien (dhtmlxscheduler.js und dhtmlxscheduler.css) hoch und setzen Sie Cache Control auf "Public", um die Performance zu verbessern. Klicken Sie auf "Save".

/img/sf_load_zip.png

Ab jetzt steht dhtmlxScheduler innerhalb von Salesforce zur Verfügung.

sf_scheduler_in_sf

Schritt 4. Datenmodell erstellen​

Events sind die Kernelemente in dhtmlxScheduler. Eine praktische Möglichkeit zur Verwaltung besteht darin, alle Eigenschaften als einfaches JSON in Salesforce zu speichern. Erstellen Sie dazu ein neues Event-Objekt. Öffnen Sie den Object Manager, wählen Sie dann "Create" und anschließend "Custom Object":

sf_new_object

Ereignisobjekt​

Nennen Sie das Ereignisobjekt SchedulerEvent oder SchedulerEvents.

sf_schedulerevent

Hinweis

Stellen Sie sicher, dass der Datensatzname mit dem Objektnamen übereinstimmt, zum Beispiel:

Objektname: SchedulerEvent => Datensatzname: SchedulerEvent Name

Klicken Sie auf die Schaltfläche „Speichern".

Nachdem das Objekt erstellt wurde, wechseln Sie zum Tab "Felder & Beziehungen" und klicken Sie auf die Schaltfläche "Neu".

sf_new_field

  • Startdatum

Wählen Sie "Datum/Uhrzeit" als Datentyp aus und klicken Sie auf "Weiter".

sf_field_type

Nennen Sie dieses Feld "Start Date". Dieses Feld enthält die JSON-serialisierten Task-Eigenschaften.

sf_start_date

Klicken Sie auf "Weiter" und übernehmen Sie alle Standardeinstellungen, bis die Schaltfläche "Speichern & Neu" erscheint.

  • Enddatum

Fügen Sie das Feld "End Date" hinzu und wählen Sie "Datum/Uhrzeit" als Datentyp aus.

sf_end_date

Klicken Sie auf "Weiter" und übernehmen Sie die Standardeinstellungen, bis die Schaltfläche "Speichern & Neu" verfügbar ist.

  • Text

Erstellen Sie ein "Text"-Feld und wählen Sie "Text" als Datentyp aus.

sf_text

Klicken Sie auf "Weiter" und übernehmen Sie alle Standardeinstellungen, bis die Schaltfläche "Speichern" verfügbar ist.

Am Ende sollten die Felder wie folgt aussehen:

sf_schedulerevent_fields

Schritt 5. Erstellen einer Lightning Web Component​

Um eine Lightning Web Component zu erstellen, verwenden Sie folgenden Befehl:

$ sfdx lightning generate component --type lwc -n scheduler -d force-app/main/default/lwc

target dir = C:UsersUsersourcesalesforcescheduler-salesforce-appforce-appmaindefaultlwc
   create force-appmaindefaultlwcschedulerscheduler.js
   create force-appmaindefaultlwcschedulerscheduler.html
   create force-appmaindefaultlwcscheduler__tests__scheduler.test.js
   create force-appmaindefaultlwcschedulerscheduler.js-meta.xml

Passen Sie die Komponentendefinition in scheduler.js-meta.xml an, um sie im Lightning App Builder verfügbar zu machen:

force-app/main/default/lwc/scheduler/scheduler.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="height" label="Height" type="Integer" default="800" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Öffnen Sie scheduler.html und fügen Sie folgenden Code ein:

force-app/main/default/lwc/scheduler/scheduler.html
<template>
    <div className="thescheduler" lwc:dom="manual"></div>
</template>

Öffnen Sie anschließend scheduler.js und fügen Sie folgenden Code hinzu:

force-app/main/default/lwc/scheduler/scheduler.js
/* eslint-disable guard-for-in */
/* eslint-disable no-undef */
import { LightningElement, api } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { loadStyle, loadScript } from "lightning/platformResourceLoader";
import { createRecord, updateRecord, deleteRecord } from "lightning/uiRecordApi";
 
// Static resources
import SchedulerFiles from "@salesforce/resourceUrl/dhtmlxscheduler";
 
// Controllers
import getEvents from "@salesforce/apex/SchedulerData.getEvents";
 
function unwrap(fromSF) {
    const data = fromSF.events.map((a) => ({
        id: a.Id,
        info: a.Name,
        start_date: a.Start_Date__c,
        end_date: a.End_Date__c,
        text: a.Text__c,
    }));
 
    return { data };
}
 
export default class SchedulerView extends LightningElement {
    static delegatesFocus = true;
 
    @api height;
    schedulerInitialized = false;
 
    renderedCallback() {
        if (this.schedulerInitialized) {
            return;
        }
        this.schedulerInitialized = true;
 
        Promise.all([
            loadScript(this, SchedulerFiles + "/dhtmlxscheduler.js"),
            loadStyle(this, SchedulerFiles + "/dhtmlxscheduler.css")
        ])
            .then(() => {
                this.initializeUI();
            })
            .catch((error) => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: "Error loading scheduler",
                        message: error.message,
                        variant: "error"
                    })
                );
            });
    }
 
    initializeUI() {
        const root = this.template.querySelector(".thescheduler");
        root.style.height = this.height + "px";
 
        const scheduler = window.Scheduler.getSchedulerInstance();
        scheduler.templates.parse_date = (date) => new Date(date);
        scheduler.templates.format_date = (date) => date.toISOString();
        scheduler.config.header = [
            "day",
            "week",
            "month",
            "date",
            "prev",
            "today",
            "next"
        ];
 
        scheduler.init(root, new Date(), "week");
 
        getEvents().then((d) => {
 
            const chartData = unwrap(d);
            scheduler.parse({
                events: chartData.data,
            });
        });
 
        ///↓↓↓ saving changes back to SF backend ↓↓↓
        scheduler.createDataProcessor(function (entity, action, data, id) {
            switch (action) {
                case "create":
                    console.log("createEvent", data);
                    const insert = {
                        apiName: "SchedulerEvent__c",
                        fields: {
                            Name: data.info,
                            Start_Date__c: data.start_date,
                            End_Date__c: data.end_date,
                            Text__c: data.text
                        }
                    };
                    scheduler.config.readonly = true; // suppress changes 
                                                      //until saving is complete
                    return createRecord(insert).then((res) => {
                        scheduler.config.readonly = false;
                        return { tid: res.id, ...res };
                    });
                case "update":
                    console.log("updateEvent", data);
                    const update = {
                        fields: {
                            Id: id,
                            Name: data.info,
                            Start_Date__c: data.start_date,
                            End_Date__c: data.end_date,
                            Text__c: data.text
                        }
                    };
                    return updateRecord(update).then(() => ({}));
                case "delete":
                    return deleteRecord(id).then(() => ({}));
            }
        });
    }
}

Schritt 6. Erstellen einer Apex-Klasse​

Im nächsten Schritt wird eine Klasse erstellt, die die Interaktion zwischen der Lightning-Komponente und dem Datenmodell ermöglicht.

$ sfdx apex generate class -n SchedulerData -d force-app/main/default/classes

target dir = C:UsersUsersalesforcescheduler-salesforce-appforce-appmaindefaultclasses
   create force-appmaindefaultclassesSchedulerData.cls
   create force-appmaindefaultclassesSchedulerData.cls-meta.xml

Nachdem die Klasse erstellt wurde, öffnen Sie SchedulerData.cls und fügen Sie diesen Code ein:

force-app/main/default/classes/SchedulerData.cls
public with sharing class SchedulerData {
 
    @RemoteAction
    @AuraEnabled(cacheable="true)"
    public static Map<String, Object> getEvents() {
       
        // fetching the Records via SOQL
        List<SchedulerEvent__c> Events = new List<SchedulerEvent__c>();
        Events = [SELECT Id, Name, Start_Date__c, End_Date__c, 
            Text__c FROM SchedulerEvent__c];
 
        Map<String, Object> result = new Map<String, Object>{'events' => Events };
        return result;
   }
}

Ziehen Sie die Quelle aus dem Scratch Org in Ihr Projekt:

$ sfdx project retrieve start

Schieben Sie dann die Quellen zurück in das Scratch Org:

$ sfdx project deploy start

Schritt 7. Erstellen einer Lightning Page​

Öffnen Sie den "Lightning App Builder" und erstellen Sie eine neue Lightning Page.

sf_lightning_app_builder

Wählen Sie "App Page", geben Sie den Seitennamen ein und wählen Sie das Layout aus.

sf_app_page

sf_new_lightning_page

sf_page_layout

Die benutzerdefinierte Scheduler-Komponente sollte für die neue Seite verfügbar sein. Fügen Sie sie einem beliebigen Bereich hinzu und speichern Sie.

sf_scheduler

Aktivieren Sie die Seite.

sf_page_saved

Speichern Sie die Änderungen.

sf_activation

sf_add_page_to_nm

sf_scheduler_in_app

Öffnen Sie die Anwendungsseite. Sie sollte im App Launcher durch Eingabe von Scheduler zugänglich sein.

sf_home_scheduler

Wenn alles korrekt eingerichtet wurde, wird eine einfache Scheduler-Demo auf der Lightning Page angezeigt.

sf_final

Anwendungssicherheit​

Der Scheduler selbst enthält keinen Schutz gegen Bedrohungen wie SQL-Injection, XSS oder CSRF-Angriffe. Die Sicherstellung der Anwendungssicherheit liegt in der Verantwortung der Entwickler. Weitere Details finden Sie im zugehörigen Artikel. Salesforce ist mit Sicherheitsfunktionen ausgestattet, um Ihre Daten und Anwendungen zu schützen, und Sie können eigene Sicherheitsmaßnahmen implementieren, die auf die Anforderungen Ihrer Organisation zugeschnitten sind. Weitere Informationen finden Sie im Salesforce Security Guide. Zusätzlich behandelt diese Ressource wichtige Sicherheitspraktiken.

Fehlerbehebung​

Wenn der Scheduler nach Abschluss der Integrationsschritte keine Ereignisse anzeigt, lesen Sie den Artikel Troubleshooting Backend Integration Issues. Dieser bietet Hilfestellungen zur Identifikation und Lösung häufiger Probleme.

Wie geht es weiter?​

An diesem Punkt ist der Scheduler vollständig funktionsfähig. Der vollständige Code steht auf GitHub zum Klonen oder Herunterladen für Ihre eigenen Projekte zur Verfügung.

Sie können auch Anleitungen zu den Funktionen des Schedulers oder Tutorials zur Integration des Schedulers mit anderen Backend-Frameworks erkunden.

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support