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(Part1)
PostedbyRanHassidinSAPUI5DeveloperCenteronMar3,20157:49:03AM
Share

12

Tweet

15

Like

Hi,
InthisblogpostiwillshowhowtodeveloppluginthatwillbeintegratedintotherightpaneoftheWebIDE.

Prerequisites

UnderstandWebIDEpluginconceptdetailsonWEBIDEplugincanbefoundhere:
https://help.hana.ondemand.com/SAP_RDE/frameset.htm?52e7a34966ba4cfeb7eb74a048bb714e.html
SAPWebIDEinstanceeithertrialorproduction(youcangetonehere:SAPHANACloudPlatform)
Webbrowser(chrome/firefox)

RightPanePlugin

InWebIDEyoucancreatedifferenttypesofplugins(e.g.editorplugin,menuplugin,right/leftpanepluginsandmore)
inthistutorialiwillshowhowtocreatepluginthatwillbeintegratedintotheSAPWebIDErightpanearea.
currentlyundertherightpaneareayouwillbeabletofindthefollowingplugins:
Searchandreplace
Git
Githistory
Collaboration
APIreference
Outline

Let'sgetstarted!!

OpenSAPWebIDE
gotohttps://webide{your_user_id}trial.dispatcher.hanatrial.ondemand.com/
orviaHCPcockpit
gotoSubscriptions>clickonsapwebidelink>clickonWEBIDEapplicationURLtoopentheWeb
IDE

Createanewpluginprojecttemplate

http://scn.sap.com/community/developercenter/frontend/blog/2015/03/03/howtodeveloprightpanepluginforwebide

1/8

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN

ClickFile>New>ProjectFromTemplatetoopenthetemplatecreationwizard

SelectEmptyPluginProjectoption>ClickNext

FillintheprojectnamemyfirstrightpanepluginandclickNext
Fillinthepluginnameandplugindescription
Pluginname:rpaneplugin
Plugindescription:myfirstrightpaneplugin
Leavetheincludesampleimplementationcodeunchecked
ClickNext
*PleasenoticethatfromherethistutorialwillbebasedonthepluginnamethatyouenteredinthePlugin
Nametextfield

ClickFinishandWebIDEwillgenerateanemptypluginprojectunderyourworkspace

Reviewthegeneratedcode
Underyourworkspaceexpandthemyfirstrightpanepluginproject,Thereyoushouldfindthefollowingfolders:
Commandcontainsvariouscommandswhichwillbeusedinordertoexecutevariousoperations(e.g.
open,close,execute,deleteandsoon)
servicefoldercontainingserviceimplementationsandserviceinterfaces(whentheinterfacedoesnot
belongtosap.ide.common.service)
libfoldercontainingexternallibraries(e.g.opensource,reuselibrariesetc)
imagefoldercontainingimageresources
cssfoldercontainingcustomstylesheet(css)filesforstylingyourplugin
i18nlocalization
controlfoldercontainingSAPUI5customcontrols
viewfoldercontainingSAPUI5views(MVCdesignpatternSAPUI5SDKDemoKit)
plugin.jsonmainfilewhichcontainsallthepluginconfigurations

http://scn.sap.com/community/developercenter/frontend/blog/2015/03/03/howtodeveloprightpanepluginforwebide

2/8

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN

Pluginconfigurations
Doubleclickontheplugin.jsontoopenitforeditingviaSAPWebIDEeditor
Reviewtheplugin.jsonstructure:
name:pluginname
description:pluginshortdescription
i18n:localizationfilespath
requires:otherWebIDEpluginthatourplugindependson
provides:serviceswhichareprovidesbyourplugin(thatcanbereusedbyour/otherplugins)
configures:serviceconfigurationofourplugin(commands,stylesetc)
subscribes:subscribeforWebIDEevents

PluginconfigurationcontentLet'sfillinourplugin.jsonfilewithsomerelevantcontent.
copyandpastethethefollowingcontentandreplaceitwiththecontentofyourplugin.jsonfile.

{
"name":"rpaneplugin",
"description":"myfirstrightpaneplugin",
"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":"TogglePlayer",
"service":"rpaneplugin/command/Open",
"available":true
}
],
"commandGroup:items":[
{
"parent":"view.otherPanes",

http://scn.sap.com/community/developercenter/frontend/blog/2015/03/03/howtodeveloprightpanepluginforwebide

3/8

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN
"command":"rpaneplugin.open",
"prio":"30"
}
],
"perspective:views":[
{"id":"player","service":"@player","area":"right","visible":"false","cssclass":"explorer
splitterContainer"}
]
}
},
"subscribes":{

}
}

Fromaquicklookattheplugin.jsoncontentwecanlearnthatourplugin
Dependsonthefollowingplugins:
usernotification
log
commandandcommandGroup
prespective
selection
content
resource
ProvideoneservicethenameoftheserviceisplayerandtheimplementationshouldbedoneinPlayer.js
file
ImplementonecommandthenameofthecommandisOpenandtheimplementationshouldbedonein
Open.jsfile
Fromperspective:viewswefigurethatthepluginwillbeshownontheWebIDErightpane

("area:"right")

Let'sgetourhandsdirtywithsomecode!!
CreatetheOpencommand

Selectthecommandfolder
Rightclick>New>File

EnterOpen.jsasthefilenameandclickOK

http://scn.sap.com/community/developercenter/frontend/blog/2015/03/03/howtodeveloprightpanepluginforwebide

4/8

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN

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

define({
execute:function(){
varthat=this
returnthis.context.service.player.isVisible().then(function(bVisible){
returnthat.context.service.player.setVisible(!bVisible)
})
},
isAvailable:function(){
returntrue
},
isEnabled:function(){
returntrue
}
})

Createtheplayerservice(2files)

Createtheserviceinterface
Selecttheservicefolder
Rightclick>New>File
EnterPlayer.jsonasthefilenameandclickOK

CopyandpastethefollowingcontentintothePlayer.jsonfile

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.

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

Createtheserviceimplementation

Selecttheservicefolder
Rightclick>New>File
EnterPlayer.jsasthefilenameandclickOK
CopyandpastethefollowingcontentintothePlayer.jsfile

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

define(["sap/watt/common/plugin/platform/service/ui/AbstractPart"],function(AbstractPart){
"usestrict"
varPlayer=AbstractPart.extend("rpaneplugin.service.Player",{
init:function(){
},
configure:function(mConfig){
this.context.service.resource.includeStyles(mConfig.styles).done()
},
getContent:function(){
varoButton=newsap.ui.commons.Button({

http://scn.sap.com/community/developercenter/frontend/blog/2015/03/03/howtodeveloprightpanepluginforwebide

5/8

4/19/2015
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

HowtodeveloprightpanepluginforWebIDE(P...|SCN
text:"RightPaneButton"
})
varoLayout=newsap.ui.layout.VerticalLayout({
width:"100%",
height:"100%",
content:[oButton]
})
oLayout.addStyleClass("playerLayout")
returnoLayout
},
isEnabled:function(oDocument){
returntrue
},
isAvailable:function(oDocument){
returntrue
}
})
returnPlayer
})

Currently(ForPart1oftheuserguide)ourpluginisverybasic.Itcontainsonlyabuttonandthat'sit.
InPart2(comingsoon...)oftheguideIwillshowhowwecanenhanceitwithmorecapabilities...

Lastbutnotleastcreatethecssfile
Selectthecssfolder
Rightclick>New>File
Enterstyle.cssasthefilenameandclickOK
Copyandpastethefollowingcontentintothestyle.cssfile
01.
02.
03.
04.
05.
06.

.playerLayout{
width:100%
height:100%
backgroundcolor:white
position:relative
}

Finally!!RuntheplugininWebIDE
Selecttheplugin.jsonfile
Rightclick>Run>RunPluginProject

aNewWebIDEinstancewillbeopenedinDEBUGMODE.ThisinstanceofWebIDEcontainsalsotheplugin
thatwejustcreated
ToviewthepluginclickonView>TogglePlayer

http://scn.sap.com/community/developercenter/frontend/blog/2015/03/03/howtodeveloprightpanepluginforwebide

6/8

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN

AnewpanewillappearattherightareaoftheWebIDEwiththepluginUI(asimplebuttonwith"RightPane
Button"text)

That'sit!NowthatyouknowhowtocreateplugintotheWebIDEyoucanextendandcustomizetheWebIDE
capabilitiesaccordingtoyourneeds!

PleaserefertoPart2ofthisguidethatwillguideyouhowtointegrateyourFacebookfeedinsidethepluginthatyou've
justcreated...

Thespecifieditemwasnotfound.

906Views

Categories:SAPWebIDE

AverageUserRating
(4ratings)

Share

12

Tweet

15

Like

3Comments
MichaelMuehlbergMar19,20151:07PM

HelloRan,

youaresettingthebackgroundcolorofyourrightpanehardlytowhite.

WhatIideallywantisthatIdon'tneedtosetthecoloratall.IwantthattheSAPUI5panealready
knowsinwhichbackgroundcoloritshouldappear.

WhydoIneedtosetthecoloratallandhowcanIsetitinawaythataglobalSAPwidethemecan
modifyit?IsthereanycentralplaceholderIcanuse?

Theotherpanes,forexample,don'tappearinwhite,theyseemtoappearinastandardbackground
color.Howdothesedothat?

Ciao,Michael
Like(0)

http://scn.sap.com/community/developercenter/frontend/blog/2015/03/03/howtodeveloprightpanepluginforwebide

7/8

4/19/2015

HowtodeveloprightpanepluginforWebIDE(P...|SCN
RanHassidMar23,20155:47AM(inresponsetoMichaelMuehlberg)

HiMichael,
CurrentlythereisnointegrationbetweenWebIDEtoUI5themedesignersothat'swhyi
createdacustomstylesheetfileformystylesbutitotallyagreewithyouthatit'sbettertodo
itwiththemeandnotwithcustomstylesheet

Ran.
Like(0)

MichalKeidarApr19,201510:36AM

Awesome.
Like(0)

SiteIndex
Privacy

ContactUs
TermsofUse

SAPHelpPortal
LegalDisclosure

Copyright

http://scn.sap.com/community/developercenter/frontend/blog/2015/03/03/howtodeveloprightpanepluginforwebide

FollowSCN

8/8