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
- Execute
- 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" }],
- Define command
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”
- Define commandgroup items
- 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.
You can read more about this at: https://sdk-sapwebide.dispatcher.hana.ondemand.com/index.html#/topic/49c6393548a44a16853e4c47900713a7
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
Now you should understand how commands work and have created your own command.
Best regards,
Wouter