How to create a SAP Web IDE feature - part 1

[former_member125464]

[*** Updated on September 14, 2016 ***]

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 capabilities that allow you to collaborate with your colleagues and accelerate the development of your HTML5/UI5 applications. One of these is the ability to create new features and plugins that perfectly integrate with the existing SAP Web IDE functionalities in order to customize the working development envirnoment. This particular extension is named SAP Web IDE SDK and it's widely described at the URL SAP Web IDE SDK

Background Information

In this How-To Guide we will see how to create from scratch a new SAP Web IDE feature containing a couple of SAP Web IDE plugins from scratch and how to share this feature with other users.

These plugins will add a some sample functionalities to the Edit and Tools menus of SAP Web IDE. They will be just showing a simple greeting message when used. Furthermore we will explore the creation of a custom template in order to extend the existing SAPUI5 Application template. This new template will be located in a new category.

Prerequisites

1. An account to the HANA Cloud Platform (we are using Trial Landscape here)
2. SAP Web IDE

Step-by-Step Procedure

This is the sequence of steps:

1. Create a new feature project with the first plugin inside
2. Test the first plugin
3. Create a second plugin, change its code and test it
4. Make some further changes to the second plugin
   
5. Deploy the project feature to SAP HANA Cloud
6. Create a destination in the SAP HANA Cloud cockpit
7. Activate the new feature in SAP Web IDE
8. Create a third plugin for extending an existing template
9. Extend the existing SAPUI5 Application template
10. Make some changes and test the template
11. Deploy the feature again to SAP HANA Cloud platform

*** NOTE: The first 7 steps will be discussed here the others in the second part of this article.

Step 01 - Create a new feature project with the first plugin inside

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 the creation of all the needed components.

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

2 - Select Feature and Plugin Development from the top dropdown list, choose the SAP Web IDE Feature template and click Next

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

4 -  Enter a name and a description for this new feature; then enter the name of the new plugin, which will be included in this new feature, provide a short description and choose to include the sample implementation code. Then click Finish

5 - This is the final structure of the entire project

Step 02 - Test the first plugin

1 - If you want to test the new created plugin you can do it: right click on the plugin.json file and choose Run --> Run As Plugin

2 - 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

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

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

Step 03 -  Create a second plugin, change its code and test it

Let's create a second plugin inside this feature and customise it a little bit according to our needs.

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 - Right click on the client folder inside the feature project, choose New --> SAP Web IDE Plugin

3 - Provide a plugin name and a description for this second plugin and even for this let's choose to include some sample code, then click on Finish

4 - 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 following values and click on Save:

Parameter	Value
sample_helloMessage	Welcome {0}!
command_helloWorld	Welcome World
commandgroup_sample	Greetings

5 - 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

6 - 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 created and changed your second plugin!

Step 04 - Make some further changes to the second plugin

Before we publish this feature to SAP HANA Cloud platform we need to adjust a little bit the second plugin: since we have generated the sample code even for this second plugin, this will have the same service name as for the first plugin and this will generate a conflict once the entire feature, made by the two plugins, will be enabled on the cloud.

1 - Open SAP Web IDE

2 - Do the following operations:

1.      select the second plugin
2.      click on the Search & Replace tool on the right toolbar
3.      click on Replace
4.      enter the word "Sample" in the first text box
5.      click on Find so that some occurrences will be found
6.      enter the word "Sample2" in the second text box
7.      click on the Replace All button

3 - Click on OK to the message informing you that this operation cannot be reverted

4 - A new message will inform you about all the changes we made

5 - Do the same for the text "sample", replacing it with "sample2" (notice the first letter in lower case)

6 - Finally rename the two files in the service folder of the second plugin from Sample to Sample2

7 - Your changes are complete now: the two services in the two plugins have different names!

Step 05 - Deploy the project feature to SAP HANA Cloud

This step is mandatory for using the new feature, consisting of two new plugins, included in SAP Web IDE. We need to deploy our feature to SAP HANA Cloud. This operation will also take care of automatically activating 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 if required and click on Login

4 - Select Deploy as a new application and 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 or copy in the clipboard this link: it will be used in the next step

7 - You have successfully deployed your project to SAP HANA Cloud.

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

In order for the system to recognize the new feature, 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 feature 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:

Parameter	Value
Name	mycoolfeaturedest
Type	HTTP
Description	My Cool Feature Destination
URL	<the application URL copied in the clipboard in the previous chapter>
Proxy Type	Internet
Authentication	AppToAppSSO

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

Property	Value
WebIDEEnabled	true
WebIDEUsage	feature

3 - You have successfully created a destination for your plugin repository. It will take up to 5 minutes until the changes are applied to the system.

Step 07 - Activate the new feature in SAP Web IDE

Let’s activate the new feature. 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 in the left side toolbar. Select the Plugins branch. Choose the Features repository and enable the feature you have created, then click on Save

3 - Refresh SAP Web IDE

4 - Now, if you look in the Edit and in the Tools menus you should see both your plugins successfully activated

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

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