Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
david_stocker
Contributor


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



15 Comments