Skip to Content
Author's profile photo Wouter Lemaire

Create a view in your SAP Web IDE Feature

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

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thanks for the tutorial. Very helpful!

      Is it possible to build a full scale SAPUI5 application with a Component and routing like this?

       

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      It provides you a start.. I think it's very important to have Routing implemented before you start with any big UI5 project.

      Author's profile photo Former Member
      Former Member

      Thank you for responding.

      I think I didn't express myself clearly. I wanted to know, if it is possible to programmatically create a component with a manifest in the plugin-view and provide the functionality of a full scale application, or if there could be any unwanted side effects by doing this.

       

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      As far as I understand your question, I suppose it's perfectly possible.

      Author's profile photo Marie-Pierre MELA
      Marie-Pierre MELA

      Hi,

      in case the menu "SAPUI5 view" cannot be found when selecting "New" on view, is there something to be activated to get it ?

      I tried to create the files manually, but guess something is missing as I can't navigate and have no error message.

      Thanks and regards.

      Author's profile photo Shrinath Choudekar
      Shrinath Choudekar

      Hello Marie-Pierre,

       

      First right click on your project then click on project then click on project settings.

      One window will open, now there are lot of checkboxes, then select "SAP Fiori" as a project type & save it.  Now your problem will be resolved.

       

      Thanks & Regards.

      Author's profile photo Maximilian Olzinger
      Maximilian Olzinger

      Hi Wouter,

      thank you for providing a source to start developing WebIDE features.

      I'm currently working on an extension based on your blog and I'm facing a problem concerning the View-Container of my UI5-View.

      Now I'm using a VBox as the main Container in my UI5-View. But it seems that the View-Height is calculated dynamically. That means I'm not able to enable scrolling when the content of the VBox is larger than the actual display-size.Setting the height-property of the VBox or using a ScrollContainer doesn't seem to work.

      Do you have an idea how to make my View scrollable?

       

      Thank you and best regards,

      Maximilian