How to create a SAP Web IDE plugin - part 1

Introduction

SAP Web Integrated Development Environment (or SAP Web IDE) is a next-generation cloud-based meeting space where multiple project stakeholders can work together from a common web interface, connecting to the same shared repository with virtually no setup required. It includes multiple interactive features that allow you to collaborate with your colleagues and accelerate the development of your HTML5/UI5 applications.

Background Information

In this How-To Guide we will see how to create a new SAP Web IDE plugin from scratch and how to share it to other users.

The plugin we are going to create will add a new functionality to the Edit menu of our SAP Web IDE. It will be just showing a simple greeting message when calling the related menu item. Furthermore we will explore the creation of a custom template in order to extend the existing SAPUI5 Application template putting it in a new template category.

Prerequisites

As a prerequisite you need to have your installation of SAP Web IDE up and running.

Step-by-Step Procedure

This is the sequence of steps:

1. Create a new plugin project
2. Make some changes and run the plugin again
3. Create a folder for the plugin repository and copy the plugin into it
4. Create the catalog.json file
5. Deploy the project repository on the SAP HANA Cloud
6. Create a destination in the SAP HANA Cloud cockpit
7. Activate the plugin in SAP Web IDE
8. Create a second plugin for extending an existing template
9. Make some changes and test the new template
10. Copy the new plugin in the repository folder
11. Update the catalog.json file
12. Update the project repository on SAP HANA Cloud
13. Activate the plugin SAP Web IDE

*** NOTE: The first 7 steps will be discussed here the other 6 ones will be shown in the second part of this article.

Step 01 - Create a new plugin project

This first step will take care of creating the basic structure of the entire plugin. SAP Web IDE provides us with a wizard template for this in order to facilitate us in the creation of all the needed components.

1 - Open SAP Web IDE. Do File --> New --> Project from Template

2 - Select the Empty Plugin template and click Next

3 - Enter the name of the project (i.e. “coolpluginproject”) and click Next

4 -  Enter a name for the new plugin and a short description; choose to include the sample implementation code and click Finish

5 - This is the final structure of the entire project

6 - If you want to test the new created plugin you can do it: select the plugin.json file and click on Run --> Run Plugin Project

7 - A new tab will open in your browser. This new tab contains a copy of your SAP Web IDE environment in debug mode with the plugin already enabled in it. If you click on the Tools menu, you should see the new plugin. For the moment it just contains some sample code

8 - By clicking on Tools --> Sample --> Hello World you will see that the new plugin is working fine. Click on OK to close this message

9 - Close the second tab in the browser. You have successfully created and tested your first plugin.

Step 02 -  Make some changes and run the plugin again

1 - Be sure you have closed the second tab in the browser and that you are working on the normal SAP Web IDE environment (no debug mode!)

2 - Just for showing how to make some basic changes to this project, we can try to change the labels in the i18n property file and the name of the plugin. Go in the i18n folder and double click on the file i18n.properties. Change the value for the command_helloworld property to “Welcome” and the value for the property commandgroup_sample to “Greetings”, then save the file

3 - Double click on the plugin.json file. It will be opened on the right side. Replace all the occurrences of the word “tools” with “edit” and save the file

4 - Now if you run the plugin again you will see that there is a new item, “Greetings --> Welcome”, in the Edit menu

5 - Close the Debug Mode - SAP Web IDE

6 - You have successfully changed your first plugin!

Step 03 -  Create a folder for the plugin repository and copy the plugin into it

Since you may have several plugins in your environment, you need to create a plugin repository to host them. Of course you can use repositories in order to group plugins by functionality. Each plugin repository will contain a file named catalog.json with all the information related to any included plugin. We will create this file in the next chapter

1 - Open SAP Web IDE

2 - Right click on the Workspace root folder and choose New --> Folder. Enter the name of the plugin repository (i.e. “bigpluginrepo”) and click on OK

3 - Now select the folder containing the plugin project we have created previously, right click on it and choose Copy. Select the new plugin repository folder, right click on it and choose Paste to copy the plugin project into this new container. This is the final structure of your plugin repository. It now contains your first plugin

Step 04 - Create the catalog.json file

This file is required because the system needs to know which are the plugins contained in your repository.

1 - Right click on bigpluginrepo, the plugin repository folder, and choose New --> File. Enter catalog.json as the name of the new file and click on OK

2 - An empty file opens on the right. Type the following code in the editor and save the file

{

    "name" : "Big Plugin Repository",

    "plugins" : [

        {

            "name" : "coolplugin",

            "description" : "This is my cool plugin",

            "path" : "/coolpluginproject",

            "version" : "1.0.0"

        }

    ]

}

NOTE: be careful if you copy & paste this code because it could be pasted with wrong characters

3 - You have successfully created the catalog.json file.

Step 05 - Deploy the project repository on the SAP HANA Cloud

This step is mandatory to see the plugin among all the available external plugins. We need to deploy our plugin repository folder to the SAP HANA Cloud. This operation will also take care of automatically activate the new plugin.

1 - Open SAP Web IDE

2 - Right click on the plugin repository folder and select Deploy --> Deploy to SAP HANA Cloud Platform

3 - Enter the password for your account and click on Login

4 - Click on Deploy

5 - Your plugin repository has been successfully deployed to SAP HANA Cloud. Click on Open the application's page in the SAP HANA Cloud Platform cockpit

6 - If you check the status of your application it should be now started. Look at the Application URL on the same page and write down/copy in the clipboard this link: it will be used in the next chapter

7 - You have successfully deployed your project to SAP HANA Cloud. You can close this message box on SAP Web IDE

Step 06 - Create a destination in the SAP HANA Cloud cockpit

In order for the system to recognize the new plugin, you need to create a new destination in the SAP HANA Cloud cockpit. This is a special destination witch points to the application URL of your plugin application in the SAP HANA Cloud.

1 - Open the SAP HANA Cloud cockpit (i.e. https://account.hanatrial.ondemand.com/cockpit). Go on Destinations and click on New Destination

2 - Enter the following values to create the new destination:

Before saving the destination, we need to add some properties to the destination. These are the properties we need to add:

3 - You have successfully created a destination for your plugin repository.

Step 07 - Activate the plugin in SAP Web IDE

Let’s activate the plugin. This is made directly from in SAP Web IDE

1 - Open SAP Web IDE or refresh it if you have it already open

2 - Click on the Settings button on in the left side toolbar. Select the Plugins branch. Choose the plugin repository("My Plugin Repository") you have created and enable your plugin, then click on Save

3 - Refresh SAP Web IDE

4 - Now, if you look in the Edit menu you should see your plugin successfully activated

5 - Congratulations! You have successfully activated your first SAP Web IDE plugin.

Let's continue with the second part of this article where we will learn how to create a new template!