Reference Guide
Reference Guides / JavaScript API / Actions / Interface / AddCustomSnapIn
In This Topic
    AddCustomSnapIn
    In This Topic
     AddCustomSnapIn

    This function allows you to add a custom snap-in.

    AddCustomSnapIn: function (docuViewareID, name, caption, icon, panel, visible, onSelection)

    Parameters

    docuViewareID
    The identifier for the DocuVieware™ instance you want to add the custom snap-in to.
    name
    A string that represents the name of your snap-in, this is what will be used later for interaction.
    caption
    A string that represents the caption of your snap-in, this is the title that will be displayed next to the collapse button.
    icon
    Either a string that contains SVG markup or a DOM element (see example below).
    panel
    Either a string that contains the panel markup or a DOM element (see example below).
    visible
    A boolean to define if the snap-in shall be visible on creation.
    onSelection
    A function that will be executed upon snap-in selection (optional).

    Return Value

    1 if error, 0 if success.

    Example of usage

    This JavaScript add a new snap-in to DocuVieware instance called "DocuVieware1" with icon and content.

    document.addEventListener("DOMContentLoaded", function () {
       var icon = document.createElement("svg");
       icon.setAttribute("viewbox", "0 0 16 16");
       icon.setAttribute("height", "100%");
       icon.setAttribute("width", "100%");
       icon.innerHTML = "<path d='M15.074 2.794c-1.467-1.71-3.644-2.794-6.074-2.794-4.418 0-8 3.582-8 8s3.582 8 8 8c2.43 0 4.607-1.084 6.074-2.794l-5.074-5.206 5.074-5.206zM11 1.884c0.616 0 1.116 0.499 1.116 1.116s-0.499 1.116-1.116 1.116-1.116-0.499-1.116-1.116c0-0.616 0.499-1.116 1.116-1.116z'></path>";
    
       var panel = document.createElement("div");
       panel.style.padding = "10px";
       panel.innerHTML = "<table style='width: 100%;'><tbody><tr><th>Fruits</th><th>Points</th><th>Levels</th></tr><tr><td>Cherry</td><td>100</td><td>1</td></tr><tr bgcolor='#F2F2F2'><td>Strawberry</td><td>300</td><td>2</td></tr><tr><td>Orange</td><td>500</td><td>3 & 4</td></tr><tr bgcolor='#F2F2F2'><td>Apple</td><td>700</td><td>5 et 6</td></tr><tr><td>Melon</td><td>1 000</td><td>7 & 8</td></tr><tr bgcolor='#F2F2F2'><td>Galboss</td><td>2 000</td><td>9 & 10</td></tr><tr><td>Bell</td><td>3 000</td><td>11 & 12</td></tr><tr bgcolor='#F2F2F2'><td>Key</td><td>5 000</td><td>13 & +</td></tr></tbody></table>";
    
       DocuViewareAPI.AddCustomSnapIn("DocuVieware1", "pacman", "Pac-Man (パックマン)", icon, panel, true, function () { console.log("pacman!"); });
    }, false);