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

This is the continuation of the blog started here.

In this second part we are going to see how to create a new SAP Web IDE template after having already created our feature in the previous part.

Let’s continue then with the other steps:

08 – Create a third plugin for extending an existing template

09 – Extend the existing SAPUI5 Application template

10 – Make some changes and test the template

11 – Deploy the feature again to SAP HANA Cloud platform

Step 08 – Create a third plugin for extending an existing template

A plugin structure needs to be created even in the case you want to extend an existing template.

1 – Open SAP Web IDE.

2 – Right click on the client folder in the current feature project and select New –> SAP Web IDE Plugin

3 – Enter a name for this new plugin and a short description. DO NOT select to include the sample implementation code

/wp-content/uploads/2016/05/02_1035839.png

4 – Click Finish

5 – This is the current project’s structure

/wp-content/uploads/2016/05/04_1035858.png

Step 09 – Extend the existing SAPUI5 Application template

Let’s now extend the existing SAPUI5 application template.

1 – Right click on the “pluginfortemplate” plugin and choose Template from Existing Template

/wp-content/uploads/2016/05/05_1035841.png

2 – Enter a name for the new template and a description. Let’s keep the type as “project“. Choose to create a new category and enter the name and the description for this new category: this is the group where the new template will be included. Then click Next

/wp-content/uploads/2016/05/06_1035848.png

3 – Select the SAPUI5 Application template and click Next

/wp-content/uploads/2016/05/07_1035850.png

4 – Click Finish

5 – This is the current project’s structure

/wp-content/uploads/2016/05/09_1035868.png

Step 10 – Make some changes and test the template

Let’s make some easy changes to the template so that we can see that we can really change it according to our requirements. We will:

  • change the sample screenshot shown during the wizard procedure
  • change the default view name from View1 to Main


1 – Right click on the image subfolder under the “pluginfortemplate” folder and choose Import –> From File System

/wp-content/uploads/2016/05/10_1035882.png

2 – Let’s select a new image named “flower.png” (you can download one from the web) and import it by clicking on OK

/wp-content/uploads/2016/05/11_1035883.png

3 – You can delete the old image by right clicking on it and choosing Delete

/wp-content/uploads/2016/05/12_1035881.png

4 – Let’s add the following dependencies to the service information located in the plugin.json file under the template plugin; change the name of the image loaded when the template is executed to be “flower.png“. Then save the file

            “filesystem.documentProvider”,

            “projectType”,

            “setting.project”,

            “basicSAPUI5ApplicationProjectTemplateService”

/wp-content/uploads/2016/05/13_1035887.png

5 – Open the model.json file under the “mycooltemplate” folder and change the name of the first view from View1 to Main. Then save the file

/wp-content/uploads/2016/05/14_1035888.png

6 – Right click on the plugin.json file and choose Run – Run as Plugin to test the plugin. A new Debug-Mode browser page opens

7 – Choose File –> New –> Project from Template

8 – Select “mycoolcategory” from the top dropdown list and the new template should be available. If you move forward in the wizard process you should be also able to see that the default view name is now “Main

/wp-content/uploads/2016/05/15_1035905.png


9 – You have successfully extended the SAPUI5 Application template. Please close the Debug-Mode tab of your browser

/wp-content/uploads/2016/05/16_1035908.png

Step 11 – Deploy the feature again to SAP HANA Cloud platform

If we want to use our new template from the release mode of SAP Web IDE (not the one in Debug-Mode), we need to re-deploy our feature to SAP HANA Cloud platform.

1 – First of all, let’s temporarily disable our feature: click on the Settings button and go in Plugins. Then disable the new feature and click on Save

/wp-content/uploads/2016/05/17_1035906.png

2 – You will be requested to refresh your browser. Click on OK to accept this request

3 – Right click on the feature project and choose Deploy –> Deploy to SAP HANA Cloud Platform

/wp-content/uploads/2016/05/19_1035909.png

4 – Select Update an existing application and click on Deploy. The existing SAP HANA Cloud application will be updated and a new version will be activated automatically

/wp-content/uploads/2016/05/20_1035910.png

5 – Click on Close

/wp-content/uploads/2016/05/21_1035911.png

6 – Let’s activate again our feature

/wp-content/uploads/2016/05/22_1035912.png

7 – Refresh again SAP Web IDE

8 – You should be able now to see your new template even in the release mode of your SAP Web IDE

/wp-content/uploads/2016/05/24_1035913.png


9 – Congratulations! You have successfully extended an existing template.

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Alexander Chan

    Very cool, I think one of the most useful things would be an example of hooking into a save event and reading details about the current project (currently editing file for example, to run custom post processing and/or the content of the current file).

    The SDK doesn’t include too much about this or at least I didn’t find the documentation on how to use┬ásap.watt.common.service.editor.Editor to get to the editor details.

    (0) 

Leave a Reply