Falls das Verhalten des Product Line Editors geändert werden muss, kann der Editor in eine benutzerdefinierte „Wrapper“-Komponente eingebettet werden, um bestimmte Injektionen zu definieren oder gewünschte Verhaltensweisen über den Controller des Editors auszulösen.

Der Controller des Product Line Editors und seine Methoden können über eine Referenz gesteuert werden.

<template>
  <finblick-product-line-editor lwc:ref="lineEditor"
                                record-id={recordId}
                     object-api-name={objectApiName}>
  </finblick-product-line-editor>

  <button onclick={handleCancel}>Cancel</button>
</template>

import { LightningElement, api } from 'lwc';

export default class ProductLineEditorWrapper extends LightningElement {
  @api recordId;
  @api objectApiName;
  
  handleCancel(event) {
    //accessing editor's controller 
    this.refs.lineEditor.controller.cancel();  
  }
}

Allgemeine Informationen #

Attribute des Produktlinieneditors #

Methoden des Produktlinieneditors #

Lifecycle Events #

Lifecycle Events sind Ereignisse, die zu bestimmten Zeitpunkten im Lebenszyklus einer Komponente ausgelöst werden. Die Details aller Lebenszyklusereignisse enthalten die folgenden Parameter:

{
  eventName: "eventName",
  ...event-dependant parameters (if any)
}

init #

Das „init“-Ereignis wird ausgelöst, wenn die Engine des Zeileneditors initialisiert wird.

Der Datensatz ist zu diesem Zeitpunkt noch nicht geladen.

Controller-Methoden #

addLineItems #

Argumente

• lineItems – Liste der hinzuzufügenden Belegpositionen.

Beschreibung:

Fügt Belegpositionen mit der bereitgestellten Nutzlast hinzu.

Standardmäßig werden Positionen am Ende der letzten Sektion in der angegebenen Reihenfolge hinzugefügt.

Stattdessen könnte jedem der Belegpositionen der Schlüssel „sectionIndex“ hinzugefügt werden, um sie am Ende einer bestimmten Sektion einzufügen.

Die Zuordnung erfolgt für alle Positionen, die den Schlüssel „productId“ enthalten.

Beispiel:

const someItem = {discount: 4};
const blankItem = {};
const targetedSectionItem = {
  sectionIndex: 1,
  customProductName: "Test"
}
await addLineItems([someItem, blankItem, targetedSectionItem]);

editLineItem #

Argumente

• data – Daten zur Aktualisierung der Belegposition.

Gibt eine aktualisierte Belegposition zurück.

Beschreibung: Aktualisiert eine Belegposition mit den angegebenen Daten, wobei alle anderen Felder unverändert bleiben.

Die Daten müssen die Schlüssel „sectionIndex“ und „productIndex“ enthalten. Wenn ohne Sektionen gearbeitet wird, ist „sectionIndex“ gleich 0.

Wenn die Daten den Schlüssel „productId“ mit einem Wert enthalten, der sich von einer leeren Zeichenkette unterscheidet, wird für das Element ein Abgleich durchgeführt.

Wenn die Daten den Schlüssel „productId“ mit einem leeren Zeichenkettenwert („“) enthalten, wird die „Produkt“-Suche gelöscht. Wenn die ausgewählte Belegposition in einer Datenbank vorhanden ist, wird sie beim Speichern gelöscht.

Beispiel:

const someItem = {
  sectionIndex: 1,
  productIndex: 2,
  unitPrice: 800
};
await editLineItem(someItem);

dragLineItem #

Argumente

• oldPlacement – Position der zu verschiebenden Belegposition.

• newPlacement – Platzierung, an die die Belegposition verschoben werden soll.

Gibt eine verschobene Belegposition zurück.

Beschreibung: Verschiebt eine Belegposition von einer Stelle an eine andere.

Beispiel:

const oldPlacement = {
  sectionIndex: 2,
  productIndex: 3
};
const newPlacement = {
  sectionIndex: 1,
  productIndex: 0
};
dragLineItem(oldPlacement, newPlacement);

deleteLineItem #

Argumente

• placement – Position des zu löschenden Elements.

Gibt eine gelöschte Belegposition zurück.

Beschreibung: Löscht eine Belegposition an einer bestimmten Stelle.

Beispiel:

const placement = {
  sectionIndex: 2,
  productIndex: 3
};
deleteLineItem(placement);

addSection #

Beschreibung: Wenn ohne Sektionen gearbeitet wird, aktiviert diese und gruppiert alle vorhandenen Einzelpositionen in einer einzigen Sektion. Andernfalls wird am Ende der Liste eine Sektion hinzugefügt.

Beispiel:

addSection();

editSection #

Argumente

• data – Daten zur Aktualisierung der Sektion.

Beschreibung: Aktualisiert eine Sektion mit den angegebenen Daten.

Die Daten müssen „sectionIndex“ enthalten.

Wenn es notwendig ist, die Belegpositionen in einer Sektion zu aktualisieren, verwenden editLineItem stattdessen.

Beispiel:

const data = {
  sectionIndex: 1,
  name: "Custom Section Name"
};
editSection(data);

dragSection #

Argumente

• oldSectionIndex – Index der Sektion, der verschoben werden soll.

• newSectionIndex – Index, an den die Sektion verschoben werden soll.

Beschreibung: Verschiebt die Sektion von einer Stelle an eine andere.

Beispiel:

const data = {
  sectionIndex: 1,
  name: "Custom Section Name"
};
editSection(data);

deleteSection #

Argumente

• sectionIndex – Index der Sektion, die gelöscht werden soll.

Beschreibung: Löscht die Sektion an einer bestimmten Stelle.

Wenn versucht wird, eine Sektion auf normalem Wege zu löschen, erscheint ein Bestätigungsfenster.

Diese Methode öffnet kein Modal-Fenster und löscht die Sektion sofort.

Beispiel:

const sectionIndex = 4;
deleteSection(sectionIndex);

removeAllSections #

Beschreibung: Deaktiviert die Sektionen, falls diese verwendet werden.

Diese Aktion löscht keine Elemente. Es gruppiert alle vorhandenen Elemente in einem für den Benutzer unsichtbaren Bereich.

Beispiel:

removeAllSections();

cancel #

Beschreibung: Macht alle vorgenommenen Änderungen rückgängig.

Beispiel:

cancel();

saveLineItems #

Gibt ein Objekt mit den folgenden Schlüsselwerten zurück:

• Sektionen – Liste der Sektionen;
• uiSettings – reserviert für die interne Verwendung.

Beschreibung: Speichert alle vorgenommenen Änderungen.

Beispiel:

const record = await saveLineItems();
console.log(JSON.stringify(record.sections));

setLoading #

Argumente

• isLoading – Ladestatus (true/false).

Beschreibung: Aktiviert/deaktiviert das Laden von Komponenten.

Beispiel:

setLoading(true);
//wait for some data to load
setLoading(false);

setReadMode #

Argumente

• readMode – Modus zum Einstellen (true/false)

Beschreibung: Setzt den Modus der Komponente entweder auf Lesemodus (true) oder Bearbeitungsmodus (false).

Beispiel:

setReadMode(true);
//do some changes while user can't edit
setReadMode(false);

expandLineItem #

Argumente

• placement – Positionierung einer Belegposition, die erweitert werden soll.

Beschreibung: Erweitert eine Belegposition an einer bestimmten Stelle und zeigt zusätzliche Felder an.

Beispiel:

setReadMode(true);
//do some changes while user can't edit
setReadMode(false);

expandAllLineItems #

Beschreibung: Erweitert alle Belegpositionen.

shrinkAllLineItems #

Beschreibung: Verkleinert alle Belegpositionen.

Beispiel:

shrinkAllLineItems();
//do some changes while nobody sees
expandAllLineItems();

injectLifecycleHook #

Argumente

• eventName – Name des Ereignisses, das eine Injektion auslöst.
• overwriteFunction – benutzerdefinierte Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird.

Beschreibung: Ermöglicht die Ausführung einer benutzerdefinierten Funktionalität während bestimmter Injektionsereignisse.

Beispiele werden im nächsten Abschnitt aufgeführt.

Namen von Injektionsereignissen #

Dies ist die Liste aller unterstützten Injektionen, wann diese ausgelöst werden und Anwendungsbeispiele.

addlineitems #

Argumente

• lineItems – Array von Belegpositionen, die hinzugefügt werden sollen.

Wird ausgelöst, wenn:

• „Position hinzufügen“ betätigt – fügt eine Leerzeile hinzu;
• „Speichern“ wird beim Hinzufügen mehrerer Positionen gedrückt;
• Für eine Einzelposition ist die „Produkt“-Suche ausgewählt;
• Die Funktion „addLineItems“ des Controllers wird aufgerufen.

Wenn eines der Elemente ein nicht leeres Feld „productId“ enthält, wird nach der Übereinstimmung eine Injektion ausgelöst. Andernfalls wird die Einspritzung sofort ausgelöst.

Die Injektion wird ausgelöst, bevor die Summen für die Positionen berechnet werden.

Beispiel:

const injectionFunction = lineItems => {
  lineItems.forEach(lineItem => lineItem.customProductName = "test");
};
injectLifecycleHook("addlineitems", injectionFunction);

save #

Argumente

• sections – Sektionen, die Belegpositionen enthalten, die gespeichert werden sollen.

Wird ausgelöst, wenn:

• Der Button „Speichern“ wurde betätigt;
• Die Funktion „saveLineItems“ des Controllers wird aufgerufen.

Die Injektion findet statt, bevor Änderungen in der Datenbank gespeichert werden.

Beispiel:

const injectionFunction = sections => {
  sections.forEach((section, index) => section.name = "test" + index);
};
injectLifecycleHook("save", injectionFunction);

Beispiel für Injektionscode #

<template>
    <finblick-product-line-editor lwc:ref="lineEditor"
                                  record-id={recordId}
                                  object-api-name={objectApiName}
                                  onlifecycleevent={handleLifecycleEvent}>
    </finblick-product-line-editor>
</template>

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class ProductLineEditorWrapper extends LightningElement {
    @api recordId;
    @api objectApiName;

    handleLifecycleEvent(event) {
        switch (event.detail.eventName) {
            case 'init':
                this.handleEngineInit(event);
                break;
            default:
                break;
        }
    }

    handleEngineInit(event) {
        const controller = this.refs.lineEditor.controller;
        
        controller.injectLifecycleHook('addlineitems', this.addLineItemsInjection);
        controller.injectLifecycleHook('save', this.saveInjection.bind(this));
    }

    addLineItemsInjection = (lineItems) => {
        if (lineItems.some(lineItem => lineItem.productId)) {
            const loyaltyDiscount = 15;
            lineItems.forEach(lineItem => lineItem.discount = loyaltyDiscount);

            const toastEvent = new ShowToastEvent({
                title: "Loyalty discount applied.",
                message: `We've applied a ${loyaltyDiscount}% discount to item's you've just added as a sign of gratitude.`,
                variant: "success"
            });
            this.dispatchEvent(toastEvent);
        }
    }

    saveInjection(sections) {
        const toastEvent = new ShowToastEvent({
            title: "Save Injection Triggered.",
            message: "Triggered a save injection",
            variant: "info"
        });
        this.dispatchEvent(toastEvent);
    }
}

Zusätzliche Informationen #

Sektionsattribute #

Parameter, die ausschließlich für den internen Gebrauch bestimmt sind, werden weggelassen.

Positionseigenschaften #

Parameter, die ausschließlich für den internen Gebrauch bestimmt sind, werden weggelassen.

Platzierungsattribute #