{"id":722,"date":"2025-10-10T09:44:03","date_gmt":"2025-10-10T09:44:03","guid":{"rendered":"https:\/\/help.finblick.com\/?post_type=docs&#038;p=722"},"modified":"2025-10-29T13:08:53","modified_gmt":"2025-10-29T13:08:53","password":"","slug":"product-line-editor-wrapper","status":"publish","type":"docs","link":"https:\/\/help.finblick.com\/de\/docs\/product-line-editor-wrapper\/","title":{"rendered":"Product Line Editor Wrapper"},"content":{"rendered":"\n<p>Falls das Verhalten des Product Line Editors ge\u00e4ndert werden muss, kann der Editor in eine benutzerdefinierte \u201eWrapper\u201c-Komponente eingebettet werden, um bestimmte Injektionen zu definieren oder gew\u00fcnschte Verhaltensweisen \u00fcber den Controller des Editors auszul\u00f6sen.<\/p>\n\n\n\n<p>Der Controller des Product Line Editors und seine Methoden k\u00f6nnen <a href=\"https:\/\/developer.salesforce.com\/docs\/platform\/lwc\/guide\/create-components-dom-work.html#refs\" data-type=\"link\" data-id=\"https:\/\/developer.salesforce.com\/docs\/platform\/lwc\/guide\/create-components-dom-work.html#refs\">\u00fcber eine Referenz<\/a> gesteuert werden.<\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-578af9f8\"\n     id=\"betterdocs-code-snippet-578af9f8\"\n     data-language=\"html\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83c\udf10<\/span>\n                                            <\/div>\n                \n                                    <div class=\"betterdocs-file-name\">\n                        <span class=\"file-name-text\">productLineEditorWrapper.html<\/span>\n                    <\/div>\n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-578af9f8 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-html\"><code>&lt;template&gt;\n  &lt;finblick-product-line-editor lwc:ref=&quot;lineEditor&quot;\n                                record-id={recordId}\n                     object-api-name={objectApiName}&gt;\n  &lt;\/finblick-product-line-editor&gt;\n\n  &lt;button onclick={handleCancel}&gt;Cancel&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-578af9f8');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-409100b0\"\n     id=\"betterdocs-code-snippet-409100b0\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                                    <div class=\"betterdocs-file-name\">\n                        <span class=\"file-name-text\">productLineEditorWrapper.js<\/span>\n                    <\/div>\n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-409100b0 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>import { LightningElement, api } from &#039;lwc&#039;;\n\nexport default class ProductLineEditorWrapper extends LightningElement {\n  @api recordId;\n  @api objectApiName;\n  \n  handleCancel(event) {\n    \/\/accessing editor&#039;s controller \n    this.refs.lineEditor.controller.cancel();  \n  }\n}<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-409100b0');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Allgemeine Informationen<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Attribute des Produktlinieneditors<\/h3>\n\n\n\n<figure class=\"wp-block-table has-small-font-size\"><table class=\"has-fixed-layout\"><tbody><tr><th><strong>Name<\/strong><\/th><th><strong>Typ<\/strong><\/th><th><strong>Beschreibung<\/strong><\/th><\/tr><tr><td>recordId<\/td><td>Id<\/td><td>ID eines Datensatzes, f\u00fcr den der Line Editor verwendet wird.<\/td><\/tr><tr><td>objectApiName<\/td><td>String<\/td><td>Objekt-API-Name eines Objekts, f\u00fcr das der Line Editor verwendet wird.<\/td><\/tr><tr><td>controller<\/td><td>Class<\/td><td>Der Controller gibt dem Entwickler die M\u00f6glichkeit: <br>&#8211; Die Daten und die Benutzeroberfl\u00e4che des Produktlinieneditors von au\u00dfen zu manipulieren; <br>&#8211; Benutzerdefinierte Logik einzubinden, die bei bestimmten Ausl\u00f6sern aktiviert wird.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Methoden des Produktlinieneditors<\/h3>\n\n\n\n<figure class=\"wp-block-table has-small-font-size\"><table class=\"has-fixed-layout\"><tbody><tr><th><strong>Name<\/strong><\/th><th><strong>Beschreibung<\/strong><\/th><\/tr><tr><td>lifecycleevent<\/td><td>Wird ausgel\u00f6st, wenn ein Lifecycle Event aufgetreten ist.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Lifecycle Events<\/h2>\n\n\n\n<p>Lifecycle Events sind Ereignisse, die zu bestimmten Zeitpunkten im Lebenszyklus einer Komponente ausgel\u00f6st werden. Die Details aller Lebenszyklusereignisse enthalten die folgenden Parameter:<\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-e41ff1d8\"\n     id=\"betterdocs-code-snippet-e41ff1d8\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-e41ff1d8 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>{\n  eventName: &quot;eventName&quot;,\n  ...event-dependant parameters (if any)\n}<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-e41ff1d8');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>init<\/strong><\/h3>\n\n\n\n<p>Das &#8222;init&#8220;-Ereignis wird ausgel\u00f6st, wenn die Engine des Zeileneditors initialisiert wird.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\">Der Datensatz ist zu diesem Zeitpunkt noch nicht geladen.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Controller-Methoden<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>addLineItems<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>lineItems<\/em><\/strong> \u2013 Liste der hinzuzuf\u00fcgenden Belegpositionen.<\/li>\n<\/ul>\n\n\n\n<p><strong>Beschreibung:<\/strong><\/p>\n\n\n\n<p>F\u00fcgt Belegpositionen mit der bereitgestellten Nutzlast hinzu.<\/p>\n\n\n\n<p>Standardm\u00e4\u00dfig werden Positionen am Ende der letzten Sektion in der angegebenen Reihenfolge hinzugef\u00fcgt.<\/p>\n\n\n\n<p>Stattdessen k\u00f6nnte jedem der Belegpositionen der Schl\u00fcssel &#8222;<strong><em>sectionIndex<\/em><\/strong>&#8220; hinzugef\u00fcgt werden, um sie am Ende einer bestimmten Sektion einzuf\u00fcgen.<\/p>\n\n\n\n<p>Die Zuordnung erfolgt f\u00fcr alle Positionen, die den Schl\u00fcssel &#8222;<strong><em>productId<\/em><\/strong>&#8220; enthalten.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-4181cf18\"\n     id=\"betterdocs-code-snippet-4181cf18\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-4181cf18 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>const someItem = {discount: 4};\nconst blankItem = {};\nconst targetedSectionItem = {\n  sectionIndex: 1,\n  customProductName: &quot;Test&quot;\n}\nawait addLineItems([someItem, blankItem, targetedSectionItem]);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-4181cf18');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>editLineItem<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>data<\/em><\/strong> \u2013 Daten zur Aktualisierung der Belegposition.<\/li>\n<\/ul>\n\n\n\n<p><strong>Gibt<\/strong> eine aktualisierte Belegposition <strong>zur\u00fcck<\/strong>.<\/p>\n\n\n\n<p><strong>Beschreibung:<\/strong> Aktualisiert eine Belegposition mit den angegebenen Daten, wobei alle anderen Felder unver\u00e4ndert bleiben.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\">Die Daten m\u00fcssen die Schl\u00fcssel &#8222;sectionIndex&#8220; und &#8222;productIndex&#8220; enthalten. Wenn ohne Sektionen gearbeitet wird, ist &#8222;sectionIndex&#8220; gleich 0.<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\">Wenn die Daten den Schl\u00fcssel &#8222;<strong><em>productId<\/em><\/strong>&#8220; mit einem Wert enthalten, der sich von einer leeren Zeichenkette unterscheidet, wird f\u00fcr das Element ein Abgleich durchgef\u00fchrt.<\/p>\n\n\n\n<p class=\"has-small-font-size\">Wenn die Daten den Schl\u00fcssel &#8222;productId&#8220; mit einem leeren Zeichenkettenwert (&#8222;&#8220;) enthalten, wird die &#8222;Produkt&#8220;-Suche gel\u00f6scht. Wenn die ausgew\u00e4hlte Belegposition in einer Datenbank vorhanden ist, wird sie beim Speichern gel\u00f6scht.<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-6c3fde83\"\n     id=\"betterdocs-code-snippet-6c3fde83\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-6c3fde83 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>const someItem = {\n  sectionIndex: 1,\n  productIndex: 2,\n  unitPrice: 800\n};\nawait editLineItem(someItem);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-6c3fde83');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>dragLineItem<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>oldPlacement<\/em><\/strong> \u2013 Position der zu verschiebenden Belegposition.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>newPlacement<\/em><\/strong> \u2013 Platzierung, an die die Belegposition verschoben werden soll.<\/li>\n<\/ul>\n\n\n\n<p><strong>Gibt<\/strong> eine verschobene Belegposition <strong>zur\u00fcck<\/strong>.<\/p>\n\n\n\n<p><strong>Beschreibung:<\/strong> Verschiebt eine Belegposition von einer Stelle an eine andere.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-cf9907fa\"\n     id=\"betterdocs-code-snippet-cf9907fa\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-cf9907fa .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>const oldPlacement = {\n  sectionIndex: 2,\n  productIndex: 3\n};\nconst newPlacement = {\n  sectionIndex: 1,\n  productIndex: 0\n};\ndragLineItem(oldPlacement, newPlacement);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-cf9907fa');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>deleteLineItem<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>placement<\/em><\/strong> \u2013 Position des zu l\u00f6schenden Elements.<\/li>\n<\/ul>\n\n\n\n<p><strong>Gibt<\/strong> eine gel\u00f6schte Belegposition <strong>zur\u00fcck<\/strong>.<\/p>\n\n\n\n<p><strong>Beschreibung:<\/strong> L\u00f6scht eine Belegposition an einer bestimmten Stelle.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-d6b6e200\"\n     id=\"betterdocs-code-snippet-d6b6e200\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-d6b6e200 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>const placement = {\n  sectionIndex: 2,\n  productIndex: 3\n};\ndeleteLineItem(placement);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-d6b6e200');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>addSection<\/strong><\/h3>\n\n\n\n<p><strong>Beschreibung:<\/strong> 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\u00fcgt.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>addSection();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>editSection<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>data<\/em><\/strong> \u2013 Daten zur Aktualisierung der Sektion.<\/li>\n<\/ul>\n\n\n\n<p><strong>Beschreibung:<\/strong> Aktualisiert eine Sektion mit den angegebenen Daten.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\">Die Daten m\u00fcssen &#8222;<em>sectionIndex<\/em>&#8220; enthalten.<\/p>\n<\/blockquote>\n\n\n\n<p>Wenn es notwendig ist, die Belegpositionen in einer Sektion zu aktualisieren, verwenden editLineItem stattdessen.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-db0bb9f1\"\n     id=\"betterdocs-code-snippet-db0bb9f1\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-db0bb9f1 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>const data = {\n  sectionIndex: 1,\n  name: &quot;Custom Section Name&quot;\n};\neditSection(data);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-db0bb9f1');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>dragSection<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>oldSectionIndex<\/strong> \u2013 Index der Sektion, der verschoben werden soll.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>newSectionIndex<\/strong> \u2013 Index, an den die Sektion verschoben werden soll.<\/li>\n<\/ul>\n\n\n\n<p><strong>Beschreibung:<\/strong> Verschiebt die Sektion von einer Stelle an eine andere.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-ldm6ssw\"\n     id=\"betterdocs-code-snippet-ldm6ssw\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-ldm6ssw .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>const data = {\n  sectionIndex: 1,\n  name: &quot;Custom Section Name&quot;\n};\neditSection(data);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-ldm6ssw');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>deleteSection<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>sectionIndex<\/strong> \u2013 Index der Sektion, die gel\u00f6scht werden soll.<\/li>\n<\/ul>\n\n\n\n<p><strong>Beschreibung:<\/strong> L\u00f6scht die Sektion an einer bestimmten Stelle.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\">Wenn versucht wird, eine Sektion auf normalem Wege zu l\u00f6schen, erscheint ein Best\u00e4tigungsfenster.<\/p>\n\n\n\n<p class=\"has-small-font-size\">Diese Methode \u00f6ffnet kein Modal-Fenster und l\u00f6scht die Sektion sofort.<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-c0ebf93f\"\n     id=\"betterdocs-code-snippet-c0ebf93f\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-c0ebf93f .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>const sectionIndex = 4;\ndeleteSection(sectionIndex);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-c0ebf93f');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>removeAllSections<\/strong><\/h3>\n\n\n\n<p><strong>Beschreibung:<\/strong> Deaktiviert die Sektionen, falls diese verwendet werden.<\/p>\n\n\n\n<p>Diese Aktion l\u00f6scht keine Elemente. Es gruppiert alle vorhandenen Elemente in einem f\u00fcr den Benutzer unsichtbaren Bereich.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>removeAllSections();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>cancel<\/strong><\/h3>\n\n\n\n<p><strong>Beschreibung:<\/strong> Macht alle vorgenommenen \u00c4nderungen r\u00fcckg\u00e4ngig.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cancel();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>saveLineItems<\/strong><\/h3>\n\n\n\n<p>Gibt ein Objekt mit den folgenden Schl\u00fcsselwerten zur\u00fcck:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sektionen &#8211; Liste der Sektionen;<\/li>\n\n\n\n<li>uiSettings \u2013 reserviert f\u00fcr die interne Verwendung.<\/li>\n<\/ul>\n\n\n\n<p><strong>Beschreibung:<\/strong> Speichert alle vorgenommenen \u00c4nderungen.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-fedbaaea\"\n     id=\"betterdocs-code-snippet-fedbaaea\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-fedbaaea .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>const record = await saveLineItems();\nconsole.log(JSON.stringify(record.sections));<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-fedbaaea');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>setLoading<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>isLoading<\/em><\/strong> \u2013 Ladestatus (true\/false).<\/li>\n<\/ul>\n\n\n\n<p><strong>Beschreibung:<\/strong> Aktiviert\/deaktiviert das Laden von Komponenten.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-00873fa7\"\n     id=\"betterdocs-code-snippet-00873fa7\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-00873fa7 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>setLoading(true);\n\/\/wait for some data to load\nsetLoading(false);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-00873fa7');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>setReadMode<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>readMode<\/em><\/strong> &#8211; Modus zum Einstellen (true\/false)<\/li>\n<\/ul>\n\n\n\n<p><strong>Beschreibung:<\/strong> Setzt den Modus der Komponente entweder auf Lesemodus (true) oder Bearbeitungsmodus (false).<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-cd5762a7\"\n     id=\"betterdocs-code-snippet-cd5762a7\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-cd5762a7 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>setReadMode(true);\n\/\/do some changes while user can&#039;t edit\nsetReadMode(false);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-cd5762a7');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>expandLineItem<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>placement<\/em><\/strong>  \u2013 Positionierung einer Belegposition, die erweitert werden soll.<\/li>\n<\/ul>\n\n\n\n<p><strong>Beschreibung:<\/strong> Erweitert eine Belegposition an einer bestimmten Stelle und zeigt zus\u00e4tzliche Felder an.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-j2yg5ko\"\n     id=\"betterdocs-code-snippet-j2yg5ko\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-j2yg5ko .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>setReadMode(true);\n\/\/do some changes while user can&#039;t edit\nsetReadMode(false);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-j2yg5ko');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>expandAllLineItems<\/strong><\/h3>\n\n\n\n<p><strong>Beschreibung:<\/strong> Erweitert alle Belegpositionen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>shrinkAllLineItems<\/strong><\/h3>\n\n\n\n<p><strong>Beschreibung:<\/strong> Verkleinert alle Belegpositionen.<\/p>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-9a4a6ac4\"\n     id=\"betterdocs-code-snippet-9a4a6ac4\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-9a4a6ac4 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>shrinkAllLineItems();\n\/\/do some changes while nobody sees\nexpandAllLineItems();<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-9a4a6ac4');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>injectLifecycleHook<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>eventName<\/em><\/strong> \u2013 Name des Ereignisses, das eine Injektion ausl\u00f6st.<\/li>\n\n\n\n<li><strong><em>overwriteFunction<\/em><\/strong> \u2013 benutzerdefinierte Funktion, die ausgef\u00fchrt wird, wenn das Ereignis ausgel\u00f6st wird.<\/li>\n<\/ul>\n\n\n\n<p><strong>Beschreibung:<\/strong> Erm\u00f6glicht die Ausf\u00fchrung einer benutzerdefinierten Funktionalit\u00e4t w\u00e4hrend bestimmter Injektionsereignisse.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\">Beispiele werden im n\u00e4chsten Abschnitt aufgef\u00fchrt.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Namen von Injektionsereignissen<\/h2>\n\n\n\n<p>Dies ist die Liste aller unterst\u00fctzten Injektionen, wann diese ausgel\u00f6st werden und Anwendungsbeispiele.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>addlineitems<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>lineItems<\/em><\/strong> \u2013 Array von Belegpositionen, die hinzugef\u00fcgt werden sollen.<\/li>\n<\/ul>\n\n\n\n<p><strong>Wird ausgel\u00f6st, wenn:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8222;Position hinzuf\u00fcgen&#8220; bet\u00e4tigt &#8211; f\u00fcgt eine Leerzeile hinzu;<\/li>\n\n\n\n<li>&#8222;Speichern&#8220; wird beim Hinzuf\u00fcgen mehrerer Positionen gedr\u00fcckt;<\/li>\n\n\n\n<li>F\u00fcr eine Einzelposition ist die &#8222;Produkt&#8220;-Suche ausgew\u00e4hlt;<\/li>\n\n\n\n<li>Die Funktion &#8222;addLineItems&#8220; des Controllers wird aufgerufen.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\">Wenn eines der Elemente ein nicht leeres Feld &#8222;<strong><em>productId<\/em><\/strong>&#8220; enth\u00e4lt, wird nach der \u00dcbereinstimmung eine Injektion ausgel\u00f6st. Andernfalls wird die Einspritzung sofort ausgel\u00f6st.<\/p>\n\n\n\n<p class=\"has-small-font-size\">Die Injektion wird ausgel\u00f6st, bevor die Summen f\u00fcr die Positionen berechnet werden.<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-9c1f6f59\"\n     id=\"betterdocs-code-snippet-9c1f6f59\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-9c1f6f59 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>const injectionFunction = lineItems =&gt; {\n  lineItems.forEach(lineItem =&gt; lineItem.customProductName = &quot;test&quot;);\n};\ninjectLifecycleHook(&quot;addlineitems&quot;, injectionFunction);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-9c1f6f59');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>save<\/strong><\/h3>\n\n\n\n<p><strong>Argumente<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>sections<\/em><\/strong> \u2013 Sektionen, die Belegpositionen enthalten, die gespeichert werden sollen.<\/li>\n<\/ul>\n\n\n\n<p><strong>Wird ausgel\u00f6st, wenn:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Der Button &#8222;Speichern&#8220; wurde bet\u00e4tigt;<\/li>\n\n\n\n<li>Die Funktion &#8222;saveLineItems&#8220; des Controllers wird aufgerufen.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\">Die Injektion findet statt, bevor \u00c4nderungen in der Datenbank gespeichert werden.<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Beispiel:<\/strong><\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-c9652ab6\"\n     id=\"betterdocs-code-snippet-c9652ab6\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-c9652ab6 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>const injectionFunction = sections =&gt; {\n  sections.forEach((section, index) =&gt; section.name = &quot;test&quot; + index);\n};\ninjectLifecycleHook(&quot;save&quot;, injectionFunction);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-c9652ab6');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Beispiel f\u00fcr Injektionscode<\/strong><\/h2>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-3a957af1\"\n     id=\"betterdocs-code-snippet-3a957af1\"\n     data-language=\"html\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83c\udf10<\/span>\n                                            <\/div>\n                \n                                    <div class=\"betterdocs-file-name\">\n                        <span class=\"file-name-text\">productLineEditorWrapper.html<\/span>\n                    <\/div>\n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-3a957af1 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-html\"><code>&lt;template&gt;\n    &lt;finblick-product-line-editor lwc:ref=&quot;lineEditor&quot;\n                                  record-id={recordId}\n                                  object-api-name={objectApiName}\n                                  onlifecycleevent={handleLifecycleEvent}&gt;\n    &lt;\/finblick-product-line-editor&gt;\n&lt;\/template&gt;<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-3a957af1');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-fbe7e3b7\"\n     id=\"betterdocs-code-snippet-fbe7e3b7\"\n     data-language=\"javascript\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                                    <div class=\"betterdocs-file-icon\">\n                                                    <span class=\"betterdocs-file-icon-emoji\">\ud83d\udcc4<\/span>\n                                            <\/div>\n                \n                                    <div class=\"betterdocs-file-name\">\n                        <span class=\"file-name-text\">productLineEditorWrapper.js<\/span>\n                    <\/div>\n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-fbe7e3b7 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                            <div class=\"betterdocs-code-snippet-tooltip\">Copy to clipboard<\/div>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-javascript\"><code>import { LightningElement, api } from &#039;lwc&#039;;\nimport { ShowToastEvent } from &quot;lightning\/platformShowToastEvent&quot;;\n\nexport default class ProductLineEditorWrapper extends LightningElement {\n    @api recordId;\n    @api objectApiName;\n\n    handleLifecycleEvent(event) {\n        switch (event.detail.eventName) {\n            case &#039;init&#039;:\n                this.handleEngineInit(event);\n                break;\n            default:\n                break;\n        }\n    }\n\n    handleEngineInit(event) {\n        const controller = this.refs.lineEditor.controller;\n        \n        controller.injectLifecycleHook(&#039;addlineitems&#039;, this.addLineItemsInjection);\n        controller.injectLifecycleHook(&#039;save&#039;, this.saveInjection.bind(this));\n    }\n\n    addLineItemsInjection = (lineItems) =&gt; {\n        if (lineItems.some(lineItem =&gt; lineItem.productId)) {\n            const loyaltyDiscount = 15;\n            lineItems.forEach(lineItem =&gt; lineItem.discount = loyaltyDiscount);\n\n            const toastEvent = new ShowToastEvent({\n                title: &quot;Loyalty discount applied.&quot;,\n                message: `We&#039;ve applied a ${loyaltyDiscount}% discount to item&#039;s you&#039;ve just added as a sign of gratitude.`,\n                variant: &quot;success&quot;\n            });\n            this.dispatchEvent(toastEvent);\n        }\n    }\n\n    saveInjection(sections) {\n        const toastEvent = new ShowToastEvent({\n            title: &quot;Save Injection Triggered.&quot;,\n            message: &quot;Triggered a save injection&quot;,\n            variant: &quot;info&quot;\n        });\n        this.dispatchEvent(toastEvent);\n    }\n}<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-fbe7e3b7');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Zus\u00e4tzliche Informationen<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Sektionsattribute<\/strong><\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\">Parameter, die ausschlie\u00dflich f\u00fcr den internen Gebrauch bestimmt sind, werden weggelassen.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-table has-small-font-size\"><table class=\"has-fixed-layout\"><tbody><tr><th><strong>Name<\/strong><\/th><th><strong>Typ<\/strong><\/th><th><strong>Beschreibung<\/strong><\/th><\/tr><tr><td>name<\/td><td>Zeichenkette<\/td><td>Name der Sektion.<\/td><\/tr><tr><td>sectionIndex<\/td><td>Zahl<\/td><td>Index der Sektion.<\/td><\/tr><tr><td>total<\/td><td>Zahl<\/td><td>Gesamtpreis der Sektion.<\/td><\/tr><tr><td>lineItems<\/td><td>Array<\/td><td>Elemente der Sektion. Die Struktur der Elemente wird unten beschrieben.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Positionseigenschaften<\/strong><\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\">Parameter, die ausschlie\u00dflich f\u00fcr den internen Gebrauch bestimmt sind, werden weggelassen.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-table has-small-font-size\"><table class=\"has-fixed-layout\"><tbody><tr><th><strong>Name<\/strong><\/th><th><strong>Typ<\/strong><\/th><th><strong>Erforderlich<\/strong><\/th><th><strong>Beschreibung<\/strong><\/th><\/tr><tr><td>id<\/td><td>Id<\/td><td><\/td><td>Datensatz-ID der Belegposition.<\/td><\/tr><tr><td>unitPrice<\/td><td>Zahl<\/td><td>Ja<\/td><td>Einzelpreis der Belegposition.<\/td><\/tr><tr><td>unitType<\/td><td>Zeichenkette<\/td><td><\/td><td>Einheitentyp der Belegposition. Beschr\u00e4nkt auf die Werte des globalen Wertemenge &#8222;Einheitentyp&#8220;.<\/td><\/tr><tr><td>quantity<\/td><td>Zahl<\/td><td>Ja<\/td><td>Menge der Belegposition.<\/td><\/tr><tr><td>discount<\/td><td>Zahl<\/td><td><\/td><td>Rabatt der Belegposition.<\/td><\/tr><tr><td>totalPrice<\/td><td>Zahl<\/td><td><\/td><td>Gesamtpreis der Belegposition.<\/td><\/tr><tr><td>description<\/td><td>Zeichenkette<\/td><td><\/td><td>Beschreibung der Belegposition.<\/td><\/tr><tr><td>customProductName<\/td><td>Zeichenkette<\/td><td><\/td><td>Benutzerdefinierter Produktname der Belegposition.<\/td><\/tr><tr><td>priceBookEntryId<\/td><td>Id<\/td><td>F\u00fcr Auftr\u00e4ge und Angebote<\/td><td>ID des Preisbucheintrags der Belegposition.<\/td><\/tr><tr><td>productId<\/td><td>Id<\/td><td>Ja<\/td><td>Produkt-ID der Belegposition.<\/td><\/tr><tr><td>productName<\/td><td>Zeichenkette<\/td><td><\/td><td>Produktname der Belegposition.<\/td><\/tr><tr><td>taxRule<\/td><td>Objekt<\/td><td><\/td><td>Steuersachverhalt der Belegposition. Enth\u00e4lt die folgenden Attribute:<br>id \u2013 ID des Steuersachverhalts;<br>name \u2013 Name des Steuersachverhalts;<br>percentage \u2013 Steuersatz des Steuersachverhalts.<\/td><\/tr><tr><td>dynamicFields<\/td><td>Objekt<\/td><td><\/td><td>Dynamische Felder der Belegposition. Diese Felder werden in dynamischen Sektionen verwendet.<br>Attribute sind die API-Namen der Felder.<\/td><\/tr><tr><td>sectionIndex<\/td><td>Zahl<\/td><td><\/td><td>Index der Sektion, zu der die Belegposition geh\u00f6rt.<\/td><\/tr><tr><td>productIndex<\/td><td>Zahl<\/td><td><\/td><td>Index der Belegposition innerhalb der Sektion.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Platzierungsattribute<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table has-small-font-size\"><table class=\"has-fixed-layout\"><tbody><tr><th><strong>Name<\/strong><\/th><th><strong>Typ<\/strong><\/th><\/tr><tr><td>sectionIndex<\/td><td>Zahl<\/td><\/tr><tr><td>productIndex<\/td><td>Zahl<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Falls das Verhalten des Product Line Editors ge\u00e4ndert werden muss, kann der Editor in eine benutzerdefinierte \u201eWrapper\u201c-Komponente eingebettet werden, um bestimmte Injektionen zu definieren oder gew\u00fcnschte Verhaltensweisen \u00fcber den Controller des Editors auszul\u00f6sen. Der Controller des Product Line Editors und seine Methoden k\u00f6nnen \u00fcber eine Referenz gesteuert werden. Allgemeine Informationen Attribute des Produktlinieneditors Name Typ [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[28,7],"doc_tag":[],"knowledge_base":[22],"class_list":["post-722","docs","type-docs","status-publish","hentry","doc_category-einrichten-und-konfigurieren","doc_category-configure","knowledge_base-finblick"],"year_month":"2026-05","word_count":1054,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"ivan levytskyi","author_nicename":"ivan","author_url":"https:\/\/help.finblick.com\/de\/author\/ivan\/"},"doc_category_info":[{"term_name":"Einrichten und Konfigurieren","term_url":"https:\/\/help.finblick.com\/de\/docs\/finblick\/einrichten-und-konfigurieren\/"},{"term_name":"Set Up &amp; Configure","term_url":"https:\/\/help.finblick.com\/docs\/finblick\/configure\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Finblick","term_url":"https:\/\/help.finblick.com\/de\/docs\/finblick\/","term_slug":"finblick"}],"knowledge_base_slug":["finblick"],"_links":{"self":[{"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/docs\/722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/comments?post=722"}],"version-history":[{"count":4,"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/docs\/722\/revisions"}],"predecessor-version":[{"id":1330,"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/docs\/722\/revisions\/1330"}],"wp:attachment":[{"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/media?parent=722"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/doc_category?post=722"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/doc_tag?post=722"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/help.finblick.com\/de\/wp-json\/wp\/v2\/knowledge_base?post=722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}