design studio 1.2 sdk - creating a custom line

Getting Started Newsletters Store Products Services & Support About SCN Downloads Industries Training & Education Partnership Developer Center Lines of Business University Alliances Events & Webinars Innovation Log On Join Us Hi, Guest Search the Community Activity Communications Actions Browse Tweet created by David Richardson on Nov 20, 2014 5:04 PM, last modified by David Richardson on Nov 20, 2014 10:26 PM Here's a component I created for a dashboard where the client requested a visual hierarchy of related KPI tiles, showing relationships by connecting lines: Figure 1 While the design does not convey a lot of information and does not make the best use of available space it was exactly what the business requested. However, with the limited number of components available in DS 1.2 this was not possible to do outofthebox so I set out to create the required components, including the line component seen above (I also created the status circle and trend arrow indicators if anyone is interested, but they are straightforward for the most part): Figure 2 The line is multiconfigurable, and can be stretched/reduced as required. By default the line shifts, or "bends", mid point on the canvas from one side to the other. The Bend Type parameter will allow this bend to occur at the "Top", "Middle" or "Bottom" as required: Figure 3 The Direction of this "bend" can also be changed, as seen below in Figure 4: Figure 4 Design Studio 1.2 SDK Creating a custom line component 1 Like Version 2

Upload: dong-hai-nguyen

Post on 06-Nov-2015

5 views

Category:

Documents

1 download

Report

Download

Embed Size (px):

DESCRIPTION

Design Studio - Custom Line

TRANSCRIPT

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