Step 1: Write an App that Generates a Diagram using the VisualScript SDK

SmartDraw SDK

Step 2: Write a Simple One Page Web App

The web app presents a user interface that is displayed in a modal inside SmartDraw. The web app should:

  • Collect user input to specify the content of the diagram to be generated.
  • Passing the user specified parameters to the app that generates the script.
  • Call SmartDraw to render the diagram
  • Store and retrieve user input from each session

Below is the simplest possible example of a working extension. It will generate a diagram with a single shape that says "Hello World."

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>  
</head>
<body>
    <button onclick="go()">Generate VisualScript</button>
         
    <script src="https://cs1.smartdraw.com/assets/api/sdapi-v1.min.js"></script>
    <script type="text/javascript">
        var go = function ()
        {
            var vs =
            {
               
                Shape:
                {
                    Label: "Hello World"
                }
            };
 
            SDAPI.VS.VSDone(vs, function (crossWindowMessage)
            {
                if (crossWindowMessage.Payload === false)
                {
                    if (crossWindowMessage.ErrorMessage != null) console.log(crossWindowMessage.ErrorMessage);
                    return;
                }
 
                //if the call telling SmartDraw to create a diagram from the VSON or inject the VSON into the current diagram succeeded, there will be no callback
            });
        };
    </script>
</body>
</html>

The "Build Diagram" button causes the web app to call the diagram generating app, passing the user input, and returns the script to SmartDraw for rendering.

Use the SmartDraw Bridging Library

The SmartDraw Bridging library is a JavaScript library that allows your web app to pass the script to SmartDraw for rendering as a diagram. It also allows user input to be stored and retrieved each time the extension is run.

Learn about the bridging library.

To get the bridging library, click here.

SmartDraw Bridging Library
var vs =
{
    Version: "20",
    Shape:
    {
        Label: "Hello World"
    }
};
 
SDAPI.VS.VSDone(vs, function (crossWindowMessage)
{
    if (crossWindowMessage.Payload === false || crossWindowMessage.Success === false)
    {
        if (crossWindowMessage.ErrorMessage != null) console.log(crossWindowMessage.ErrorMessage);
    }
 
    //if the call telling SmartDraw to create a diagram from the VSON or inject the VSON into the current diagram succeeds, there will be no callback.
});

Calling VS.Done

This method is called once the VSON script is returned from the app that generates it. It passes the script to SmartDraw so it can render it as a diagram.

Save and Load A User's Settings via Your Extension

There is an additional feature of the bridging library that allows you to save and load a user's settings with an extension. The user's "settings" with an extension is an arbitrary string that can be anything you want. You can use it to persist data between uses of your extensions for your users. Below is a slightly more complicated example that has the option to set/get the user's settings.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>  
</head>
<body>
    <button onclick="setSettings()">Set Settings</button>
    <button onclick="getSettings()">Get Settings</button>
    <button onclick="go()">Generate VisualScript</button>
    <div>
        <textarea id="settings" style="height: 200px; width: 500px;"></textarea>
    </div>
         
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cs1.smartdraw.com/assets/api/sdapi-v1.min.js"></script>
 
    <script type="text/javascript">
        var settings = $("#settings");
         
        var setSettings = function ()
        {
            var currentSettings = settings.val();
            SDAPI.VS.SetUserSettings(currentSettings, function (crossWindowMessage)
            {
                if (crossWindowMessage.Payload === false)
                {
                    if (crossWindowMessage.ErrorMessage != null) console.log(crossWindowMessage.ErrorMessage);
                }
                else
                {
                    alert("Set user settings to " + currentSettings);
                }
            });
        };
 
        var getSettings = function ()
        {
            SDAPI.VS.GetUserSettings(function (crossWindowMessage)
            {
                if (crossWindowMessage.Payload == null)
                {
                    if (crossWindowMessage.ErrorMessage != null) console.log(crossWindowMessage.ErrorMessage);
                }
                else
                {
                    alert("Server returned user settings: " + crossWindowMessage.Payload);
                }
            });
        };
 
        var go = function ()
        {
            var vs =
            {
                
                Shape:
                {
                    Label: "Hello World"
                }
            };
 
            SDAPI.VS.VSDone(vs, function (crossWindowMessage)
            {
                if (crossWindowMessage.Payload === false)
                {
                    if (crossWindowMessage.ErrorMessage != null) console.log(crossWindowMessage.ErrorMessage);
                    return;
                }
 
                //if the call telling SmartDraw to create a diagram from the VisualScript or inject the VisualScript into the current diagram succeedes, there will be no callback.
            });
        };
 
    </script>
</body>
</html>

Note that all the functions in the bridging library are asynchronous and you must include a callback if you want to act on the completion of the operation.

Add Your Extension to SmartDraw

Clicking on the Create Extension icon lets you add a icon for your extension to the Extensions folder.

Create a new server extension

Choose Server Extension and enter the name and URL of your web app.

Server extension configuration modal