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

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

/wp-content/uploads/2015/03/rightpane_655931.png

Let’s get started!!

Open SAP Web IDE

Create a new plugin project template

  • Click File –> New –> Project From Template to open the template creation wizard
    3 - new project.png
    • Select Empty Plugin Project option –> Click Next

      4 - empty plugin project.png

    • 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

                  5 - plugin name.png

    • 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

      6 - project structure.png

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

    7 - new command.png7 - new command.png

  • Enter Open.js as the file name and click OK

    8 - open.png

  • 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

    9 - new service interface.png

  • Copy and paste the following content into the Player.json file

{
  "name" : "rpaneplugin.service.Player",
  "description" : "my first service",
  "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("rpaneplugin.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

    10 - run plugin.png

  • 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
    11 - toggle plugin.png
  • 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)

    12 - right pane result.png

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!

Please refer to Part 2 of this guide that will guide you how to integrate your Facebook feed inside the plugin that you’ve just created…

The specified item was not found.

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Michael Muehlberg

    Hello Ran,

    you are setting the background color of your right pane hardly to white.

    What I ideally want is that I don’t need to set the color at all. I want that the SAP UI5 pane already knows in which background color it should appear.

    Why do I need to set the color at all and how can I set it in a way that a global SAP-wide theme can modify it? Is there any central placeholder I can use?

    The other panes, for example, don’t appear in white, they seem to appear in a standard background color. How do these do that?

    Ciao, Michael

    (0) 
    1. Ran Hassid Post author

      Hi Michael,

      Currently there is no integration between Web IDE to UI5 theme designer so that’s why i created a custom style sheet file for my styles but i totally agree with you that it’s better to do it with theme and not with custom style sheet

      Ran.

      (0) 
  2. Joerg Mann

    Hi Ran,

    well done blog. Did you also write unit tests for this? Especially tests which run using the watt ide features and test for example whether your pane appears. Similar to Eclipse PDE tests?

    Thanks

    Jörg

    (0) 
    1. Ran Hassid Post author

      Hi Joerg,

      thanks a lot . And no i did not write any unit tests for that since it is only for demo purposes.

      Thanks,

      Ran.

      (0) 
  3. Mathias Maerker

    Hi there, very nice Blog. I have a question, do you know if there is any list of subscribable services? And their parameters? I would like to subscribe to the Save event of the WebIde as well as to the files in your current project, any suggestions would be welcome.

    Regards Mathias

    (0) 

Leave a Reply