Skip to Content

Hi ,

This blog post is part 2 of “How to develop right pane plugin for Web IDE”.

In part 1 you learned the following:

  • Web IDE plugin concept (plugin.json, plugin service and commands)
  • Web IDE right pane plugin creation

In part 2 i will take you one step further and show how to aggregate your Facebook feed inside Web IDE right pane area.


Prerequisites

Please notice! the following blog contains hundreds lines of code that should be copied from here into your Web IDE environment. In blog posts it is not possible to do pretty print to lines of code so after you paste the code to Web IDE you can use the Beautify option that will do pretty print to your code. The keyboard shortcut of beautify command is Ctrl + Alt + B


Let’s get started

Create Facebook App

In this section you will create a new Facebook app which will enable interaction from Web IDE to Facebook API.In order to integrate with Facebook API’s you will need to use Facebook JavaScript SDK. Details about how to use Facebook JavaScript SDK with user guides and examples can be found here:
https://developers.facebook.com/docs/javascript
For creating a new Facebook App please do the following steps:

  • go to Facebook Developers
  • Under My Apps select add a new app
    /wp-content/uploads/2015/04/1_687671.png
  • a dialog asking for the required platform will be opened there you need to select Website
    /wp-content/uploads/2015/04/2_687672.png
  • Type the name of the new app – you can type any name that you like i typed “WebIDERightPanePlugin” and then click on Create new Facebook App ID button
    /wp-content/uploads/2015/04/3_687673.png
  • Leave Is this a test version of another app unchecked and select Education under the application category and then click on Create App ID button

    /wp-content/uploads/2015/04/4_687674.png

  • Next you will see a JavaScript code snippets describing how to initialize the application that you’ve just created and a place to configure your Facebook website URL’s.
    Under site URL you need to copy and paste your Web IDE URL do so by copy your WebIDE URL and paste it into the site URL field of your Facebook App.

    /wp-content/uploads/2015/04/5_687675.png

  • If everything went well you should see a checkmark icon with Finished! label under it

    /wp-content/uploads/2015/04/6_687676.png

Setup Web IDE

In this section you will enhance your plugin to work with MVC approach and prepare the view that will hold your Facebook feed.

  • Open your WebIDE instance on a different browser tab and expand the project that you created in part 1. The project name is myfirstrightpaneplugin
    there you will find all the resources that you’ve created in part 1 of this blog.

/wp-content/uploads/2015/04/7_687677.png

  • Create a new view and controller files (MVC pattern SAPUI5 SDK – Demo Kit) that will contains the right pane content.
    • Select the view folder
    • right click –> New –> Component . A wizard for create new Component will be opend

      /wp-content/uploads/2015/04/8_687678.png

    • Click Next in the first step of the wizard
    • In the second step select SAPUI5 View and then click on Next

      /wp-content/uploads/2015/04/9_687679.png
    • The first step of the wizard should contain the following fields:
      • View Type: Select JavaScript (the default value is XML just change it to JavaScript)
      • Namespace: write rpaneplugin
      • View Name: write feed

              
               /wp-content/uploads/2015/04/10_687680.png

    • Click Next and then Finish
    • 2 new files will be added under the view folder under myfirstrightpaneplugin  project
      /wp-content/uploads/2015/04/11_687681.png
  • Connect the view and controller files to your plugin runtime
    • Under your project expand the service folder and double click on Player.js file (was created on part 1 of this blog)
    • Define a new parameter with name _oView above the init method.
      /wp-content/uploads/2015/04/12_687682.png
    • replace the getContent method with the following code:

  var that = this;
  if (this._oView === undefined) {
  return this.context.service.pluginmanagement.getPluginPath("rpaneplugin").then(function(sResult) {
  jQuery.sap.registerModulePath("rpaneplugin", sResult);
  that._oView = sap.ui.view({
  id: "fbfeedview",
  viewName: "rpaneplugin.view.feed",
  type: sap.ui.core.mvc.ViewType.JS,
  viewData: {
  context: that
  }
  }).addStyleClass("FB_View");
  return that._oView;
  });
  } else {
  return this._oView;
  }


The getContent method returns the content that should be aggregated into the right pane content area. The old code returns a layout which contain one button, now we change it to return a view instance since we want to work with MVC.
In the view code we will build all the necessary UI elements and in the controller we will take care on the business logic, events etc.

Test your plugin

select the feed.view.js file which located under view folder and open it for editing
Replace the content of createContent method with the following:
var oButton = new sap.ui.commons.Button({
    text: "Test button"
  });
  return oButton;


    • Test your plugin: right click on plugin.json –> Run –> Run Plugin Project .

      a new browser tab will be opened with another instance of Web IDE.
      /wp-content/uploads/2015/04/13_687683.png

    • From the main toolbar select View –> Toggle Player

      /wp-content/uploads/2015/04/14_687684.png
    • The result will be a button that will be located inside the right pane content

      /wp-content/uploads/2015/04/15_687685.png

If everything works you are now ready to start with aggregating your Facebook feed.


Facebook Integration

In this section you will add the actual feed from Facebook to right pane view.The result of the following steps will be that you will be able to see a very basic info from your Facebook home feed inside the Web IDE right pane.The info that will be shown will be a list of posts with the name and profile picture of the user who created the post and the post content.
Using the same API calls you will also be able to show additional data like: number of likes, comments, attached videos or photos, links and more.

  • Select the Player.js file which located under service folder
  • Copy and paste the following code inside the init function

FB.init({
       appId: '{your_facebook_app_id}',
       xfbml: true,
       version: 'v2.1'
  });


  • replace ‘{your_facebook_app_id}’ placeholder with your Facebook app id that you created in previous steps.
    • Go to Facebook Developers
    • Select My Apps –> Click on the app name that you created

      /wp-content/uploads/2015/04/16_687686.png
    • Copy the number under the App ID field and replace it with ‘{your_facebook_app_id}’ placeholder.

      /wp-content/uploads/2015/04/17_687687.png

  • Load Facebook JavaScript SDK resources
    • Change the first line of Player.js file

               from

                

    • 
      define(["sap/watt/common/plugin/platform/service/ui/AbstractPart"], function(AbstractPart) {
      
      
      
      

      to

      
      define(["sap/watt/common/plugin/platform/service/ui/AbstractPart", "//connect.facebook.net/en_US/sdk.js"], function(AbstractPart) {
      
      
      
      
  • Create the Feed UI
    • Select feed.view.js file which located under  view folder
    • Replace the createContent function content with the following content:


 var oLayout = new sap.ui.layout.VerticalLayout({
       width: "100%",
       height: "100%"
  }).addStyleClass("FB_VLayout");
  this.oUserDetailsLayout = new sap.ui.layout.HorizontalLayout({
  width: "100%",
  visible: false
  }).addStyleClass("FB_UserDetailsLayout");
  var oUserProfilePicture = new sap.ui.commons.Image({
  width: "40px",
  height: "40px"
  }).addStyleClass("FB_UserProfilePicture");
  this.oUserDetailsLayout.addContent(oUserProfilePicture);
  var oUserDisplayNameLabel = new sap.ui.commons.Label({
  text: "user display name"
  });
  this.oUserDetailsLayout.addContent(oUserDisplayNameLabel);
  oLayout.addContent(this.oUserDetailsLayout);
  this.oFeedRowRepeater = new sap.ui.commons.RowRepeater({
  numberOfRows: 70,
  design: sap.ui.commons.RowRepeaterDesign.Transparent,
  noData: new sap.ui.commons.TextView()
  }).addStyleClass("FB_FeedRowRepeater");
  // Row repeater template
  this.oFeedRowRepeaterTemplate = new sap.ui.layout.HorizontalLayout({
    width: "70%"
  }).addStyleClass("FB_RowRepeaterTemplateLayout");
  var oPostedByImage = new sap.ui.commons.Image({
      height: "40px",
      width: "40px"
  }).addStyleClass("FB_UserProfilePicture");
  oPostedByImage.bindProperty("src","picture");
  this.oFeedRowRepeaterTemplate.addContent(oPostedByImage);
  var oPostedByName = new sap.ui.commons.Label().addStyleClass("FB_PostedByLabel");
  oPostedByName.bindProperty("text","from");
  var oPostContent = new sap.ui.commons.TextView({
      wrapping: true
  }).addStyleClass("FB_PostTextView");
  oPostContent.bindProperty("text","message");
  var oFeedContentLayout = new sap.ui.layout.VerticalLayout().addStyleClass("FB_PostContent");
  oFeedContentLayout.addContent(oPostedByName);
  oFeedContentLayout.addContent(oPostContent);
  this.oFeedRowRepeaterTemplate.addContent(oFeedContentLayout);
        this.oFeedRowRepeater.bindRows("/data", this.oFeedRowRepeaterTemplate);
  oLayout.addContent(this.oFeedRowRepeater);
  return oLayout;


    • Replace the content of style.css which located under css folder with the following content


.FB_VLayout {
    width: 100%;
    height: 100%;
    background-color: white !important;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.FB_View {
    background-color: white;
    position: relative;
    height: 100%;
    overflow-x: hidden;
}
.FB_UserDetailsLayout {
    background-color: #4e69a2;
    color: white;
    font-size: 15px;
    width: 100%;
    padding: 10px;
}
.FB_PostContent {
    margin-left: 10px;
}
.FB_UserProfilePicture {
    height: 40px;
    width: 40px;
    border-radius: 20px;
}
.FB_PostedByLabel  {
    color: #3b5998;
    font-weight: bold;
    padding: 0;
}
.FB_FeedRowRepeater {
    text-align: center;
    margin-top: 10px;
    overflow-x: hidden;
}
.FB_RowRepeaterTemplateLayout {
    width: 90%;
    border-bottom: 1px solid #e9eaed;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
}
.FB_FeedTitle {
    padding: 10px;
}
.FB_PostTextView {
    height: auto !important;
    width: 90%;
    font-size: 14px;
}



    • Last but not least replace all the content of feed.controller.js with the following content:


sap.ui.controller("rpaneplugin.view.feed", {
  _oFbUser: undefined,
  onInit: function() {
  var that = this;
  FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
  FB.api('/me', {}, function(response) {
  if (response && !response.error) {
  that._oFbUser = response;
  that._setUserDetails(that._oFbUser);
  }
  });
  } else {
  // Login user
  FB.login(function(response) {
  if (response && !response.error) {
  FB.api('/me', {}, function(response) {
  if (response && !response.error) {
  that._oFbUser = response;
  that._setUserDetails(that._oFbUser);
  }
  });
  }
  }, {
  scope: 'read_stream'
  });
  }
  });
  },
_setUserDetails: function(oUser) {
  var oView = this.getView();
  var oUserDisplayNameLabel = oView.oUserDetailsLayout.getContent()[1];
  var oUserProfilePicture = oView.oUserDetailsLayout.getContent()[0];
  oUserDisplayNameLabel.setText(oUser.name);
  oView.oUserDetailsLayout.setVisible(true);
  oView.oFeedRowRepeater.setBusy(true);
  FB.api(
  "/me/picture",
  function(response) {
  if (response && !response.error) {
  oUserProfilePicture.setSrc(response.data.url);
  }
  }
  );
  FB.api(
  "/me/feed",
  function(response) {
     oView.oFeedRowRepeater.setBusy(false);
  if (response && !response.error) {
     var oResults = {
         data: []
     };
     for (var i=0; i < response.data.length; i++){
         var oRecord = response.data[i];
         var sMessage = oRecord.message !== undefined ? oRecord.message : oRecord.story;
         var sPictureUrl = "//graph.facebook.com/" + oRecord.from.id + "/picture";
         oResults.data.push({
            message: sMessage,
            from: oRecord.from.name,
            picture: sPictureUrl
         });
     }
  var oModel = new sap.ui.model.json.JSONModel(oResults);
  oView.oFeedRowRepeater.setModel(oModel);
  }
  }
  );
  }
});

    • Quick explanation on the code above:
      • onInit – If the user is already logged in to your app then display the user feed immediately, otherwise display a Facebook connect login screen to the user. The “read_stream” scope request permissions from the user to access his feed.
      • _setUserDetails – Display the logged in user name and profile picture and the user home feed from Facebook
    • The above lines of code presents only the following details:
      • Logged in user display name and profile picture
      • Logged in user home feed with the following fields:
        • Name of the user who created the post
        • Profile picture of the user who created the post
        • The post title (either if it is a message or a story)
    • In order to show more fields and perform additional interactions with Facebook API please refer to the following: Facebook SDK for JavaScript Reference

See the results

Your last step is to review the results of what you just created.

  • Select plugin.json which located under the root folder
  • Right click –> Run –> Run Plugin Project

    /wp-content/uploads/2015/04/18_687688.png

  • a new instance of Web IDE will be opened in a new browser tab
  • From the main toolbar select View –> Toggle Player

    /wp-content/uploads/2015/04/19_687689.png

  • If you already gave permissions to the Facebook App before you will see the results immediately otherwise, you will see a pop up that will ask for your permissions 

    /wp-content/uploads/2015/04/20_687690.png

          /wp-content/uploads/2015/04/21_687691.png

Congratulations! you have completed developing a plugin which presents your Facebook feed in your Web IDE environment.

You are now ready to rock and create amazing and innovative stuff for Web IDE.

To report this post you need to login first.

4 Comments

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

  1. Lothar Bender

    Hi Ran,

    thanks for this nice blog.

    I also tried to integrate a right pane plugin, but failed to proper display an icon in the right pane toolbar.

    I’ve defined the command in plugin.json:

    {
    “parent”: “applicationRightSidebar”,
    “command”: “rpaneplugin.fbOpen”,
    “label”: “{i18n>command_fbOpen}”,
    “icon”: “rpaneplugin/image/fbOpen.png”,
    }

    The icon has the same size (48px*48px) as the present sidebar icons as defined in sap.watt.contributorguidelines.images. It is rendered in the right sidebar but all icons have been rearranged – an additional padding has been inserted. I was only able to fix this behaviour by resizing the image to 16px*16px

    When pressing the button the corresponding view is correctly displayed, but the icon colours are not inverted as it is done for the present default sidebar icons.

    Can you give some hint how this issues can be fixed?

    Regards, Lothar

    (0) 
      1. Lothar Bender

        This is how it looks like after adding an image with size 48*48px.

        The first picture shows the button not having been selected while the second picture shows the selected button including its view area. The entire button area should be displayed light grey while the ‘bug’ should be switched to dark grey.

        Screen Shot 2015-04-27 at 08.31.22.pngScreen Shot 2015-04-27 at 08.35.00.png

        (0) 

Leave a Reply