design studio dynamic hierarchy

17/6/2015 DesignStudioInnovationSeriesTopic5:ABe...|SCN

http://scn.sap.com/community/businessobjectsdesignstudio/blog/2015/05/25/designstudioinnovationseriestopic5implementingahierarchyfilterwit 1/8

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

SAPBusinessObjectsDesignStudio

Tweet

IntroductionInthiseditionofthe DesignStudioInnovationSeries,I'mgoingtodescribeanapproachforimplementingahierarchyfilterbasedonstandardand SDKDevelopmentCommunitycomponents,totakeadvantageofcomplementaryfeaturesofboth.Withthestandardfunctionality,wecanimplementcascadingfilterswiththeDropdownBoxandListBoxcomponentsbutneitherofthesecaterforhierarchystructures,whichistherequirementIwilladdresshere.TheResultThesolutionallowscompact,levelbylevelhierarchicaldrilldown,withtheoptiontodrillbackuplevelbylevelorgostraighttothebeginning.Beforegoingintothedetails,here'stheendresultintheformofananimatedgif(Clickontheimageifitdoesn'tstartplayingimmediately.Itmaytakealittlebitoftimetoload).Inthisexample,thehierarchyfilterisdrivingachart:

Forthoseofyouwhowanttogetstraighttoit,asampleBIAPPisattachedattheend.Forthoseinterestedinthedetails,readon!...BackgroundThispostwasinspiredbythe CascadeFilterforHierarchyDimensionquestionfrom OscarOlivaresPous.Sincetherequirementinvolvedafixedlevelhierarchystructure,IwasabletoproposeasolutionthatreliedonlyonstandardfunctionalitybasedontheCrosstabcomponent.Afurtherthoughtthenoccurredtomeabouthowcouldthesolutionbeextendedtoachievedynamicfilteringfordrillingdownandupahierarchystructurewithmanylevelsofvaryingdepth,asshownbelow?:

DesignStudioInnovationSeriesTopic5:ABestofBothWorldsImplementingaDynamicHierarchyFilterbycombiningStandardandSDKCommunityComponentsPostedbyMustafaBensaninSAPBusinessObjectsDesignStudioonMay25,20151:31:57PM

1Like



WecouldcertainlyuseaCrosstabcomponentasis,asshownabovebutthiscanbecomeunwieldyasnodesareexpandedandcollapsed,withtheaddedneedforscrollingwhenthestructureislarge.Similarly,useofthestandardDimensionFilteralsorequiresnodemanipulationandscrolling,withseveralclickstofindtherequireditemandthenbackouttoapply,asshownbelow:

TheApproach

ThesolutioniscentredaroundastandardCrosstabcomponentbecauseunliketheDropdownBoxandListBox,itsupportsdisplayofahierarchystructureandselectionofnodes.DrillingdownahierarchyonelevelatatimebyapplyingthesetFilter()methodonthedatasourceassignedtoaCrosstabisrelativelystraightforward.However,theproblemariseswhenweneedtoimplementdrillupfunctionalitytomovebackinthehierarchy.Theproblemhereisweneedtosomehow"remember"thedrillpathandparentchildrelationships.AsfarasIcouldsee,therewasnoeasywaytoachievethiswithstandardscriptingalone.Weneedtostorethedrillpathinsomekindofstructurethatwecanmanipulateandlookup,soItookalookatthe DesignStudioSDK:CollectionUtilityComponentfromthe

SDKDevelopmentCommunityasapossiblecandidateanditdidthetrick!Note:TheCollectionUtilitycomponentcurrentlydoesn'tseemtoallowdeletionofspecificentriessoalldrillpathsthattheusertraversesarestoredthefirsttimetheusergoesdownaparticularpath.Ithinkagreatenhancementtothe

DesignStudioSDK:CollectionUtilityComponentwouldbesupportforstackfunctionalitywithPushandPopmethods.Thiswouldallowamoreefficientmechanismforrecordingandtraversingdrillpathsandonlythecurrentdrillpathwouldneedtobetracked.Sonowlet'sgothroughastepbystepbreakdown.DataSourceInordertoallowlevelbyleveldrilldown,theInitialViewofthemaindatasourceisconfiguredasshownbelow,expandedtolevel2:



ComponentsMyaimwastoimplementamodular,reusablesolution,soontheUIsideIhaveeffectivelycreatedacompositecomponentbycombiningaHomeButton,BackButtonandCrosstabwithinaPanelcomponent:

Intheoutlinepanelitlookslikethis:

Totrackthedrillpath,IhaveIhaveusedtwocollectionsimplementedwiththe DesignStudioSDK:CollectionUtilityComponent:

TheHierarchycollectionkeepstrackofthedrillpathandtheVariablecollectiontracksthepreviousnodetoallowreversalbackupthedrillpath.IprobablycouldhaveusedaGlobalScriptVariabletoperformthesamefunctionastheVariablecollectionbutthoughtitwouldhelpmakethesolutionalittlemoremodular.FordemopurposesI'vealsoincludedtheSDKDevelopmentCommunity FioriAppHeadercomponent.CSSIhaveadapted HaripriyaGopi'sveryusefulmethodfor DefaultSelectioninaCrosstabtoimplementthefollowingfunctionality:

1. Highlightthefirstrowasthedefaultselectiononstartup2. Highlightthefirstrowasthedefaultselectionwhendrillingbacktothepreviouslevel

TheCSSfilefortheapplicationhasbeennameddefaultselection.cssandconsistsofthefollowingcode:

TheCSSfileshouldbeassignedtotheApplicationPropertiesasshownbelow:

01. .highlightrow.sapzencrosstabRowHeaderAreatr:nthchild(1).sapzencrosstabHeaderRowtd:nthchild(1)02. {03. backgroundcolor:#7bc3ef!important04. }



TheCSSClasshighlightrowshouldthenbeassignedtotheCrosstabcomponentasshownbelow:

GlobalScriptVariablesIhavedefinedasetofconstantsasGlobalScriptVariablessotheycanbemaintainedcentrally,asshownbelow:

GlobalScriptFunctionsTokeepthecodemodular,severalscriptfunctionshavebeencreatedundertheHIERARCHY_FILTERglobalscriptsobjectasshownbelow:



Eachofthesefunctionsareselfcontainedinthatallnecessaryexternaldataarepassedasinputparameters.Agreatfeatureofglobalscriptfunctionsisthatyoucanevenpassincomponentsanddatasourcesasparametersandthenperformactionsonthesesuchassettingpropertiesorfiltering,soyoucanapplythesamestandardprocesstomultiplecomponents/datasourcesifneeded.I'llnowdescribeeachofthefunctionsinlogicalorder.initialize:Thisfunctioniscalledfromthe"OnStartup"eventscriptoftheapplication.Itperformsthefollowingmaintasks:

VerifiesthatthedimensionwewanttodrillonhasanactivehierarchyassignedtoitInitializesthecollectionsforthehierarchystructureandpreviousnodeSetsthedefaulttextofthefiltervalueDisablesnavigation,sortingandcolumnresizingonthefiltercrosstabDisablesthebackbutton

Itrequiresthefollowingparameters:

InputParameter Type Description

pCrosstab Crosstab Crosstabforhierarchyfilter

pHierarchyDimension String Dimensionforhierarchyfilter

pHierarchyRoot String Rootofhierarchy

pHierarchyRootDescription String Hierarchyrootdescription

pHierarchyPrefix String Hierarchyprefix

pDataSource DataSourceAlias DataSourceforhierarchyfilter

pHierarchyCollection org.scn.community.utils.Collection Collectionforhierarchy

pVariableCollection org.scn.community.utils.Collection Variablecollectionforhierarchy

pBackButton Button BackButton

pTitleText Text SelectedItemText

pPreviousNodeID String PreviousNodeIdentifierkeyusedinvariablecollectionlookup

Thescriptiscodedasfollows:

drillDown:Thisfunctioniscalledfromthe"OnSelect"eventscriptofthefiltercrosstab.Itistheengineofoverallfunctionalityandperformsthefollowingmaintasks:

InitializesvariablesRecordsthedrillpathDrillsdowntothenextlevelAppliesafiltertothetargetdatasource



01. //02. //InitialiseHierarchyFilter03. //04. //Verifyactivehierarchiesexist05. if(!pDataSource.isHierarchyActive(pHierarchyDimension))06. {07. APPLICATION.createErrorMessage("Noactivehierarchyfordatasource"+pDataSource.getInfo().dataSourceName)08. returnfalse09. }10. //InitializeCollections11. varhierarchyRoot=pHierarchyPrefix+pHierarchyRoot12. pHierarchyCollection.addItem(hierarchyRoot,'',0.0,pHierarchyRootDescription)//Initializefirstindexitemwithhierarchyrootnode13. pVariableCollection.addItem(pPreviousNodeID,hierarchyRoot,0.0,pHierarchyRootDescription)//Initializepreviouslyselectednode14. //Setrootnodedescriptionasdefaulttext15. pTitleText.setText(pHierarchyCollection.getEntryByKey(hierarchyRoot).prop1)16. //Initialisecrosstabsettings17. pCrosstab.setHierarchyNavigationEnabled(false)//Disablenavigation18. pCrosstab.setSortingEnabled(false)//Disablesorting19. pCrosstab.setColumnResizingEnabled(false)//Disablecolumnresizing20. pBackButton.setEnabled(false)//DisableBackbutton21. returntrue



pCrosstab Crosstab Crosstabforhierarchyfilter

pHierarchyDimension String Dimensionforhierarchyfilter

pDataSource DataSourceAlias Hierarchydatasource

pTargetDataSource DataSourceAlias Targetdatasourceforfiltering




pHierarchyNodePrefix String Hierarchynodeprefix

pPreviousNodeID String PreviousnodeIDforvariablecollectionlookup

pNotApplicable String NotApplicableconstantvalue

pAllMembers String Allmembersfiltervalue


filterTarget:ThisfunctioniscalledfromthedrillDown,backandhomefunctions.Itperformsthefollowingmaintasks:

FiltersthetargetdatasourceUpdatesthetextfieldtodisplaythenewfiltervalue



pDataSource DataSourceAlias Targetdatasourceforapplyingfilter

pFilterDimension String Dimensiontobefilteredintargetdatasource

pFilterKey String Dimensionmemberkeytobefilteredintargetdatasource

pFilterText String Dimensionmembertext

pText Text Textcomponenttodisplayselecteddimensionmember


back:

01. //02. //DrilldownProcessing03. //CalledfromOnSelecteventofCrosstab04. //05. //Initialisevariables06. varparentNodeKey=""07. varselectedFilterKey=pCrosstab.getSelectedMember(pDrillDimension).internalKey08. varselectedFilterText=pCrosstab.getSelectedMember(pDrillDimension).text09. varindexCheck=pHierarchyCollection.getIndexByKey(selectedFilterKey)+''10. varnodePrefix=selectedFilterKey.substring(0,pHierarchyNodePrefix.length)11. varpreviousNodeKey=pVariableCollection.getLabelByKey(pPreviousNodeID)12. varrootNode=pHierarchyCollection.getKeyByIndex(0)13. //Adddrillpathtocollectiononlyifithasnotalreadybeenaddedfromapreviousdrilldown14. if(indexCheck==pNotApplicable&&selectedFilterKey!=pAllMembers&&nodePrefix==pHierarchyNodePrefix)15. {16. parentNodeKey=previousNodeKey17. pHierarchyCollection.addItem(selectedFilterKey,parentNodeKey,0.0,selectedFilterText)18. }19. //Drilldowntothenextlevelonlyiftheselectednodeisahierarchynode20. //Updatepreviousnode21. if(nodePrefix==pHierarchyNodePrefix)22. {23. pDataSource.setFilter(pDrillDimension,selectedFilterKey)24. pVariableCollection.removeAllItems()25. pVariableCollection.addItem(pPreviousNodeID,selectedFilterKey,0.0,selectedFilterText)26. }27. else28. {29. pCrosstab.setCSSClass("")//Clearfirstrowhighlightingifselectionisleafnode30. }31. //IftheBackbuttonisnotenabledthenenableitifconditionsaremet32. if(!pBackButton.isEnabled()&&selectedFilterKey!=pAllMembers&&selectedFilterKey!=rootNode)33. {34. pBackButton.setEnabled(true)35. }36. //Applyfiltertothetargetiffilterisnot"allmembers"37. if(selectedFilterKey!=pAllMembers)38. {39. HIERARCHY_FILTER.filterTarget(pTargetDataSource,pDrillDimension,selectedFilterKey,selectedFilterText,TEXT_CHART_TITLE)40. }

01. //02. //FilterTarget03. //04. pDataSource.setFilter(pFilterDimension,pFilterKey)05. pText.setText(pFilterText)//Updatetexttodisplaynewfiltervalue



Thisfunctioniscalledfromthe"OnClick"eventscriptoftheBackbutton.Itperformsthefollowingmaintasks:

InitializesvariablesUpdatestheprevioushierarchynodeDrillsbacktotheprevioushierarchynodeAppliesafiltertothetargetdatasource








pText Text TextcomponenttodisplayselecteddimensionmemberpHierarchyDimension String DimensionforHierarchyFilter

pPreviousNodeID String PreviousnodeIDforvariablecollectionlookuppCrossTab Crosstab CrosstabforHierarchyFilter

pRowSelectionClass String CSSClasstohighlightfirstrowofcrosstab


home:

Thisfunctioniscalledfromthe"OnClick"eventscriptoftheHomebutton.Itperformsthefollowingmaintasks:

GetstherootnodeofthehierarchyResetstheprevioushierarchynodeRemovesthehierarchyfilterFiltersthetargetdatasourcebasedontherootnode








pHierarchyDimension String DimensionforHierarchyFilter

pPreviousNodeID String PreviousnodeIDforvariablecollectionlookuppCrossTab Crosstab CrosstabforHierarchyFilter

pRowSelectionClass String CSSClasstohighlightfirstrowofcrosstab

01. //02. //Backbutton(drillup)Processing03. //04. //InitialiseVariables05. varpreviousNode=pVariableCollection.getLabelByKey(pPreviousNodeID)06. varparentNode=pHierarchyCollection.getLabelByKey(previousNode)07. varparentNodeText=pHierarchyCollection.getEntryByKey(parentNode).prop108. varrootNode=pHierarchyCollection.getKeyByIndex(0)09. previousNode=parentNode10. varpreviousNodeText=parentNodeText11. //UpdatePreviousNode12. pVariableCollection.removeAllItems()13. pVariableCollection.addItem(pPreviousNodeID,previousNode,0.0,previousNodeText)14. //Setfiltertodrillbacktopreviousnode(parentnode)15. pDataSource.setFilter(pHierarchyDimension,previousNode)16. //Applyhighlighttofirstrowofcrosstab17. pCrossTab.removeSelection()18. pCrossTab.setCSSClass(pRowSelectionClass)19. //DisableBackbuttoniftopofhierarchyhasbeenreached20. if(previousNode==rootNode)21. {22. pBackButton.setEnabled(false)23. }24. //Applyfiltertotargetdatasource25. HIERARCHY_FILTER.filterTarget(pTargetDataSource,pHierarchyDimension,previousNode,previousNodeText,pText)



FollowSCNSiteIndex ContactUs SAPHelpPortalPrivacy TermsofUse LegalDisclosure Copyright

AverageUserRating

(3ratings)

Tweet


StartupScript:

ComponentScripts:

Crosstab:

HomeButton:

BackButton:

Conclusion

Ihopethehierarchyfilterapproachdescribedhereisusefulforthoseofyouwhohavesucharequirement.TheBIAPPintheanimateddemoaboveisattached.Commentsandquestionsarewelcomeasalways.Enjoy.BlogSeriesIndex: DesignStudioInnovationSeriesWelcome

600Views Categories:SDK,Scripting,BW,HANA Tags:sapzen,design_studio,design_studio_sdk

01. //02. //HomeButtonProcessing03. //04. //Getrootnodeinformation05. varrootNodeKey=pHierarchyCollection.getKeyByIndex(0)06. varrootNodeText=pHierarchyCollection.getEntryByKey(rootNodeKey).prop107. //Resetpreviousnodepointer08. pVariableCollection.removeAllItems()09. pVariableCollection.addItem(pPreviousNodeID,rootNodeKey,0.0)10. //Removefiltertoresethierarchytotoplevel11. pDataSource.clearFilter(pHierarchyDimension)12. //Removepreviousrowselectionandhighlightfirstrowasdefault13. pCrossTab.removeSelection()14. pCrossTab.setCSSClass(pRowSelectionClass)15. //DisableBackbutton16. pBackButton.setEnabled(false)17. //Filtertargetdatasourcebasedonrootnode18. HIERARCHY_FILTER.filterTarget(pTargetDataSource,pHierarchyDimension,rootNodeKey,rootNodeText,TEXT_CHART_TITLE)

01. HIERARCHY_FILTER.initialize(CROSSTAB_FILTER,cDrillDimension,cHierarchyRootNode,cHierarchyRootNodeDesc,cHierarchyPrefix,DS_1,HIERARCHY_COLLECTION,VARIABLE_COLLECTION,BACK_BUTTON,TEXT_CHART_TITLE,cPreviousNode)

01. HIERARCHY_FILTER.drillDown(CROSSTAB_FILTER,cDrillDimension,DS_1,DS_2,HIERARCHY_COLLECTION,VARIABLE_COLLECTION,BACK_BUTTierarchyNodePrefix,cPreviousNode,cNotApplicable,cAllMembers)

01. HIERARCHY_FILTER.back(DS_1,DS_2,HIERARCHY_COLLECTION,VARIABLE_COLLECTION,BACK_BUTTON,TEXT_CHART_TITLE,cDrillDimension,cPre

01. HIERARCHY_FILTER.back(DS_1,DS_2,HIERARCHY_COLLECTION,VARIABLE_COLLECTION,BACK_BUTTON,TEXT_CHART_TITLE,cDrillDimension,cPrviousNode,CROSSTAB_FILTER,cRowSelectionClass)

SCN_BLOG_HIERARCHY_FILTER_DEMO.zip.txt.zip(5.5K)

1Like

Therearenocommentsonthispost

0Comments

design studio dynamic hierarchy

Documents