BI Launchpad Menu with sap.m.StandardTile

[former_member193140]

I want to create a simple tile-based menu which user can click the tile to go to the next level menu and eventually will get the detail page with the link and useful information on the report. I also add the search function to search on the particular tile/report. I am applying this for the BI portal menu. That was the objective of this blog.

Firstly, we need to define the JSON structure to get and populate the information. I obtained the information from the table AGR_HIER and AGR_BUFFI and join them together to create the following structure and convert into a JSON format:

{

  "modelData": [

    {

      "PARENT_ID": "11",

      "OBJECT_ID": "2",

      "SORT_ORDER": "60",

      "ME": "2",

      "N": "F",

      "TCODE": "",

      "SAP_GUID": "",

      "TARGET_SYS": "",

      "TEXT": "Asset Accounting",

      "X_POS": "7585",

      "Y_POS": "2878",

      "INFOS": "",

      "URL_TYPE": "",

      "URL": "",

      "SOURCEROLE": ""

    }

]

}

A complete JSON data can be found in the GitHub.

Filtering Function

On this design, I have created four views based on the total number of levels from the biggest value in 'MENU_LEVEL-ME' in JSON data (i.e, 4). Let us keep this design simple at the moment for learning purpose.

For each levels, we will do a filtering based on the PARENT_ID to create the tiles from JSON model: modelData.

function createTilesFromModel( oTileContainer, modelPath, id) {

  if (oTileContainer.hasModel() == false) {

  console.log("Error:" + oTileContainer);

  return;

  }

  var filter =  new sap.ui.model.Filter("PARENT_ID", sap.ui.model.FilterOperator.EQ, id);

  var template = new sap.m.StandardTile({

  title: '{TEXT}',

  info: '{ME}',

  icon: 'sap-icon://task',

  activeIcon: 'task',

  customData : [{

  Type:"sap.ui.core.CustomData",

     key:"OBJECT_ID",

     value:"{OBJECT_ID}"

   }

  ],

  tooltip: "{URL}",

  press: function (evt) {

  var sO = evt.getSource().data("OBJECT_ID"); //Destination

  oController.onNavButtonTo(evt, sO);

  }

  });

  oTileContainer.bindAggregation("tiles", {

  path: modelPath, filters: filter, template: template

  });

  }

To continue to the next level, once user clicked on the tile, we pass the OBJECT_ID to the context in onNavButtonTo.

press: function (evt) {

  var sO = evt.getSource().data("OBJECT_ID");

  oController.onNavButtonTo(evt, sO);

  }

The OBJECT_ID will become a PARENT_ID in the subsequent views and call the createTilesFromModel function.

this.addEventDelegate({

  onBeforeShow: function(evt) {

createTilesFromModel(MyTileContainer, "/modelData", evt.data.context);

  }

  }, this);

And finally, the Detail view (last view) will show the report name and the URL.

oTableMat.bindAggregation("items", {

         path: "/detail",

         template: new sap.m.ColumnListItem({

             cells: [

                     new sap.m.Label({ text: "{dText}" }),

                     new sap.ui.commons.Link({

              text : "{dText}",

              href : "{dUrl}",

              target : "_blank",

              tooltip : "{dUrl}"

              })

             ]

         })

     });

this.addEventDelegate({

  onBeforeShow: function(evt) {

  this.setModel(sap.ui.getCore().getModel('detailmodel'));

  }

  }, this);

Thanks for reading my blog, do let me know if you have any comments/questions.

Source code:

https://github.com/ferrygun/SAPBIMenu