AddCustomSnapIn

In This Topic

AddCustomSnapIn

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

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.

JavaScript

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);