Tutorials
/ ASP.NET Web Forms
/ Custom Snap-In implementation
Custom Snap-In implementation
In This Topic
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 and GdPicture.NET™ 14, it may differ from the current release.
Preparing the Custom Snap-In content
You are going to implement a simple button which action will be to send a "ping" command to the server and it will reply with a "pong" message.
Step 1: Add the custom Snap-In content in the Page_Load code behind (that will be Default.aspx.cs).
You want to do this only when the page is not in a PostBack context.
A custom snap-in is created using the AddCustomSnapIn method that takes several mandatory elements:
- a name, that's what you will use if you want to select your custom snap-in by code using the SelectSnapIn JavaScript API method
- a title, that's what is displayed on top of it when it is selected, in other words it is the snap-in label, here it is "Custom Snap-In"
- an icon, in this tutorial it is a very simple lightning bolt SVG icon
- a content, that is the HTML content your Snap-In will contain, in this tutorial it is just a simple <div> with a <button> in it
Please note the onclick event on the button, it calls the ping() function but you will implement it later on since it needs to be done client side.
Step 2: Add two more things: the HexConverter utility function and the Custom Action handler that will send the message to the client.
Step 3: Add the custom action event handler in the Global.asax.cs file like this:
Now you are ready to proceed to client side.
Preparing your Custom Action client side
Not much to do client side besides setting up the JavaScript function that will trigger the custom action you implemented previously.
Add a <script> tag in the <head> section of the page, like this:
Compile and start the page, the custom Snap-In icon will appear in the left panel.

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