Wouter Lemaire

July 17, 2017 3 minute read

Create a command in your SAP Web IDE Feature

Create commands in the SAP Web IDE

What’s generated

Start with generating a Feature and Plugin including the sample code as described in the previous blog: https://blogs.sap.com/2017/07/17/create-your-own-sap-web-ide-feature/

Your project will look like this:

The wizard already generated an example which contains a command that will open a notification. If you would run this generated feature as described in https://blogs.sap.com/2017/07/16/create-your-own-sap-web-ide-feature/ –> “How to start”, you would have this:

This will open an information popup.

How does it work?

The command is located in the folder “command”. It’s is easy and straightforward to understand. It contains three functions:
- Execute
  - Action that will be triggered when you click on the command
  - In case of this example it will call the notification
- IsAvailable
  - Hide or show the command depending on some logic
- isEnabled
  - Enable or disable but still visible depending on some logic

Configuration of the command has to be done in the plugin.json file
- Define command
  - Connects the label with the command located in the command folder
  - It adds an id to the command which will be used to connect the command to a command group
  - Service is the path to the command
  - ```
  "command:commands": [{
  				"id": "myfirstplugin.helloWorld",
  				"label": "{i18n>command_helloWorld}",
  				"service": "myfirstplugin/command/HelloWorld"
  			}],
```
- Define groups
  - One group to create a sub-menu
  - First group is connected to a label
  - A Second group is used as a placeholder for the command
  - ```
  "commandGroup:groups": [{
  				"id": "tools.sample",
  				"label": "{i18n>commandgroup_sample}"
  			}, {
  				"id": "tools.sample.helloWorld"
  			}],
```

These groups and commands need to be defined with a label to have a text in the SAP Web IDE.

Groups and commands also require an ID to connect items to the groups:

- Define commandgroup items
  - The group items connect our groups to existing menu items
  - It also connects commands to groups
- Overview
  - The first group item connects our group “Sample” with the menu “Tools”
  - The seconds group item is an inline (group in the same menu, no subtree) item that is connected to our “Sample” group
  - The third group item is connected to our previous inline group item and is an action connected to the command “helloworld”

My own example, plunker!
- One command
- One inline group

"configures": {
		"services": {
			"command:commands": [{
				"id": "plunker.ExportPlunker",
				"label": "{i18n>command_exportpluncker}",
				"service": "plunker/command/ExportPlunker"
			}],

			"commandGroup:groups": [{
				"id": "repositoryBrowserContextMenu.exportPluncker"
			}],

			"commandGroup:items": [{
				"parent": "repositoryBrowserContextMenu",
				"type": "inline",
				"group": "repositoryBrowserContextMenu.exportPluncker",
				"prio": 100
			},  {
				"parent": "repositoryBrowserContextMenu.exportPluncker",
				"type": "action",
				"command": "plunker.ExportPlunker",
				"prio": 10
			}]
		}
	}

In this example you can see the benefit of using an inline group. You can group without opening a new subtree.

How to configure this myself?

You’re probably wondering how you can place the command somewhere else? How to know the id of the parent? I had the same question too 🙂

First step, open the SAP Web IDE in debug by adding the parameter

sap-ide-debug=true

Or when testing your feature, this will give you the same result.

This will show the ID’s of the menu items visible in the tooltip, for example the tooltip of the context menu I’ve used in the plunker Feature:

The repositoryBrowserContextMenu is the parent ID.

If we now want to replace the sample command to File –> New

Then we should use “file.new” as parent:

{
"parent": "file.new",
"type": "menu",
"group": "tools.sample",
"prio": 100
}

This will result in:

You can also add commands to the right sidebar but then you cannot use groupings. An example from my UI5 Generator feature ( https://blogs.sap.com/2017/06/29/export-to-plunker-sap-web-ide-feature/ ):

This will result in the following:

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