Beispiele Forum Support
Dokumentation
StartAnleitungenWie man mit dhtmlxScheduler startet

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.

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:\Users\User\salesforce
        create scheduler-salesforce-app\config\project-scratch-def.json
        create scheduler-salesforce-app\README.md
        create scheduler-salesforce-app\sfdx-project.json
        create scheduler-salesforce-app\.husky\pre-commit
        create scheduler-salesforce-app\.vscode\extensions.json
        create scheduler-salesforce-app\.vscode\launch.json
        create scheduler-salesforce-app\.vscode\settings.json
        create scheduler-salesforce-app\force-app\main\default\lwc\.eslintrc.json
        create scheduler-salesforce-app\force-app\main\default\aura\.eslintrc.json
        create scheduler-salesforce-app\scripts\soql\account.soql
        create scheduler-salesforce-app\scripts\apex\hello.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-app\jest.config.js
        create scheduler-salesforce-app\package.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".

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

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

Ereignisobjekt

Nennen Sie das Ereignisobjekt SchedulerEvent oder SchedulerEvents.

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

  • Startdatum

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

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

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.

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.

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:

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:\Users\User\source\salesforce\scheduler-salesforce-app\force-app\main\default\lwc
   create force-app\main\default\lwc\scheduler\scheduler.js
   create force-app\main\default\lwc\scheduler\scheduler.html
   create force-app\main\default\lwc\scheduler\__tests__\scheduler.test.js
   create force-app\main\default\lwc\scheduler\scheduler.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 class="thescheduler" lwc:dom="manual" style='width: 100%;'></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:\Users\User\salesforce\scheduler-salesforce-app\force-app\main\default\classes
   create force-app\main\default\classes\SchedulerData.cls
   create force-app\main\default\classes\SchedulerData.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.

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

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

Aktivieren Sie die Seite.

Speichern Sie die Änderungen.

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

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

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.

Nach oben