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
- You have read and understand http://scn.sap.com/community/developer-center/front-end/blog/2015/03/03/how-to-develop-right-pane-pl...
blog post. - Active Facebook account
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
- a dialog asking for the required platform will be opened there you need to select Website
- 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
- 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
- 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.
- If everything went well you should see a checkmark icon with Finished! label under it
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.
- 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
- Click Next in the first step of the wizard
- In the second step select SAPUI5 View and then click on Next
- 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
- Click Next and then Finish
- 2 new files will be added under the view folder under myfirstrightpaneplugin project
- 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.
- 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.
- From the main toolbar select View --> Toggle Player
- The result will be a button that will be located inside the right pane content
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
- Copy the number under the App ID field and replace it with '{your_facebook_app_id}' placeholder.
- Load Facebook JavaScript SDK resources
- Change the first line of Player.js file
from
to
define(["sap/watt/common/plugin/platform/service/ui/AbstractPart"], function(AbstractPart) {
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
- a new instance of Web IDE will be opened in a new browser tab
- From the main toolbar select View --> Toggle Player
- 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
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.
- SAP Managed Tags:
4 Comments
