design studio 1.2 sdk - creating a custom line
DESCRIPTION
Design Studio - Custom LineTRANSCRIPT
-
17/6/2015 DesignStudio1.2SDKCreatingacustomline...|SCN
http://scn.sap.com/docs/DOC59659 1/3
GettingStarted Newsletters Store
Products Services&Support AboutSCN Downloads
Industries Training&Education Partnership DeveloperCenter
LinesofBusiness UniversityAlliances Events&Webinars Innovation
LogOn JoinUsHi,Guest SearchtheCommunity
Activity Communications Actions
Browse
Tweet
createdbyDavidRichardsononNov20,20145:04PM,lastmodifiedbyDavidRichardsononNov20,201410:26PM
Here'sacomponentIcreatedforadashboardwheretheclientrequestedavisualhierarchyofrelatedKPItiles,showingrelationshipsbyconnectinglines:
Figure1Whilethedesigndoesnotconveyalotofinformationanddoesnotmakethebestuseofavailablespaceitwasexactlywhatthebusinessrequested.However,withthelimitednumberofcomponentsavailableinDS1.2thiswasnotpossibletodooutoftheboxsoIsetouttocreatetherequiredcomponents,includingthelinecomponentseenabove(Ialsocreatedthestatuscircleandtrendarrowindicatorsifanyoneisinterested,buttheyarestraightforwardforthemostpart):
Figure2Thelineismulticonfigurable,andcanbestretched/reducedasrequired.Bydefaultthelineshifts,or"bends",midpointonthecanvasfromonesidetotheother.TheBendTypeparameterwillallowthisbendtooccuratthe"Top","Middle"or"Bottom"asrequired:
Figure3TheDirectionofthis"bend"canalsobechanged,asseenbelowinFigure4:
Figure4
DesignStudio1.2SDKCreatingacustomlinecomponent
1Like
Version2
-
17/6/2015 DesignStudio1.2SDKCreatingacustomline...|SCN
http://scn.sap.com/docs/DOC59659 2/3
WiththerequirementtoshowanarrowheadtoindicatedirectionalflowImadethisanoptionalparameter.Sincethedataflowonlywentleft,rightordownIconfiguredthearrowheadtoonlypointinoneofthesethreedirections.Toaddan"up"arrowheadwouldbeminimalworkbasedonthecurrentcode,andinthinkingbackIshouldhaveaddedit.Onethingtonoteisboththe"Top"and"Middle"BendTyperesultinadownwardpointingarrowwhilethe"Bottom"BendTypewillpointeitherleftorright,dependingonthesetDirection:
Figure5Onequirkwiththisbendoccurswhenanarrowheadisadded(andagainwhenremoved).Ratherthanrunalongtheedgeofthecanvasthelineis"pulledin"toallowforjoiningthelinetothearrowheadatthecenter:
Figure6ThiswasadesigndecisiononmypartthatI'mstillnotconvincedwasthebest,asalinewithabendthenhasadifferentendpointwhenthearrowisdisplayed.Itwouldn'ttakemuchtoadjustthecodetoalwayshavethisendingpartofthelineremainoffsetfromtheedgeofthecanvas,regardlessofthearrowheadbeingdisplayedornot.Asthelinecomponentisreducedineithertheverticalorhorizontaldirection,thedefaultbendisreduced,andatacertainpoint(4timeslinewidthiswhatIchose)itwillchangetoaperfectlystraight,canvascentered,verticalorhorizontallinerespectfully:
Figure7
AndlastbutnotleastboththelineColorandthickness/weight(Size)canbechanged,withachangeinlinesizeresultinginaproportionalchangetothesizeofthearrowhead:
Figure8BycombiningtwoormoreLinecomponentstogethermorecomplexlinescanbedisplayed(seetheredlineaboveinFigure8andthelastlineobjectinFigure9below):
Figure9ItwouldbesimpleenoughtoenhancethisLinecomponent,addingdiaganallinecapabilitiesforexample.Ihaveuploadedthetwobasesourcefileshere:https://github.com/davelr/DesignStudioSDKCustomLineAsbeforeanyfeedbackisappreciated!
318Views Categories:SDKProducts:sap_businessobjects_design_studioTags:business_objects_design_studio,design_studio,
sapbusinessobjectsdesignstudio,sapdesignstudio,sap_design_studio,sap_bo_design_studio,design_studio_sdk
-
17/6/2015 DesignStudio1.2SDKCreatingacustomline...|SCN
http://scn.sap.com/docs/DOC59659 3/3
FollowSCNSiteIndex ContactUs SAPHelpPortalPrivacy TermsofUse LegalDisclosure Copyright
AverageUserRating
(0ratings)
Tweet 1Like
Therearenocommentsonthisdocument.
0Comments