4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN

GettingStarted Newsletters

LogOn

Hi,Guest

JoinUs

Store

SearchtheCommunity

Products

Services&Support

AboutSCN

Downloads

Industries

Training&Education

Partnership

DeveloperCenter

Activity

LinesofBusiness

UniversityAlliances

Events&Webinars

Innovation

Browse

Communications

Actions

SAPUI5DeveloperCenter

HowtodeveloprightpanepluginforWebIDE(Part2)
Facebookintegration
PostedbyRanHassidinSAPUI5DeveloperCenteronApr19,201512:12:46PM
Share

Tweet

Like

Hi,
Thisblogpostispart2of"HowtodeveloprightpanepluginforWebIDE".
Inpart1youlearnedthefollowing:
WebIDEpluginconcept(plugin.json,pluginserviceandcommands)
WebIDErightpaneplugincreation

Inpart2iwilltakeyouonestepfurtherandshowhowtoaggregateyourFacebookfeedinsideWebIDEright
panearea.

Prerequisites
Youhavereadandunderstand http://scn.sap.com/community/developercenter/front
end/blog/2015/03/03/howtodeveloprightpanepluginforwebide
blogpost.
ActiveFacebookaccount

Pleasenotice!thefollowingblogcontainshundredslinesofcodethatshouldbecopiedfromhereintoyour
WebIDEenvironment.Inblogpostsitisnotpossibletodoprettyprinttolinesofcodesoafteryoupastethe
codetoWebIDEyoucanusetheBeautifyoptionthatwilldoprettyprinttoyourcode.Thekeyboard
shortcutofbeautifycommandisCtrl+Alt+B

Let'sgetstarted

CreateFacebookApp

InthissectionyouwillcreateanewFacebookappwhichwillenableinteractionfromWebIDEtoFacebook
API.InordertointegratewithFacebookAPI'syouwillneedtouseFacebookJavaScriptSDK.Detailsabout
howtouseFacebookJavaScriptSDKwithuserguidesandexamplescanbefoundhere:
https://developers.facebook.com/docs/javascript
ForcreatinganewFacebookApppleasedothefollowingsteps:
gotoFacebookDevelopers
UnderMyAppsselectaddanewapp

adialogaskingfortherequiredplatformwillbeopenedthereyouneedtoselectWebsite

http://scn.sap.com/community/developercenter/frontend/blog/2015/04/19/howtodeveloprightpanepluginforwebidepart2facebookintegration

1/9

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN

Typethenameofthenewappyoucantypeanynamethatyoulikeityped"WebIDERightPanePlugin"andthen
clickonCreatenewFacebookAppIDbutton

LeaveIsthisatestversionofanotherappuncheckedandselectEducationunderthe

applicationcategoryandthenclickonCreateAppIDbutton

NextyouwillseeaJavaScriptcodesnippetsdescribinghowtoinitializetheapplicationthatyou'vejustcreated
andaplacetoconfigureyourFacebookwebsiteURL's.
UndersiteURLyouneedtocopyandpasteyourWebIDEURLdosobycopyyourWebIDEURLandpasteit
intothesiteURLfieldofyourFacebookApp.

IfeverythingwentwellyoushouldseeacheckmarkiconwithFinished!labelunderit

SetupWebIDE

InthissectionyouwillenhanceyourplugintoworkwithMVCapproachandpreparetheviewthatwillhold
yourFacebookfeed.
OpenyourWebIDEinstanceonadifferentbrowsertabandexpandtheprojectthatyoucreatedinpart1.The
projectnameismyfirstrightpaneplugin
thereyouwillfindalltheresourcesthatyou'vecreatedinpart1ofthisblog.

http://scn.sap.com/community/developercenter/frontend/blog/2015/04/19/howtodeveloprightpanepluginforwebidepart2facebookintegration

2/9

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN

Createanewviewandcontrollerfiles(MVCpatternSAPUI5SDKDemoKit)thatwillcontainstherightpane
content.
Selecttheviewfolder
rightclick>New>Component.AwizardforcreatenewComponentwillbeopend

ClickNextinthefirststepofthewizard
InthesecondstepselectSAPUI5ViewandthenclickonNext

Thefirststepofthewizardshouldcontainthefollowingfields:
ViewType:SelectJavaScript(thedefaultvalueisXMLjustchangeittoJavaScript)
Namespace:writerpaneplugin
ViewName:writefeed

ClickNextandthenFinish
2newfileswillbeaddedundertheviewfolderundermyfirstrightpanepluginproject

Connecttheviewandcontrollerfilestoyourpluginruntime
UnderyourprojectexpandtheservicefolderanddoubleclickonPlayer.jsfile(wascreatedonpart1of
thisblog)
Defineanewparameterwithname_oViewabovetheinitmethod.

replacethegetContentmethodwiththefollowingcode:
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.

varthat=this
if(this._oView===undefined){
returnthis.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")
returnthat._oView
})

http://scn.sap.com/community/developercenter/frontend/blog/2015/04/19/howtodeveloprightpanepluginforwebidepart2facebookintegration

3/9

4/19/2015
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

HowtodeveloprightpanepluginforWebIDE(P...|SCN

}else{
returnthis._oView
}

ThegetContentmethodreturnsthecontentthatshouldbeaggregatedintotherightpanecontentarea.Theoldcodereturnsalayoutwhichcontainonebutton,nowwechangeitto
IntheviewcodewewillbuildallthenecessaryUIelementsandinthecontrollerwewilltakecareonthebusinesslogic,eventsetc.

Testyourplugin

selectthefeed.view.jsfilewhichlocatedunderviewfolderandopenitforediting
ReplacethecontentofcreateContentmethodwiththefollowing:
varoButton=newsap.ui.commons.Button({
text:"Testbutton"
})
returnoButton
Testyourplugin:rightclickonplugin.json>Run>RunPluginProject.
anewbrowsertabwillbeopenedwithanotherinstanceofWebIDE.

FromthemaintoolbarselectView>TogglePlayer

Theresultwillbeabuttonthatwillbelocatedinsidetherightpanecontent

IfeverythingworksyouarenowreadytostartwithaggregatingyourFacebookfeed.

FacebookIntegration

InthissectionyouwilladdtheactualfeedfromFacebooktorightpaneview.Theresultofthefollowingsteps
willbethatyouwillbeabletoseeaverybasicinfofromyourFacebookhomefeedinsidetheWebIDEright
pane.Theinfothatwillbeshownwillbealistofpostswiththenameandprofilepictureoftheuserwho
createdthepostandthepostcontent.
UsingthesameAPIcallsyouwillalsobeabletoshowadditionaldatalike:numberoflikes,comments,
attachedvideosorphotos,linksandmore.
SelectthePlayer.jsfilewhichlocatedunderservicefolder
Copyandpastethefollowingcodeinsidetheinitfunction
01.
02.
03.
04.
05.

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

replace'{your_facebook_app_id}'placeholderwithyourFacebookappidthatyoucreatedinprevioussteps.
GotoFacebookDevelopers
SelectMyApps>Clickontheappnamethatyoucreated

http://scn.sap.com/community/developercenter/frontend/blog/2015/04/19/howtodeveloprightpanepluginforwebidepart2facebookintegration

4/9

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN

CopythenumberundertheAppIDfieldandreplaceitwith'{your_facebook_app_id}'placeholder.

LoadFacebookJavaScriptSDKresources
ChangethefirstlineofPlayer.jsfile
from

01.

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

01.

define(["sap/watt/common/plugin/platform/service/ui/AbstractPart","//connect.facebook.net/en_US/sdk.js"

to

CreatetheFeedUI
Selectfeed.view.jsfilewhichlocatedunderviewfolder
ReplacethecreateContentfunctioncontentwiththefollowingcontent:

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.

varoLayout=newsap.ui.layout.VerticalLayout({
width:"100%",
height:"100%"
}).addStyleClass("FB_VLayout")
this.oUserDetailsLayout=newsap.ui.layout.HorizontalLayout({
width:"100%",
visible:false
}).addStyleClass("FB_UserDetailsLayout")
varoUserProfilePicture=newsap.ui.commons.Image({
width:"40px",
height:"40px"
}).addStyleClass("FB_UserProfilePicture")
this.oUserDetailsLayout.addContent(oUserProfilePicture)
varoUserDisplayNameLabel=newsap.ui.commons.Label({
text:"userdisplayname"
})
this.oUserDetailsLayout.addContent(oUserDisplayNameLabel)
oLayout.addContent(this.oUserDetailsLayout)
this.oFeedRowRepeater=newsap.ui.commons.RowRepeater({
numberOfRows:70,
design:sap.ui.commons.RowRepeaterDesign.Transparent,
noData:newsap.ui.commons.TextView()
}).addStyleClass("FB_FeedRowRepeater")
//Rowrepeatertemplate
this.oFeedRowRepeaterTemplate=newsap.ui.layout.HorizontalLayout({
width:"70%"
}).addStyleClass("FB_RowRepeaterTemplateLayout")
varoPostedByImage=newsap.ui.commons.Image({
height:"40px",
width:"40px"
}).addStyleClass("FB_UserProfilePicture")
oPostedByImage.bindProperty("src","picture")
this.oFeedRowRepeaterTemplate.addContent(oPostedByImage)
varoPostedByName=newsap.ui.commons.Label().addStyleClass("FB_PostedByLabel")
oPostedByName.bindProperty("text","from")
varoPostContent=newsap.ui.commons.TextView({
wrapping:true
}).addStyleClass("FB_PostTextView")
oPostContent.bindProperty("text","message")
varoFeedContentLayout=newsap.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)
returnoLayout

http://scn.sap.com/community/developercenter/frontend/blog/2015/04/19/howtodeveloprightpanepluginforwebidepart2facebookintegration

5/9

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN
Replacethecontentofstyle.csswhichlocatedundercssfolderwiththefollowingcontent

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

.FB_VLayout{
width:100%
height:100%
backgroundcolor:white!important
position:absolute
top:0
left:0
overflowy:auto
overflowx:hidden
}
.FB_View{
backgroundcolor:white
position:relative
height:100%
overflowx:hidden
}
.FB_UserDetailsLayout{
backgroundcolor:#4e69a2
color:white
fontsize:15px
width:100%
padding:10px
}
.FB_PostContent{
marginleft:10px
}
.FB_UserProfilePicture{
height:40px
width:40px
borderradius:20px
}
.FB_PostedByLabel{
color:#3b5998
fontweight:bold
padding:0
}
.FB_FeedRowRepeater{
textalign:center
margintop:10px
overflowx:hidden
}
.FB_RowRepeaterTemplateLayout{
width:90%
borderbottom:1pxsolid#e9eaed
textalign:left
paddingtop:5px
paddingbottom:5px
}
.FB_FeedTitle{
padding:10px
}
.FB_PostTextView{
height:auto!important
width:90%
fontsize:14px
}
Lastbutnotleastreplaceallthecontentoffeed.controller.jswiththefollowingcontent:

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.

sap.ui.controller("rpaneplugin.view.feed",{
_oFbUser:undefined,
onInit:function(){
varthat=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{
//Loginuser

http://scn.sap.com/community/developercenter/frontend/blog/2015/04/19/howtodeveloprightpanepluginforwebidepart2facebookintegration

6/9

4/19/2015
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.

HowtodeveloprightpanepluginforWebIDE(P...|SCN
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){
varoView=this.getView()
varoUserDisplayNameLabel=oView.oUserDetailsLayout.getContent()[1]
varoUserProfilePicture=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){
varoResults={
data:[]
}
for(vari=0i<response.data.lengthi++){
varoRecord=response.data[i]
varsMessage=oRecord.message!==undefined?oRecord.message:oRecord.story
varsPictureUrl="//graph.facebook.com/"+oRecord.from.id+"/picture"
oResults.data.push({
message:sMessage,
from:oRecord.from.name,
picture:sPictureUrl
})
}
varoModel=newsap.ui.model.json.JSONModel(oResults)
oView.oFeedRowRepeater.setModel(oModel)
}
}
)
}
})

Quickexplanationonthecodeabove:
onInitIftheuserisalreadyloggedintoyourappthendisplaytheuserfeedimmediately,otherwise
displayaFacebookconnectloginscreentotheuser.The"read_stream"scoperequestpermissions
fromtheusertoaccesshisfeed.
_setUserDetailsDisplaytheloggedinusernameandprofilepictureandtheuserhomefeedfrom
Facebook
Theabovelinesofcodepresentsonlythefollowingdetails:
Loggedinuserdisplaynameandprofilepicture
Loggedinuserhomefeedwiththefollowingfields:
Nameoftheuserwhocreatedthepost
Profilepictureoftheuserwhocreatedthepost
Theposttitle(eitherifitisamessageorastory)
InordertoshowmorefieldsandperformadditionalinteractionswithFacebookAPIpleaserefertothe
following:FacebookSDKforJavaScriptReference

Seetheresults

Yourlaststepistoreviewtheresultsofwhatyoujustcreated.

http://scn.sap.com/community/developercenter/frontend/blog/2015/04/19/howtodeveloprightpanepluginforwebidepart2facebookintegration

7/9

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN

Selectplugin.jsonwhichlocatedundertherootfolder
Rightclick>Run>RunPluginProject

anewinstanceofWebIDEwillbeopenedinanewbrowsertab
FromthemaintoolbarselectView>TogglePlayer

IfyoualreadygavepermissionstotheFacebookAppbeforeyouwillseetheresultsimmediatelyotherwise,you
willseeapopupthatwillaskforyourpermissions

Congratulations!youhavecompleteddevelopingapluginwhichpresentsyourFacebookfeedinyourWeb
IDEenvironment.
YouarenowreadytorockandcreateamazingandinnovativestuffforWebIDE.

166Views

Tags:plugin,ui5,webide,webdevelopment

AverageUserRating

http://scn.sap.com/community/developercenter/frontend/blog/2015/04/19/howtodeveloprightpanepluginforwebidepart2facebookintegration

8/9

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN

(2ratings)

Share

Tweet

Like

0Comments
Therearenocommentsonthispost

SiteIndex
Privacy

ContactUs
TermsofUse

SAPHelpPortal
LegalDisclosure

Copyright

http://scn.sap.com/community/developercenter/frontend/blog/2015/04/19/howtodeveloprightpanepluginforwebidepart2facebookintegration

FollowSCN

9/9