Callback-Funktionen zu WSL-Buttons nutzen

07. August 2018

weblication cms wsl button callback funktionen javascript

WSL-Buttons mit onBeforeClick-Attribut bieten die Möglichkeit, eigene JavaScript-Funktionen aufzurufen, um z.B. für öffentliche Benutzer die Pflege komfortabler zu gestalten.

Die WSL-Buttons mit onBeforeClick-Attribut (z.B. wsl:buttonUpload, wsl:buttonDelete, etc. (siehe weiterführende Links unten)) ermöglichen es Ihnen, bei Klick über JavaScript Manipulation vorzunehmen.

Folgender Fall demonstriert Ihnen eine mögliche Umsetzung.

Beispiel 1: Hochgeladenes Bild inkl. Verlinkung löschen

Bei Umsetzung eines Pflegeformulares für öffentliche Benutzer (z.B. bei News, Veranstaltungen, o.ä.) soll optional eine vom öffentlichen Benutzer hochgeladene Datei (z.B. Bild) nicht nur physikalisch vom Server, sondern auch die Verlinkung im Artikel gelöscht werden.

Das WSL-Tag buttonDelete erledigt die Aufgabe, daß die Datei vom Server gelöscht wird.
Mit dem onBeforeClick-Attribut können Sie dem Button eine Callback-Funktion (JavaScript) mitgeben, welche individuelle Aktionen zum Button vornimmt. So können Sie über eine Funktion (siehe Beispiel) erreichen, daß zur löschenden Datei auch der Pfad im Objekt (z.B. Vorschaubild-Pfad in wd:thumbnail) aus der Datei gelöscht wird.

Beispiel: Auszug aus einem Objekt-Template (z.B. news.wObject.php) zum wsl:buttonDelete mit onBeforeClick-Attribut

...
  <!-- web:text:start webtagId="thumbnail.news.object" active="1" decorators="default" caption="<xsl:value-of select="php:functionString('wTexts::showTextUser', 'Thumbnail', 'Vorschaubild', 'Imagette')"/>" captionInfo="<xsl:value-of select="php:functionString('wTexts::showTextUser', 'May be displayed in some lists', 'Erscheint in manchen Auflistungen', 'Peut être affiché dans quelques listes')"/>" editor="file" upload="1" preview="picture" previewStyle="width:120px;height:auto" dirType="image" extensions="gif|jpg|jpeg|png" validator="/^(|.*\.(gif|jpg|jpeg|png))$/i" path="/baseAssets/img/news" pathIfEmpty="/baseAssets/img/news" onchange="wEditor.saveDraftAndReload();" inputStyle="width:100%"--><xsl:value-of select="/wd:document/wd:extension/wd:meta/wd:thumbnail/@src"/><!--web:text:stop-->
  <xsl:if test="$wUsertype = 'public'">
  <script type="text/javascript">
    ////////////////////////////////////////////////////////////////
    //
    // Callback, das nach dem Löschen einer Datei aufgerufen wird
    //
    ////////////////////////////////////////////////////////////////
    
    wOnBeforeClickDeleteFile = function(pathFile){
      
      console.log(pathFile);
      var inputFieldWithValue = jQuery('input[value="' + pathFile + '"]');
      if(inputFieldWithValue){
        inputFieldWithValue.val('');
      }

    };
  </script>
  <wsl:buttonDelete style="" path="{/wd:document/wd:extension/wd:meta/wd:thumbnail/@src}" caption="Bild löschen" title="Bild löschen" icon="delete" markId="" class="" questionConfirm="" onclick="" onBeforeClick="wOnBeforeClickDeleteFile('{/wd:document/wd:extension/wd:meta/wd:thumbnail/@src}');"/>
  </xsl:if>
...

Im Beispiel ist die JavaScript-Funktion der Einfachheit halber direkt im Template angegeben. Bei einer Umsetzung bietet es sich allerdings an, die JS-Funktion in einer globalen JS-Datei (z.B. design.js) abzulegen.

So setzen Sie ein Pflegeformular für öffentliche Benutzer um
WSL-Buttons mit onBeforeClick-Attribut
FAQs
Wie können WSL-Buttons mit onBeforeClick genutzt werden, um eigene JavaScript-Funktionen auszuführen?
WSL-Buttons, die ein <code class="codeInline">onBeforeClick</code>-Attribut besitzen (z.B. <code class="codeInline">wsl:buttonUpload</code>, <code class="codeInline">wsl:buttonDelete</code>), können bei Klick vor der eigentlichen Aktion eine Callback-Funktion ausführen. Damit lassen sich per JavaScript individuelle Vor- oder Zusatzaktionen umsetzen, etwa für öffentliche Benutzer die Pflege komfortabler zu gestalten.
Wofür wird das <code class="codeInline">onBeforeClick</code>-Attribut bei einem <code class="codeInline">wsl:buttonDelete</code> verwendet?
Mit <code class="codeInline">wsl:buttonDelete</code> wird die Datei vom Server gelöscht. Durch das <code class="codeInline">onBeforeClick</code>-Attribut kann zusätzlich eine JavaScript-Callback-Funktion aufgerufen werden, die weitere Schritte ausführt, z.B. das Entfernen von Verlinkungen oder Pfaden im Artikelobjekt (wie z.B. der Vorschaubild-Pfad in <code class="codeInline">wd:thumbnail</code>).
Wie kann man beim Löschen einer Datei auch die Verlinkung im Artikel entfernen?
Ein typisches Vorgehen ist: Die Datei wird durch den <code class="codeInline">wsl:buttonDelete</code> gelöscht, und die Verknüpfung im Artikel wird per <code class="codeInline">onBeforeClick</code>-Callback angepasst. Im Beispiel wird dabei nach dem Klick eine Funktion aufgerufen, die den relevanten Pfad im Objekt findet (z.B. über ein Input-Feld mit dem passenden <code class="codeInline">value</code>) und dessen Wert auf leer setzt, wodurch die Verlinkung entfernt wird.
Wie sieht ein Beispiel für eine onBeforeClick-Callback-Funktion beim Löschen aus?
Im Beispiel wird eine Funktion <code class="codeInline">wOnBeforeClickDeleteFile</code> definiert, die den übergebenen <code class="codeInline">pathFile</code> entgegennimmt und anschließend ein passendes Input-Feld sucht: <code class="codeInline">jQuery('input[value="' + pathFile + '"]')</code>. Wenn ein Feld gefunden wird, wird sein Wert mit <code class="codeInline">val('')</code> geleert. Diese Logik wird dann im <code class="codeInline">onBeforeClick</code> des Buttons aufgerufen, z.B.: <code class="codeInline">onBeforeClick="wOnBeforeClickDeleteFile('{/wd:document/.../@src}');"</code>.
Welche Rolle spielt das Übergeben eines Dateipfads an die Callback-Funktion?
Der Pfad wird der Callback-Funktion als Parameter übergeben, damit sie zielgenau die zugehörigen UI- oder Objektwerte findet. Im Beispiel entspricht das dem <code class="codeInline">@src</code> des Vorschaubildes (<code class="codeInline">wd:thumbnail/@src</code>), sodass die Callback-Funktion exakt den Pfad aus dem Artikelkontext wieder auf leer setzen kann.
Sollte die JavaScript-Funktion direkt im Template oder in einer globalen Datei abgelegt werden?
Im Beispiel ist die JavaScript-Funktion aus Vereinfachungsgründen direkt im Template enthalten. Für eine produktive Umsetzung wird empfohlen, die JS-Funktion in einer globalen JavaScript-Datei (z.B. <code class="codeInline">design.js</code>) abzulegen, damit der Code besser wartbar und wiederverwendbar ist.
Wie kann das Löschen-Verhalten für öffentliche Benutzer eingeschränkt werden?
Im Beispiel wird der <code class="codeInline">wsl:buttonDelete</code> nur angezeigt bzw. eingebunden, wenn der Benutzer den Typ <code class="codeInline">public</code> hat (<code class="codeInline">xsl:if test="$wUsertype = 'public'"</code>). So lassen sich Funktionen und Buttons gezielt für bestimmte Benutzerrollen aktivieren.