Custom snap-in implementation

This guide requires completion of the guide to your first DocuVieware MVC Razor page.

A snap-in is an interface element that can be used for various purposes. DocuVieware comes with several built-in snap-ins such as the Thumbnails, Bookmarks, Text Search, and Annotations palette.

This guide shows how to create a custom snap-in with a button that sends a ping command to the server, which replies with a pong message.

Requirements — .NET Framework 4.6 or above

Note — Screenshots were taken using Visual Studio 2015 and GdPicture.NET 14. They may differ from the current release.

Preparing the custom snap-in content

  1. Add the mandatory imports you’ll need in the Index.cshtml view file:

    C#
    @using System.Web.UI.HtmlControls;
    @using System.Drawing;

  2. Implement a utility function that converts a .NET Color object to a hexadecimal value for use in HTML:

    C#
    @functions
    {
     private static string HexConverter(Color c)
     {
     return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
     }
    }

  3. Build the custom snap-in content and add it to the DocuVieware control:

    C#
    @{
     GdPicture14.WEB.DocuVieware docuVieware = new GdPicture14.WEB.DocuVieware
     {
     ID = "DocuVieware1",
     Height = new System.Web.UI.WebControls.Unit("100%"),
     Width = new System.Web.UI.WebControls.Unit("100%")
     };
     using (HtmlGenericControl icon = new HtmlGenericControl("svg"))
     {
     icon.Attributes["viewBox"] = "0 0 16 16";
     icon.Attributes["width"] = "100%";
     icon.Attributes["height"] = "100%";
     icon.InnerHtml = "<path d=\"M6 0l-6 8h6l-4 8 14-10h-8l6-6z\"></path>";
     using (HtmlGenericControl panel = new HtmlGenericControl("div"))
     {
     panel.ClientIDMode = ClientIDMode.Static;
     panel.ID = "customSnapInTutorialPanel" + docuVieware.UniqueID;
     using (HtmlGenericControl customSnapInTutorialButtonDiv = new HtmlGenericControl("div"))
     {
     customSnapInTutorialButtonDiv.Style["float"] = "left";
     customSnapInTutorialButtonDiv.Style["margin-top"] = "6px";
     customSnapInTutorialButtonDiv.Style["margin-left"] = "6px";
     using (HtmlGenericControl customSnapInTutorialButton = new HtmlGenericControl("button"))
     {
     customSnapInTutorialButton.ID = "customSnapInSubmit" + docuVieware.UniqueID;
     customSnapInTutorialButton.Style["height"] = "26px";
     customSnapInTutorialButton.Style["background-color"] = HexConverter(docuVieware.ActiveSelectedColor);
     customSnapInTutorialButton.InnerHtml = "Ping";
     customSnapInTutorialButton.Attributes["class"] = "btn-valid";
     customSnapInTutorialButton.Attributes["onclick"] = "ping(); return false;";
     customSnapInTutorialButtonDiv.Controls.Add(customSnapInTutorialButton);
     }
     panel.Controls.Add(customSnapInTutorialButtonDiv);
     }
     docuVieware.AddCustomSnapIn("customSnapInTutorial", "Custom Snap-In", icon, panel, true);
     }
     }
     docuVieware.RenderControl(Output);
     }

  4. Add the JavaScript function called on the snap-in button click event that triggers the custom action:

    JavaScript
    <script>
     function ping() {
     DocuViewareAPI.PostCustomServerAction("DocuVieware1", true, "ping");
     }
    </script>

Handling your action server-side

As described in the client/server coming and going with custom actions guide, implement a custom action that processes the snap-in button click event.

Add the custom action event handler in the Global.asax.cs file:

C#
private void CustomActionsHandler(object sender, CustomActionEventArgs e)
{
 if ((e.actionName == "ping"))
 {
 e.message = new DocuViewareMessage("Pong", icon: DocuViewareMessageIcon.Information);
 }
}

Compile and start the page. The custom snap-in icon will appear in the left panel.

Custom snap-in icon appearing in the DocuVieware left panel

Now, if you select it and click the ping button, it’ll trigger the custom action and you should see a Pong message coming back from the server.