Skip to Content

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.

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

 

 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.