martinmueller
I'm new here

ChildSection erstellen mit TPP_API.Button.CREATE_CHILD_SECTION

Jump to solution

Guten Morgen,

ich versuche einen Button hinzuzufügen, womit der Redakteur Absatzvorlagen in einen Inhaltsbereich über die TPP einfügen kann.

Jedoch sind mir aus dem Beispiel die Parameter nicht ganz klar.

Frage 1: Was genau ist $slot?

Frage 2: Was gehört in die Options? Das Beispiel ist nicht korrekt, da man kein Array direkt in ein Object wrappen kann, ohne Key. Egal ob man ein Objekt reinpackt, oder ein Array, ich bekomme folgende Fehlermeldung: "options.map is not a function"

Hat das Dollarzeichen am Anfang der Variablen-Namen was zu bedeuten?

Grüße

Martin

Nachricht geändert durch Martin Müller

0 Kudos
1 Solution

Accepted Solutions

Hallo,

mit $ markieren wir in der TPP-Api Variablen, die ein HTMLElement enthalten. $slot enthält also den Knoten im DOM-Baum der mit Content befüllt und von der TPP-Api dekoriert/eingerahmt werden soll.

Mit CREATE_SIBLING_SECTION  kannst du zu einer bestehenden Section eine Geschwister-Element anlegen. D.h. du brauchst bereits mindestens eine existierenden Section. Von so einer Section brauchst du die previewId, nicht den namen des Inhaltsbereiches ('main'). Diese Methode ist dazu da, jede einzelne Section eines Inhaltbereiches jeweils mit einem eigenen Rahmen auszustatten. So kann an jeder Stelle einer Liste von Sections eine weitere Section hinzugefügt werden.

(fs-tpp-api 1.0.0 | Documentation)

Korrigiertes Beispiel:

       * //1. Assume you have given a list of section

       * <div data-slot="abc">

       *   <div class="slot-entry" data-preview-id="..."/>

       *   <div class="slot-entry" data-preview-id="..."/>

       * </div>

       *

       *

       * //2. Decorate each slot entry with a create sibling button.

       * var createSiblingSection = Decorate.CREATE_SIBLING_SECTION

       *                    .context({

       *                       sectionName : 'new_section',   // name of the new section

       *                       position: 'BEFORE'             // optional. Default is AFTER.

       *                    })

       *                    .getOptions(

       *                       [

       *                        {id: 'section_template_uid_1', label : 'Basic Section'},

       *                        {id: 'section_template_uid_2', label : 'Advanced Section'}

       *                       ]

       *                    );

       * var $slotEntries = document.querySelectorAll('.slot-entry');

       * [].forEach.call($slotEntries, function($entry){

       *      Decorate.element($entry).addButton(createSiblingSection);

       * })

Die Struktur passend zum Beispiel aus dem Api Doc sieht hier so aus:

Page

+ body:abc

    +*section: 'new_section'     -> wird neu angelegt. context.sectionName bestimmt den Namen

    + section: slot_entry_a      -> hier von nehmen wird die previewId

    + section: slot_entry_b      -> der entsprechenden Knoten kann ebenfalls dekoriert werden

Wenn du initial eine erste Section anlegen willst, musst du CREAT_CHILD_SECTION verwenden. Hier muss die previewId einer Seite verwendet werden. Der Inhaltsbereich wird im context über das Feld body festgelegt. Diese Methode ist dazu da, einen ganzen Bereich auf einer Seite mit einem Rahmen auszustatten.

(fs-tpp-api 1.0.0 | Documentation)

Korrigiertes Beispiel:

       * //1. the previewId of the current page it given

       * var previewId = ...

       *

       * //2. a content slot to create the sections in is given

       * var $slot = ...

       *

       * //3. decorate the content slot with a border

       * var createChildSection = Decorate.CREATE_CHILD_SECTION

       *                    .context({

       *                       body: 'slot_name',           // the slot will be matched to a page body

       *                       sectionName: 'new_section',  // initial name of the section

       *                       position: 'FIRST'            // optional. Default is LAST

       *                    })

       *                    .getOptions(

       *                       [

       *                        {id: 'section_template_uid_1', label : 'Basic Section'},

       *                        {id: 'section_template_uid_2', label : 'Advanced Section'}

       *                       ]

       *                     );

       *

       * var decorate = Decorate.element($slot, previewId).addButton(createChildSection);

Die Struktur passend zum Beispiel aus dem Api Doc sieht hier so aus:

Page                              -> (hier von nehmen wir previewId)

+ body: 'slot_name'              -> context.body

  + *section: 'new_section'      -> wird neu angelegt. context.sectionName bestimmt den Namen

(In beiden Fällen ergibt sich die uid des verwendeten Section Templates aus dem id Feld der ausgewählten Option.) 

Der Name muss vorgegeben werden. Es gibt intern keinen Default Wert und das Feld ist verpflichtend. Um dem Redakteur eine Auswahl zu geben, wäre es denkbar über eine Executable zu arbeiten und einen Dialog vorzuschalten.

Zur besseren Diagnose könntest du uns die verwendete previewId (als Text nicht als Bild) pasten.

Alternativ kannst du auch in der Developer-Konsole im Browser folgenden Befehl ausführen:

TPP_API.Debug.parsePreviewId('$die_verwendte_previewId$')

und die Ausgabe davon hier posten.

(Ja die { Klammern im Beispiel sind falsch. Wir haben ein Ticket dafür angelegt. )

View solution in original post

0 Kudos
6 Replies
Peter_Jodeleit
Crownpeak employee

Hallo Martin,

$slot ist nur ein willkürlich gewählter Variablenname.

Ich poste hier mal ein Beispiel aus einem Angular-Projekt. Ich hoffe, das hilft weiter:

const Decorate = this.fs_tpp.Decorate;

const decorator = Decorate.element(element, previewId);

decorator.addButton(

  this.fs_tpp.Button.CREATE_SIBLING_SECTION

  .getOptions([{id: 'card', label: 'Card'}])

  .context({

   sectionName : 'newCard',
   position: this.fs_tpp.SectionPosition.LAST

  })

);

LG, Peter

Peter
0 Kudos

Hallo Peter,

danke für die Rückmeldung.

Das hat mir schon mal einen Schritt weiter geholfen.

Wenn ich als PreviewId die PreviewId der Seite übergebe, dann öffnet sich ein Dialog wo ich die Seite bearbeiten kann. Zwar ist das nicht was ich wollte, cool finde ich es trotzdem Smiley Wink

Wenn ich jedoch als PreviewId die PreviewId des Inhaltsbereich übergebe, dann wird mir auch der Button eingefügt, aber es passiert nichts, wenn ich darauf klicke.

Ich bin mir jedoch nicht sicher, was in getOptions und context gehört. Eigentlich möchte ich ja den SectionName nicht übergeben, soll sich der Redakteur selber aussuchen.

Hier mein Code:

decorator.addButton(

    TPP_API.Button.CREATE_SIBLING_SECTION

      .getOptions([{id: 'standard_text', label: 'Card'}])

      .context({

            sectionName : 'standard_text',

            position: TPP_API.SectionPosition.LAST

        })

);

Statt 'standard_text' hab ich auch 'main' versucht, was dem Inhaltsbereich entspricht, aber das funktioniert auch nicht.

Vielen Dank für die Unterstützung Smiley Happy

LG, Martin

PS: wäre es möglich an euer Beispiel-Angular-Projekt zu kommen?

0 Kudos

Hallo,

mit $ markieren wir in der TPP-Api Variablen, die ein HTMLElement enthalten. $slot enthält also den Knoten im DOM-Baum der mit Content befüllt und von der TPP-Api dekoriert/eingerahmt werden soll.

Mit CREATE_SIBLING_SECTION  kannst du zu einer bestehenden Section eine Geschwister-Element anlegen. D.h. du brauchst bereits mindestens eine existierenden Section. Von so einer Section brauchst du die previewId, nicht den namen des Inhaltsbereiches ('main'). Diese Methode ist dazu da, jede einzelne Section eines Inhaltbereiches jeweils mit einem eigenen Rahmen auszustatten. So kann an jeder Stelle einer Liste von Sections eine weitere Section hinzugefügt werden.

(fs-tpp-api 1.0.0 | Documentation)

Korrigiertes Beispiel:

       * //1. Assume you have given a list of section

       * <div data-slot="abc">

       *   <div class="slot-entry" data-preview-id="..."/>

       *   <div class="slot-entry" data-preview-id="..."/>

       * </div>

       *

       *

       * //2. Decorate each slot entry with a create sibling button.

       * var createSiblingSection = Decorate.CREATE_SIBLING_SECTION

       *                    .context({

       *                       sectionName : 'new_section',   // name of the new section

       *                       position: 'BEFORE'             // optional. Default is AFTER.

       *                    })

       *                    .getOptions(

       *                       [

       *                        {id: 'section_template_uid_1', label : 'Basic Section'},

       *                        {id: 'section_template_uid_2', label : 'Advanced Section'}

       *                       ]

       *                    );

       * var $slotEntries = document.querySelectorAll('.slot-entry');

       * [].forEach.call($slotEntries, function($entry){

       *      Decorate.element($entry).addButton(createSiblingSection);

       * })

Die Struktur passend zum Beispiel aus dem Api Doc sieht hier so aus:

Page

+ body:abc

    +*section: 'new_section'     -> wird neu angelegt. context.sectionName bestimmt den Namen

    + section: slot_entry_a      -> hier von nehmen wird die previewId

    + section: slot_entry_b      -> der entsprechenden Knoten kann ebenfalls dekoriert werden

Wenn du initial eine erste Section anlegen willst, musst du CREAT_CHILD_SECTION verwenden. Hier muss die previewId einer Seite verwendet werden. Der Inhaltsbereich wird im context über das Feld body festgelegt. Diese Methode ist dazu da, einen ganzen Bereich auf einer Seite mit einem Rahmen auszustatten.

(fs-tpp-api 1.0.0 | Documentation)

Korrigiertes Beispiel:

       * //1. the previewId of the current page it given

       * var previewId = ...

       *

       * //2. a content slot to create the sections in is given

       * var $slot = ...

       *

       * //3. decorate the content slot with a border

       * var createChildSection = Decorate.CREATE_CHILD_SECTION

       *                    .context({

       *                       body: 'slot_name',           // the slot will be matched to a page body

       *                       sectionName: 'new_section',  // initial name of the section

       *                       position: 'FIRST'            // optional. Default is LAST

       *                    })

       *                    .getOptions(

       *                       [

       *                        {id: 'section_template_uid_1', label : 'Basic Section'},

       *                        {id: 'section_template_uid_2', label : 'Advanced Section'}

       *                       ]

       *                     );

       *

       * var decorate = Decorate.element($slot, previewId).addButton(createChildSection);

Die Struktur passend zum Beispiel aus dem Api Doc sieht hier so aus:

Page                              -> (hier von nehmen wir previewId)

+ body: 'slot_name'              -> context.body

  + *section: 'new_section'      -> wird neu angelegt. context.sectionName bestimmt den Namen

(In beiden Fällen ergibt sich die uid des verwendeten Section Templates aus dem id Feld der ausgewählten Option.) 

Der Name muss vorgegeben werden. Es gibt intern keinen Default Wert und das Feld ist verpflichtend. Um dem Redakteur eine Auswahl zu geben, wäre es denkbar über eine Executable zu arbeiten und einen Dialog vorzuschalten.

Zur besseren Diagnose könntest du uns die verwendete previewId (als Text nicht als Bild) pasten.

Alternativ kannst du auch in der Developer-Konsole im Browser folgenden Befehl ausführen:

TPP_API.Debug.parsePreviewId('$die_verwendte_previewId$')

und die Ausgabe davon hier posten.

(Ja die { Klammern im Beispiel sind falsch. Wir haben ein Ticket dafür angelegt. )

0 Kudos

Hi Moritz,

danke für die ausführliche Antwort, das werde ich probieren.

Dazu hab ich aber direkt noch eine Frage: Es ist also nicht möglich, den Redakteur auswählen zu lassen, welche Absatzvorlage er dem Inhaltsbereich hinzufügen möchte? Das würde mich schon wundern, weil im normalen Content Creator (ohne TPP) ist es möglich.

LG, Martin

0 Kudos

Ja die Absatzvorlage kann der Redakteur natürlich auswählen. Dafür werden genau die Options angegeben. Der Button sollte sich in diesem Fall als eine DropDown-Liste darstellen, hier kann der Redakteur auswählen. Allerdings muss die List der möglichen Absatzvorlagen manuell gesetzt werden, sie kann im TPP nicht automatisch ermittelt werden.

Der sectionName, den man angeben muss, ist nur der technische Name des Knotens der im Content Baum angelegt wird. 

0 Kudos

Hi Moritz,

das funktioniert schon mal. Ich bekomme zwei Buttons angezeigt. Mit dem einen kann der Redakteur nochmal die Seite bearbeiten, den versuch ich mal zu entfernen, weil wir das beim Inhaltsbereich eigentlich nicht nochmal brauchen.

Dem zweiten Button kann ich jetzt eine Liste an Absatzvorlagen übergeben, die der Redakteur dann anlegen kann. Das ist leider sehr unübersichtlich. Wir haben im Content-Bereich aktuell 72 Absatzvorlagen, die (theoretisch) hinzugefügt werden können. Hier wäre eine Suche (wie im normalen CC) nicht schlecht.

Ich versuch das gleiche jetzt mal mit dem ActionBuilder zu bauen. Da kommen bestimmt auch noch Fragen auf.

Vielen Dank erstmal für die Hilfe

Martin

0 Kudos