Download - Design Studio 1.2 SDK - Creating a Custom Line

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



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



FollowSCNSiteIndex ContactUs SAPHelpPortalPrivacy TermsofUse LegalDisclosure Copyright

AverageUserRating

(0ratings)

Tweet 1Like

Therearenocommentsonthisdocument.

0Comments

Download - Design Studio 1.2 SDK - Creating a Custom Line

Top Related