Gadget in einer Outbar anzeigen

vorsicht

Achtung hier werden otris Elemente selektiert und das HTML der Seite modifiziert! Dies könnte mit dem nächsten Update von otris nicht mehr funktionieren.

Gadget Skript anlegen

Zunächst muss ein Gadget Portalskript erstellt werden.

Im Documents Manager ein neues Portalskript erstellen. Zum Beispiel: Gadget_ou.cust.filetype.outbar.fileSearchGadget

context.enableModules();
const { FileSearch } = require("ou.sp.gadget.FileSearch");

const fileSearch = new FileSearch({
    id: "test",
    tile: false,
    brand: false,
    title: "de:Wo ist mein Beleg;en:Where is my invoice?",
    placeholder: "de:Wo ist mein Beleg;en:Where is my invoice?",
});

context.returnValue = fileSearch.transfer();

UserExit anlegen

Als nächster Schritt muss ein UserExit erstellt werden um das Gadget in die Outbar zu laden.

warnung

Seit documents 5f, bietet otris zwei Darstellungen der Outbar an, sidebar oder tree (Propery folderTreeVisualizationType ).

Outbar Design: Sidebar

Dazu verwenden wir folgenden Code:

documents.sdk.exitRegistry.registerOutbarExitCallback(
    "library-examples", // <-- Hier entsprechend die Outbar ändern
    "Outbar.afterTreeRender",
    function(documentsContext, options) {
        console.log("Attach FileSearch Gadget to Outbar " + options.outbarName);

        // Neues div nach dem Tree hinzufügen
        document
            .querySelector(".otris-sidebar")
            .insertAdjacentHTML(
                "beforeend",
                "<h2 style='margin: 40px 10px 0; font-weight: 400'>Schnellsuche</h2><div id='fileSearchOutbar'></div>"
            );

        // Lade Gadget in neues div
        documentsContext.callGadget({
            gadgetScript: "Gadget_ou.cust.demo.filetype.outbar.fileSearch",
            gadgetAction: "doTile",
            gadgetDestination: "file",
        }, {
            el: "#fileSearchOutbar",
        });
    }
);

Im Skript muss nur der Outbar-Namen angepasst werden.

🎉 Nun sollte das Gadget in der Outbar angezeigt werden.

Outbar Design: Tree

Geändert werden muss nur der querySelector auf ".jstree-container-ul".

documents.sdk.exitRegistry.registerOutbarExitCallback(
    "library-examples", // <-- Hier entsprechend die Outbar ändern
    "Outbar.afterTreeRender",
    function(documentsContext, options) {
        console.log("Attach FileSearch Gadget to Outbar " + options.outbarName);

        // Neues div nach dem Tree hinzufügen
        document
            .querySelector(".jstree-container-ul")
            .insertAdjacentHTML(
                "beforeend",
                "<h2 style='margin: 40px 10px 0; font-weight: 400'>Schnellsuche</h2><div id='fileSearchOutbar'></div>"
            );

        // Lade Gadget in neues div
        documentsContext.callGadget({
            gadgetScript: "Gadget_ou.cust.demo.filetype.outbar.fileSearch",
            gadgetAction: "doTile",
            gadgetDestination: "file",
        }, {
            el: "#fileSearchOutbar",
        });
    }
);