Skip to Content
Author's profile photo David Stocker

Your First Extension: Part 14 – Zipit ‘n Shipit (aka Creating an Installer)

This is part of a tutorial series on creating extension components for Design Studio.

Our gauge is effectively done.  There are lot’s of small features that we could still pack into it, but there are no real new concepts that we can use the gauge as a credible vehicle to explore and the component.js already weighs in at 1300 lines.  It is also already very capable and flexible and could be a powerful tool in the hands of any good designer.  So it is time to stop tinkering and finally create an installer that will allow anyone to add the gauge to their Design Studio via the Tools menu.

There are three major steps to creating a Tools menu friendly installer:

  1. Create a Feature Project (as a project in Eclipse)
  2. Add a Category to your Feature Project
  3. Create a Deployable Feature

Creating a Feature Project

Use the following steps to create a new feature project in Eclipse. 

  1 – From the File Menu, select New -> Feature Project if it is in the recents list and skip to step 3.  If Feature Project is not listed in the recents list, select New – Other.

Part14.01.png

  2 – In the wizard selector dialog’s search bar, start tying in “Feature Project”, until you see it in the window.  Select it.

Part14.02.png

  3 – Give your project a name.  We’ll call ours SCN Gauge.  Click Finish.

Part14.03.png

  4 – A new feature project will be created in Eclipse.  Because this kind of project is associated with its own perspective, you will get the popup asking if you want to switch to that perspective.  Click yes.  This will now open the Plugin-ins and Fragments perspective.

Part14.04.png

  5 – In Plugin-ins and Fragments perspective, you’ll see a row of tabs across the bottom.  Select the Included Plug-ins tab.

Part14.05.png

  6 – Find the Plug-in Details area, on the right hand side.  Uncheck Unpack the plug-in archive after the installation. 

Part14.06.png

  7 – Save

Add a Category

  1 – From the File Menu, select New -> Other.

Part14.01.png

  2 – In the wizard selector dialog’s search bar, start tying in “Category”, until you see it in the window.  Select it.

Part14.07.png

  3 – The Category Definition dialog will open and ask you which of the open Eclipse projects should be the parent folder.  Select the SCNGauge project folder.

Part14.08.png

  4 – In the Category perspective, click on the New Category button (in the top, center).  In the ID field, add “com.sap.ip.bi.zen.sdk”.  This is the standard category ID for all Design Studio extensions.  In the name field, add whatever you want.

Part14.10.png

  5 – Click on the Add Feature button.  This will open the Feature Selection dialog.  Select the SCNGauge feature. 

Part14.11.png

Part14.12.png

  6 – Save

Creating the Installer File

  1 – Right Click on the Feature Project and select Export.

Part14.13.png

  2 – When the Export dialog comes up, select Deployable features.

Part14.14.png

  3 – Add a destination.  In this case, I’m choosing a file on my desktop.

Part14.15.png

  4 – In the Options tab, click on Browse and then select the category.xml file that you previously created.

Part14.17.png

  5 – Click on Finish. 

That’s It!  I’ve saved the example project and install zip into a public Github repository.  You have now created a comprehensive and functional first Design Studio component.  You have touched the basics and should be prepared for building your own other components.  This is the last installment and our tutorial is now at an end. 

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Dave,

      This is a great wrap-up to a comprehensive series on SDK development.  For the sake of completeness, a useful follow-up blog to this one would be an explanation of how to sign the installer ZIP with a certificate to avoid the following message when installing an extension:

      SigningDesignStudioExtension.png

      I suspect such a topic would be well received by your audience 🙂 .

      Thanks,

      Mustafa.

      Author's profile photo Manfred Schwarz
      Manfred Schwarz

      Hi David,

      Great article ! i was asked by a customer the same question as Mustafa was asking. Is it possible to get more insight about how to sign a .zip file. Interesting would also be how to obfuscate the source and also if it is possible to use licensekeys or similar in Design Studio.

      Best regards & keep on writing !!

      Manfred

      Author's profile photo Former Member
      Former Member

      Dave
      I could create extension few weeks ago, but now it fails on step 6 in 'Creating a Feature Project'. Any ideas.

      Author's profile photo Varun Rayen
      Varun Rayen

      David,

      How can I package multiple custom components that can be selected/deselected from a single archive file during installation in SAP Design Studio?

      Thanks!

      Author's profile photo Agnetha-Kristin Kraus
      Agnetha-Kristin Kraus

       

      Hi David,

      great tutorial!!

      I have tried to deploy an extension from the SAP SDK samples for starters.

      Running Design Studio from Eclipse, the extension and the corresponding group is showing up in the components tab and can be used.

      As soon as I deploy the extension and install it to Design Studio, it shows up in the components tab when I start Design Studio. However as soon as I create or open a Design Studio application, the extension and its group simply disappear.

      Did you ever face this kind of issue before?

      First I thought that this was connected to the namespace, but I changed it in all the places.

      I have the same problem when I try to install the extension to Lumira Designer. But in this case it never shows up in the components tab. Even when running Lumira Designer from Eclipse, the component and its group are missing.

      Thanks in advance for any hint!

      Best regards

      Agnetha