System Designer

System Designer

  • Languages iconPortuguês (Brasil)
    • English
    • Ελληνικά
    • Svenska
    • 繁體中文
    • Help Translate
  • SUPPORT
  • GITHUB

›Tutorials

Introduction

  • What is System Designer?
  • O que é Design First?
  • Quick Start
  • Quick Start in videos

Guides

  • Installation
  • Create a System
  • Create a Schema
  • Edit a model
  • Create a Behavior
  • Create a Type
  • Create a Component
  • Run your System
  • Export a System
  • Import a System
  • Generate a diagram
  • Sync your systems with GitHub
  • Design a remote client system
  • Design a remote server system
  • Manage Extensions
  • Extend System Designer
  • Shortcuts

Tutorials

  • List of Examples
  • Bundle your CSS
  • Bundle your JavaScript
  • Bundle your HTML
  • Test a server-side application
  • Create a NPM module
  • Create a website
  • Listen to a model event
  • Listen to a data store event
  • Send messages
  • Send messages to other systems
  • Create an extension
  • Generate a model from a JSON file
  • Create a Graph system

Articles

  • Articles about the project

About

  • Quem está por trás do System Designer?
  • Privacy Policy
  • License
Translate

Create an extension

In this tutorial we will show how to create an extension in System Designer.

What can be done in extension?

  • toolbar item creation,
  • actions when clicking on them and
  • dialog creations.

Create an extension

  • click on the import button on the left toolbar,
  • a dialog is shown,
  • click on from the library radio button,
  • select Create an extension from the proposed systems,

Image Alt

  • click on the Import button. A system is created,
  • click on the system,
  • click on Description tab, remove all the text and type My first extension,

Image Alt

  • save,

Create a toolbar item

  • Click on Components tab and select ToolbarItem,

Image Alt

  • A toolbar item is already there in the system example. Click on toolbar-item-template.html link (next to html property),
  • You navigate to the HTML components and you can see the template used for showing the toolbar,

Image Alt

  • Click on it if you wan edit the html of the toolbar item,

Image Alt

Create an action when clicking on the toolbar item

  • click on Behaviors tab,
  • click on ToolbarItem on the right,
  • and then click toolbar-item-template on the right,

Image Alt

  • a list of behaviors is shown, and you can see that a click behavior exist,
  • click on it to edit it and update the code,

Image Alt

Test your extension

To test your extension, it is very easy. You just have to click on the run button and your extension will be installed in System Designer.

Image Alt

Then click on the new icon that is on the toolbar to see the dialog of your extension:

Image Alt

Debug your extension on macOS, Windows or Linux

  • go to the menu,
  • click on Menu > Toggle Developper Tools.

The Chrome Dev Tools is opened and you can debug your extension.

Image Alt

Add your extension

  • click on the extension manager button on the left toolbar,
  • a dialog is shown,
  • near From your systems click on your extension,
  • click on the Add button,

Image Alt

  • your extension is then been added into System Designer. You will be able to remove it from the same dialog.
← Send messages to other systemsGenerate a model from a JSON file →
  • Create an extension
  • Create a toolbar item
  • Create an action when clicking on the toolbar item
  • Test your extension
  • Debug your extension on macOS, Windows or Linux
  • Add your extension
System Designer is distributed under Apache License 2.0 - Copyright © 2024 Erwan Carriou