Hello world

Overview

This tutorial shows how to display a Hello world dialog with the Next Design extension.
Let's add a button to the ribbon and script an extension that displays a Hello world dialog when the button is pressed.

Overall flow

• Preparation for script development
• Defining extension points with manifests
• Implementation of dialog display processing

Public Sample

• The set of source code created as a result of this tutorial is published on GitHub.

  External link: hello-world

Goal Image

• When you start Next Design, the button added by the extension will be displayed on the ribbon.

• When you click the Say Hello button, the following message will be displayed.
  

  

Preparation for script development

Follow the steps below to create the files necessary for extension development.

• Create a hello-world folder directly under the following folder, and create an images folder in the hello-world folder.

  %LOCALAPPDATA%\DENSO CREATE\Next Design\extensions

• Create empty files named manifest.json and main.cs in the hello-world folder.
• In the hello-world\images folder, store the image file you want to appear in the icon of the button named About.png.

note

If you use the public sample, please copy the hello-world folder of the public sample directly under the above folder.

Defining Extension Points with Manifests

To define an extension point, define the following in the created manifest.json.

• Execution program entry point definition
• extension lifecycle definition
• UI extension point definitions (ribbon tabs, groups, buttons)
• Specify icon file for UI
• command extension point definition

Implementation example

This manifest defines the buttons on the ribbon and the commands to be called when the buttons are pressed.

manifest.json

{
  //extension definition
  "name": "HelloWorld",
  "version": "1.1.0",
  "publisher": "DENSO CREATE INC.",
  "license": "According to the Next Design License Agreement. Copyright (C) 2019 DENSO CREATE INC. All rights reserved.",

  "main": "main.cs", //Specify a C# script as the entry point.
  "lifecycle": "application", //Specify the application lifecycle as the lifecycle.

  //extension point definition
  "extensionPoints": {
    //ribbon
    "ribbon": {
      "tabs": [
        //Define additional ribbon tabs for the extension.
        {
          "id": "HelloWorld.MainTab",
          "label": "Hello World",
          "orderBefore": "System.View",
          "groups": [
            //Define groups to separate ribbon tabs.
            {
              "id": "HelloWorld.FirstGroup",
              "label": "Group 1",
              "controls": [
                //Define a Say Hello button.
                {
                  "id": "HelloWorld.SayHelloButton",
                  "type": "Button",
                  "label": "Say Hello",
                  "imageLarge": "images/About.png",
                  "command": "Command.SayHello" //Specifies the id of the command defined in Commands below.
                }
              ]
            }
          ]
        }
      ]
    },

    //command
    "commands": [
      //Define a command that calls the command handler `SayHello`.
      {
        "id": "Command.SayHello",
        "execFunc": "SayHello" //Specifies the public function implemented in the entry point.
      }
    ]
  }
}

Implementation of dialog display processing

To implement the dialog display process, implement the following content in the main.cs specified as the entry point in the manifest.

• Command handler for dialog display processing (public method)

Implementation example

This C# script implements a command handler using the notification dialog display API provided by ND.

main.cs

//command handler public function
public void SayHello(ICommandContext context,ICommandParams parameters)
{
    App.Window.UI.ShowInformationDialog("Hello !", "Hello World");
}