Skip to Content
Author's profile photo David Stocker

Your First Extension: A tutorial for building Design Studio 1.x and Lumira 2.x Designer extensions

Design Studio allows you via extensions to add any arbitrary Javascript/HTML/CSS web content to your apps and dashboards.  These extensions are not one-offs.  Rather, they become part of your palette and are always available when you are working on apps in the designer.  This tutorial series walks you through the entire process of creating a your first functional component; a configurable gauge component.  It presumes that you have Eclipse and Design Studio installed and that you know your way around Design Studio.  Prior knowledge of html, Javascript and CSS is helpful, but not mandatory.  We’ll walk you through the bits that you need to know.

There are many Design Studio SDK articles on this site and this tutorial series does not break new ground in that respect.  What it does do, is try to bring a comprehensive, systematic approach to learning how to use the SDK.  It runs through 30 individual installments, grouped into 14 “parts”, each covering a general theme.

Notes on Terminology

Dashboard and Application seem to be used interchangeably.  If there is any consensus, it might be that “dashboards” are simpler and “applications” are more complex.  There is no consensus on when a dashboard has enough complexity to be called an application.  For simplicity, since we don’t want to always write “dashboards and applications”, we’ll just call them apps here.

Likewise, “Extension” and “Plugin” are interchangeable.  Here, however, we will split hairs and make an arbitrary distinction.  An “Extension” means the web content that you’ll want to make available to Design Studio and that icon in the design palette, which the designer will access.  “Plugin” refers to the technical plumbing that you’ll need to supply to Design Studio’s Eclipse core; in order to make your extension available to the designer.  The designer of an app installs and uses an extension.  The developer of an extension makes a plugin.

Downloadable Content:

With each major milestone in the extension creation process, we’ll add a repository to Github.  They are referenced individually at the end of each post.  In addition, everything (including the final installer) are available on SAP’s open source repository on Github.

Chapters:

Setup

Part 0 – Setting Up Eclipse

Part 1 – Project Creation

 

 

Introduction to D3 and Components

Part 2a – Your first Steps with D3

Part 2b – Getting your Arc into a Component

 

 

Properties

Part 3a – Making your Arc Configurable

Part 3b – Adding Properties to the Properties Pane

Part3c – The Dark Art of Property Synchronization

Part 3d – Bringing Your Properties to Life

 

 

Additional Properties Sheet

Part 4a – Introducing the Additional Properties Sheet

Part 4b – The Positioning Visualizer

Part 4c – Putting the Positioning Visualizer into the Additional Properties Sheet

Part 4d – The APS Interacting with the Canvas

 

 

Scripting API

 

Part 5 – Making your Component Scriptable

 

 

Data Binding

 

Part 6a – Adding Property Binding: Preparation

 

Part 6b – Adding Property Binding

 

 

Advanced Property Types Introduced in 1.6

 

Part 7a – Property Arrays and Complex Properties

 

Part 7b – Using an Object Array to Create Conditional Formatting

 

 

Advanced Polish: Guide Lines and Arcs

 

Part 8a – Drawing Radial Guide Lines and Arcs with D3

 

Part 8b – Adding Radial Guide Lines and Arcs to the Gauge Component

 

 

Advanced Polish: Adding an Indicator Needle

 

Part 9a – Drawing an Indicator Needle (D3)

 

Part 9b – Drawing an Indicator Needle in the Component

 

 

Advanced Polish: Animations

 

Part 10a – The “data” in Data Driven Documents

 

Part 10b – Transitions in D3

Part 10c – Transitions in the Component

Advanced Polish: Dynamic Text Callouts

 

Part 11a – D3 and the SVG Text Element

 

Part 11b – Dynamic Text Positioning with D3

Part 11c – Text callouts in the Component

 

 

 

Advanced Polish: Custom Component CSS Styling

 

Part 12 – Cascading Stylesheets in Custom Components

Infrastructure: RequireJS

 

Part 13 – RequireJS

Creating an Installer Zip File

 

Part 14 – Zipit ‘n Shipit

Assigned Tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Very useful tutorial, I'm all set with eclipse now.

      Keen for the next chapter!

      Thanks

      Author's profile photo Former Member
      Former Member

      Great. That's an article I've been expected for a long time.  Looking forward for next...

      Thanks

      Author's profile photo Former Member
      Former Member

      Amazing tutorial, you are doing a incredible article. I'm waiting more!

      Author's profile photo Former Member
      Former Member

      Great job~ waiting for more in the series

      Author's profile photo Former Member
      Former Member

      Hi, I get an Error on Part 0 – Setting Up Eclipse: Step 15;

      I cleaned Up the project and the Errors are still there,

      may someone help me?

      Here are some Screenshots:

      Error 1

      Error 2

      Regards

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      Those errors are pretty cryptic.  I"ve never seen them not disappear after cleanup.  I'll ask one of the dev if they've seen it before.

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      My New Year's resolution was to come to grips with Git.  Now, the "finished" project of each major milestone is available as a repository on Github.  Follow the "-(Link to the... )" entries and these will take you to the Github repository pages for those milestones.

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      Updated to add parts 10 and 11 to the main index.

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      Part 12 is now in the Index.

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      Part 14 is in.  It's done!

      Author's profile photo Matthew Shaw
      Matthew Shaw

      Incredible blog series. Congratulations on a fine piece of work

      Author's profile photo Shahzad Khero
      Shahzad Khero

      Very Helpful. Keep up the good work.

      Author's profile photo Alfons Gonzalez Comas
      Alfons Gonzalez Comas

      Nice tutorial!

      Author's profile photo Richard Pulliam
      Richard Pulliam

      Great Tutorial!! Very organized, thorough, and easy to follow.

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      Thank You!