In This Topic
Tutorials / Other Technologies / Custom Snap-In implementation

Custom Snap-In implementation

In This Topic
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.
 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:

Building the content of the Custom Snap-In.
Copy Code 
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.

Calling a Custom Snap-In creation.
Copy Code 
[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,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
         MaxUploadSize = 36700160 // 35MB
     };
     AddMyCustomSnapIn(docuViewareInstance);
     using (StringWriter controlOutput = new StringWriter())
     {
         docuViewareInstance.RenderControl(controlOutput);
         DocuViewareRESTOutputResponse output = new DocuViewareRESTOutputResponse
         {
             HtmlContent = controlOutput.ToString()
         };
         return output;
     }
}

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

Adding the JavaScript function.
Copy Code 
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:

Custom action event handler routing.
Copy Code 
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
Serving DocuVieware through a REST API
Client/Server coming and going with Custom Actions