Create a command in your SAP Web IDE Feature

[WouterLemaire]

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/49c6393548a44a16853e4c47900713a...

 

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