DocuVieware Reference Guide
Custom Snap-In implementation
Tutorials > Other Web Technologies using REST > Angular2 > Custom Snap-In implementation
This tutorial assumes that you have fully followed the Serving DocuVieware through a REST API tutorial first as its starting point is the end of it.
 Overview

Snap-Ins are very powerful interface elements that can be used for various purposes. DocuVieware™ comes with several handy built-in snap-ins such as the Thumbnails, Bookmarks, Text Search or Annotations palette.

This tutorial shows how to create a very simple Custom Snap-In with a button that will trigger a Custom Action server-side to return a message.

You are going to implement a Custom Snap-In that will contain a simple button which action will be to send a "ping" command to the server and it will reply with a "pong" message.

DocuVieware™ requires .NET Framework 4.6 or above.
The screenshots have been taken using Visual Studio 2015 and GdPicture.NET™ 14, it may differ from the current release.

Summary

 Preparing the Custom Snap-In content

Step 1 : Add a method that will build the content of the Custom Snap-In and add it to a given DocuVieware™ instance. Simply add this method in your DocuViewareRESTController.cs class, like this:

private static void AddMyCustomSnapIn(DocuVieware dvInstance)
{
    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" + dvInstance.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" + dvInstance.UniqueID;
                    customSnapInTutorialButton.Style["height"] = "26px";
                    customSnapInTutorialButton.Style["background-color"] = ColorTranslator.ToHtml(dvInstance.ActiveSelectedColor);
                    customSnapInTutorialButton.InnerHtml = "Ping";
                    customSnapInTutorialButton.Attributes["class"] = "btn-valid";
                    customSnapInTutorialButton.Attributes["onclick"] = "ping(); return false;";
                    customSnapInTutorialButtonDiv.Controls.Add(customSnapInTutorialButton);
                }
                panel.Controls.Add(customSnapInTutorialButtonDiv);
            }
            dvInstance.AddCustomSnapIn("customSnapInTutorial", "Custom Snap-In", icon, panel, true);
        }
    }
}
               

Step 2 : Add a call to this newly created method between your control creation and rendering so your custom Snap-In is added to the DocuVieware™ object markup in the response.

[HttpPost]
[Route("api/DocuViewareREST/GetDocuViewareControl")]
public DocuViewareRESTOutputResponse GetDocuViewareControl(DocuViewareConfiguration controlConfiguration)
{
    if (!DocuViewareManager.IsSessionAlive(controlConfiguration.SessionId))
    {
        if (!string.IsNullOrEmpty(controlConfiguration.SessionId) && !string.IsNullOrEmpty(controlConfiguration.ControlId))
        {
            DocuViewareManager.CreateDocuViewareSession(controlConfiguration.SessionId,
               controlConfiguration.ControlId, HttpRuntime.AppDomainAppPath + "\\Cache", 20);
        }
        else
        {
            throw new Exception("Invalid session identifier and/or invalid control identifier.");
        }
    }
    DocuVieware docuViewareInstance = new DocuVieware(controlConfiguration.SessionId)
    {
        AllowPrint = controlConfiguration.AllowPrint,
        EnablePrintButton = controlConfiguration.EnablePrintButton,
        AllowUpload = controlConfiguration.AllowUpload,
        EnableFileUploadButton = controlConfiguration.EnableFileUploadButton,
        CollapsedSnapIn = controlConfiguration.CollapsedSnapIn,
        ShowAnnotationsSnapIn = controlConfiguration.ShowAnnotationsSnapIn,
        EnableRotateButtons = controlConfiguration.EnableRotateButtons,
        EnableZoomButtons = controlConfiguration.EnableZoomButtons,
        EnablePageViewButtons = controlConfiguration.EnablePageViewButtons,
        EnableMultipleThumbnailSelection = controlConfiguration.EnableMultipleThumbnailSelection,
        EnableMouseModeButtons = controlConfiguration.EnableMouseModeButtons,
        EnableFormFieldsEdition = controlConfiguration.EnableFormFieldsEdition,
        EnableTwainAcquisitionButton = controlConfiguration.EnableTwainAcquisitionButton,
        EmbedJQuery = false,
        MaxUploadSize = 36700160 // 35MB
    };
    AddMyCustomSnapIn(docuViewareInstance);
    using (StringWriter controlOutput = new StringWriter())
    {
        docuViewareInstance.RenderControl(controlOutput);
        DocuViewareRESTOutputResponse output = new DocuViewareRESTOutputResponse
        {
            HtmlContent = controlOutput.ToString()
        };
        return output;
    }
}

Step 4 : Add the JavaScript function called on the snap-in button click event that will trigger the custom action, like this:

function ping() {
   DocuViewareAPI.PostCustomServerAction("DocuVieware1", true, "ping");
}
 Handling your action server side

As seen in the Client/Server coming and going with Custom Actions tutorial, you are going to implement a simple custom action that will process the snap-in button click event.

All you need to do now is add the proper custom action event handler routing in your dispatcher in the Global.asax.cs file like this:

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

Compile and start the REST service, the custom Snap-In icon will appear in the left panel when loaded from your client page.

Now, if you select it and click on the ping button, it will trigger the custom action and you will see a "Pong" message coming back from the server.

See Also