Add a view to the SAP Web IDE

This blog is based on the previous one. It’s not required that you’ve followed the previous blog but it will help you understand how commands work in the SAP Web IDE.  This blog will extend the project with opening a view when executing a command.

SAP Web IDE Feature Overview: https://blogs.sap.com/2017/07/17/create-your-own-sap-web-ide-feature/

SAP Web IDE Feature Command: https://blogs.sap.com/2017/07/17/create-a-command-in-your-sap-web-ide-feature

Steps to add a view:

• Create a view
• Create a service that will call the view
• Configure the service in the plugin.json

Create a view in the plugin

Right click on the view folder –> New –> SAPUI5 View

Fill in the name. You can leave the namespace empty.

It will generate a namespace based on the folder structure. You’ll have to remove the “client” in the namespace of the controller:

To:

Also update it in the view:

To:

In the view, we should also remove the “App” and “Page” control to use it in the SAP Web IDE. This is required for showing a UI5 view in the SAP Web IDE:

Instead we replace it with a “VerticalLayout” control:

Just as an example, we add a button in the view:

In the controller we can handle this event and just show a UI5 alert:

Create a service for your view

Creating a service for a view is different than creating a service that contains specific reusable logic. This service will call our view in the SAP Web IDE.

Create a new file in the service folder:

In the service, add the following code:

define(
	["sap/watt/platform/plugin/platform/service/ui/AbstractPart"],
	function(AbstractPart) {
		"use strict";
		return AbstractPart.extend("myfirstplugin.service.MyFirstViewService.", {
			_oView: null,
			getContent: function() {
				var me = this;
				return AbstractPart.prototype.getContent.apply(this, arguments).then(function() {
					if (!me._oView) {
						me._oView = sap.ui.view({
							viewName: "myfirstplugin.view.view.HelloWorld",
							type: sap.ui.core.mvc.ViewType.XML,
							viewData: {
								context: me.context
							}
						});
					}
					return me._oView;
				});
			}
		});
	});

We’ll use the “getContent” function from “AbstractPart” service to call our view. We also pass the context to the view to access other services of the SAP Web IDE in the controller. Use the namespace and name of the view to call it.

Configure the View in the plugin.json

The last step is to configure the SAP Web IDE to show our view, this is done in the plugin.json.

First we have to define the required service “perspective” to add our view to the perspective:

Second, we have to define our own service where we call the view. We give the service a name which we’ll use later. The service has to implement “sap.watt.common.service.ui.Part”, this is a service for calling a view. Also define the path to our own service, “myfirstplugin/service/MyFirstViewService” (projectname, service folder and service filename):

After that we need to define the view and add the view to an area in perspective.

The SAP Web IDE has multiple perspectives which you can find on the left side of the SAP Web IDE:

We’ll use the plugin for our developments and therefore add the view to the development perspective. In the development perspective we can place the view in different areas, the right area and the bottom area. To do this, we start with defining the view by giving the view an id and connecting the view to the service that we have defined in the previous step. Then we map the view, by using the id, to the right area in the perspective development.

We have now defined the service where we call the UI5 view and defined a SAP Web IDE view that’s connected to the service and to a perspective.

To be able to use this UI5 view, we still need to define a command. In this command we define the following:

• Id: unique id is required for each command
• Label: label that will be used to show in the menu
• Icon: icon that will be used to show in the right side bar
• Service
  • Implements: “AbstractUIPartToggler” is a SAP Web IDE service that we need to use to show a UI5 view in a perspective
  • Module: “AbstractUIPartToggler” is a SAP Web IDE module that we need to use to show a UI5 view in a perspective
  • Configuration: connect the command to our service that will call the UI5 view
    • Id: id of our command
    • Service: id of our service that we have defined in the first step
    • Perspective: the perspective where we want to use the command

Last step is adding the command to the menu, in this tutorial I’m going to add the command to the right sidebar. Therefore we need to define a command group item and use as parent “applicationRightSidebar”.

Run the feature

Open the UI5 view

Click on the button:

You can find the full code of the demo feature on github: https://github.com/lemaiwo/SAPWebIDEFeatureTutorial

Now you can start extending the SAP Web IDE with your own views!

Best regards,

Wouter