How to develop right pane plugin for Web IDE (Part 1)

Hi,

In this blog post i will show how to develop plugin that will be integrated into the right pane of the Web IDE.

Prerequisites

• Understand Web IDE plugin concept - details on WEB IDE plugin can be found here:
  https://help.hana.ondemand.com/SAP_RDE/frameset.htm?52e7a34966ba4cfeb7eb74a048bb714e.html
• SAP Web IDE instance - either trial or production (you can get one here: SAP HANA Cloud Platform )
• Web browser (chrome/firefox)

Right Pane Plugin

In Web IDE you can create different types of plugins (e.g. editor plugin, menu plugin, right/left pane plugins and more)

in this tutorial i will show how to create plugin that will be integrated into the SAP Web IDE right pane area.

currently under the right pane area you will be able to find the following plugins:

• Search and replace
• Git
• Git history
• Collaboration
• API reference
• Outline

Let's get started!!

Open SAP Web IDE

• go to https://webide-{your_user_id}trial.dispatcher.hanatrial.ondemand.com/
• or via HCP cockpit
  • go to Subscriptions --> click on sapwebide link --> click on WEB IDE application URL to open the Web IDE
    
    

Create a new plugin project template

• Click File --> New --> Project From Template to open the template creation wizard
  
  • Select Empty Plugin Project option --> Click Next
    
    
  • Fill in the project name myfirstrightpaneplugin and click Next
  • Fill in the plugin name and plugin description
    • Plugin name: rpaneplugin
    • Plugin description: my first right pane plugin
    • Leave the include sample implementation code unchecked
    • Click Next

              * Please notice that from here this tutorial will be based on the plugin name that you entered in the Plugin Name text field

• Click Finish and Web IDE will generate an empty plugin project under your workspace

Review the generated code

• Under your workspace expand the myfirstrightpaneplugin project, There you should find the following folders:
  • Command - contains various commands which will be used in order to execute various operations (e.g. open, close, execute, delete and so on)
  • service– folder containing service implementations and service interfaces (when the interface does not belong to sap.ide.common.service)
  • lib - folder containing external libraries (e.g. open source, reuse libraries etc)
  • image - folder containing image resources
  • css - folder containing custom style sheet (css) files for styling your plugin
  • i18n - localization
  • control - folder containing SAPUI5 custom controls
  • view - folder containing SAPUI5 views (MVC design pattern - SAPUI5 SDK - Demo Kit)
  • plugin.json - main file which contains all the plugin configurations
    
    

Plugin configurations

• Double click on the plugin.json to open it for editing via SAP Web IDE editor
• Review the plugin.json structure:
  • name: plugin name
  • description: plugin short description
  • i18n: localization files path
  • requires: other Web IDE plugin that our plugin depends on
  • provides: services which are provides by our plugin (that can be reused by our/other plugins)
  • configures: service configuration of our plugin (commands, styles etc)
  • subscribes: subscribe for Web IDE events

Plugin configuration content - Let's fill in our plugin.json file with some relevant content.

• copy and paste the the following content and replace it with the content of your plugin.json file.
  
  

  {

    "name": "rpaneplugin",

    "description": "my first right pane plugin",

    "i18n" : "rpaneplugin/i18n/i18n",

   

   

    "requires": {

    "services": [

              "usernotification",

    "log",

    "command",

    "commandGroup",

    "perspective",

    "selection",

    "content",

     "resource"

    ]

    },

    "provides": {

    "services" : {

              "player" : {

                  "implements": "rpaneplugin.service.Player",

                  "module": "rpaneplugin/service/Player"

              }

    },

   

    "interfaces": {

        "rpaneplugin.service.Player": "rpaneplugin/service/Player"

    }

    },

    "configures": {

    "services": {

              "player:styles" : [

                  { "uri" : "rpaneplugin/css/style.css"  }

               ],

    "command:commands" : [

    {

       "id" : "rpaneplugin.open",

    "label": "Toggle Player",

    "service" : "rpaneplugin/command/Open",

    "available" : true

    }

    ],

    "commandGroup:items": [

                  {

                        "parent": "view.otherPanes",

                        "command": "rpaneplugin.open",

                        "prio": "30"

                  }

    ],

               "perspective:views": [

                     { "id": "player", "service": "@player", "area": "right", "visible": "false", "cssclass": "explorer splitterContainer"}

               ] 

    }

    },

    "subscribes": {

   

    }

  }

• From a quick look at the plugin.json content we can learn that our plugin
  • Depends on the following plugins:
    • usernotification
    • log
    • command and commandGroup
    • prespective
    • selection
    • content
    • resource
  • Provide one service - the name of the service is player and the implementation should be done in Player.js file
  • Implement one command - the name of the command is Open and the implementation should be done in Open.js file
  • From perspective:views we figure that the plugin will be shown on the Web IDE right pane ("area:"right")

Let's get our hands dirty with some code!!

Create the Open command

• Select the command folder
• Right click --> New --> File
  
  
  
  
• Enter Open.js as the file name and click OK
  
  

• Copy and paste the following content into the Open.js file

define({  execute : function() {  var that = this;  return this.context.service.player.isVisible().then(function(bVisible) {  return that.context.service.player.setVisible(!bVisible);  });  },  isAvailable : function() {  return true;  },  isEnabled : function() {  return true;  }
});

Create the player service (2 files)

Create the service interface -

• Select the service folder
• Right click --> New --> File
• Enter Player.json as the file name and click OK
  
  
• Copy and paste the following content into the Player.json file

{  "name" : "rpaneplugin.service.Player",  "description" : "/Sound Cloud Player",  "extends" : ["sap.watt.common.service.ui.Part"] ,  "methods" : {      "isAvailable" : {             "params" : [              {                  "name" : "oDocument",                  "type" : "object"                 }             ],             "returns" : "object"         },  "isEnabled" : {             "params" : [              {                  "name" : "oDocument",                  "type" : "object"                 }             ],             "returns" : "object"         }  }
}

Create the service implementation -

• Select the service folder
• Right click --> New --> File
• Enter Player.js as the file name and click OK
• Copy and paste the following content into the Player.js file

define(["sap/watt/common/plugin/platform/service/ui/AbstractPart"], function(AbstractPart) {  "use strict";  var Player = AbstractPart.extend("plugin.soundcloud.service.Player", {  init: function() {  },  configure: function(mConfig) {  this.context.service.resource.includeStyles(mConfig.styles).done();  },  getContent: function() {  var oButton = new sap.ui.commons.Button({  text: "Right Pane Button"  });  var oLayout = new sap.ui.layout.VerticalLayout({     width: "100%",     height: "100%",     content: [oButton]  });  oLayout.addStyleClass("playerLayout");  return oLayout;  },  isEnabled: function(oDocument) {  return true;  },  isAvailable: function(oDocument) {  return true;  }  });  return Player;
});

Currently (For Part 1 of the user guide) our plugin is very basic. It contains only a button and that's it.

In Part 2 (coming soon...) of the guide I will show how we can enhance it with more capabilities...

Last but not least create the css file

• Select the css folder
• Right click --> New --> File
• Enter style.css as the file name and click OK
• Copy and paste the following content into the style.css file

.playerLayout {    width: 100%;    height: 100%;    background-color: white;    position: relative;
}

Finally!! Run the plugin in Web IDE

• Select the plugin.json file
• Right click --> Run --> Run Plugin Project
  
  
• a New Web IDE instance will be opened in DEBUG MODE. This instance of Web IDE contains also the plugin that we just created
• To view the plugin click on View --> Toggle Player
  
• A new pane will appear at the right area of the Web IDE with the plugin UI (a simple button with "Right Pane Button" text)
  
  

That's it! Now that you know how to create plugin to the Web IDE you can extend and customize the Web IDE capabilities according to your needs!

Stay tuned! Part 2 will come soon...