In February I switched my job, I was a C# developer and now, I`m using SAP UI5 to create new, modern software. My main task in the past was to create or modify some client applications. My current task is, to build a seat reservation tool using UI5.

During my work on the application I learned a lot about the SAPUI5 framework. Now I would like to share my experience with you.

First I would like to give you a short overview of the application.

I have a list of four rooms in my master view at the moment (later it would be a variable amount of rooms) and every room has a detail view with two, three or four seats. Every seat has his own attributes and positions. My current program includes a detail view with an “ObjectList” control, I bind the model at this element as an“ObjectListItems”.  After the event “UpdateFinished” I hide this control.

/wp-content/uploads/2014/05/1_447712.png

Why I go this kind of way?

Because I can`t bind my model at the tiles container in the XML view, so I don`t get an actual model. To continue my tiles story, I create a new function in the event (“UpdateFinished”) and draw the tiles. In this function I use the property ODataModel of the model. I collect all valid entries of my selected room and write them in a separate list. At the end I use a loop to create the tiles and fill them with the attributes.

In the detail.view I used an empty AbsoluteLayout as a container.


<iml:AbsoluteLayout id="AL1">
</iml:AbsoluteLayout>





The controller includes the following function:


drawTiles: function(oEvent) {
  // prepare a list
  var activeList = [];
  if (localController == null)
       localController = this;
  // get the local model and transfer all objects in the odata object into the prepared list,
  // if the the condition is true
  var model = localController.getView().getModel();
  $.each(model.oData, function(index, value) {
       if (index.indexOf("SeatSet")>-1) {
            activeList.push(value);
       }
  });
  // GET IMAGE
// var oImageSource = localController.getView().byId("imageBox").getSrc();
  var oImageSource = pic;
  // save the local items and model from hided list
  localItems = localController.getView().byId("lineItemList").getItems();
  // sort activeList and convert roomNo (string)
  var roomid = ZSeatReservationUI5.util.Formatter.Quantity(roomNo);
  activeList = this.sortList(activeList, roomid);
  // set ABSOLUTE LAYOUT
  var heigth = "800px";
  var width = "650px";
  var oAbsoluteLayout = localController.getView().byId("AL1");
  oAbsoluteLayout.setVisible(true);
  oAbsoluteLayout.destroyContent();
  oAbsoluteLayout.setHeight(heigth);
  oAbsoluteLayout.setWidth(width);
  oAbsoluteLayout.addContent(new sap.ui.commons.Image("Background", {src: oImageSource, width: width, heigth: heigth}));
  var i = 0;
  // loop on prepared list for every item and create for every item in list a new tile
  while(activeList.length > i) {
       var left = 0;
       var top = 0;
       var oContext = activeList[i];
  // defined positions
       switch (i){
                 case 0:
                         left = 116;
                          top = 50;
                          break;
                 case 1:
                           left = 340;
                            top = 50;
                           break;
                 case 2:
                           left = 116;
                           top = 306;
                           break;
                 case 3:
                           left = 340;
                           top = 306;
                           break;
                 default:
                           break;
            }
  left = left + "px";
  top = top + "px";
  var oTile = new sap.m.StandardTile();
  //Layout: size of tiles
  // Height: 226px
  // Width: 194px
  // set the bindings of the tiles
  oTile.setTitle(ZSeatReservationUI5.util.Formatter.List(oContext.Attribute));
  oTile.setNumber(ZSeatReservationUI5.util.Formatter.SeatText(oContext.SeatID));
  oTile.setIcon(ZSeatReservationUI5.util.Formatter.UserUrl(oContext.UserId));
  oTile.setInfo(ZSeatReservationUI5.util.Formatter.StateText(oContext.State));
  oTile.setInfoState(ZSeatReservationUI5.util.Formatter.State(oContext.State));
  oTile.setNumberUnit(oContext.User);
  oTile.attachPress(this.handleSelectDialogPress);
  oAbsoluteLayout.addContent(oTile, {left: left, top: top});
       i++;
  }
},
,,,,,,




After this, the app looks like:

/wp-content/uploads/2014/05/2_447787.png

The tiles includes a press event, that triggers a reservation of the selected seat.

/wp-content/uploads/2014/05/3_447818.png

In addition I’m using the following ODATA structure:

/wp-content/uploads/2014/05/4_447819.png

I have also tested another way, the use a TileContainer control. The structure is very simple, I have created a container in my detail view.


<TileContainer xmlns="sap.m"
       id="idTileContainer"
       width="100%"
       height="100%"
       editable=""
       allowAdd=""
       tileMove=""
       tileDelete=""
       tileAdd="">
       <tiles>
      </tiles>
  </TileContainer>




The controller includes the same function as the first example, except of the loop. I tried to use a template and the “bindAggregation” function of the container.


var oTileContainer = localController.getView().byId("idTileContainer"); oTileContainer.setModel(model);
var oTileTemplate = new sap.m.StandardTile({
  title:"{Attribute}",
     number: "{path:'SeatID', formatter:'ZSeatReservationUI5.util.Formatter.Quantity'}",
     info: "{path: 'State', formatter:'ZSeatReservationUI5.util.Formatter.StateText'}",
     icon: "{path: 'UserId', formatter:'ZSeatReservationUI5.util.Formatter.UserUrl'}",
     infoState: "{path: 'State', formatter:'ZSeatReservationUI5.util.Formatter.State'}",
     numberUnit: "{User}"
  });
oTileContainer.bindAggregation("tiles", "/SeatSet", oTileTemplate);
oTileTemplate)




I ask myself the following question, why I couldn’t use the tiles and the tile container like a list control, for example, likes an objectlist with objectlistitems?

I also tried to create a tile container at the XML view . In the following I tried to bind the model, but I only get an empty page. I think the problem is, I didn’t define the aggregation like in a list control. (short example below)


<List id="lineItemList" items="{path:'SeatSet'}" mode="{device>/listMode}"
  select="handleSelectDialogPress" updateFinished="updateFinished"
  visible="true"
  headerText="{i18n>DETAIL_CAPTION} {path: 'RoomID', formatter: 'ZSeatReservationUI5.util.Formatter.Quantity'}">
  <items> …

The detail view contains this snippet.


<TileContainer xmlns="sap.m"
  id="idTileContainer"
  width="100%"
  height="100%"
  editable=""
  allowAdd=""
  tileMove=""
  tileDelete=""
  tileAdd="">
  <tiles>
       <StandardTile xmlns="sap.m"
            id="idTile"
            removable="true"
            title="{i18n>DETAIL_SEATNO} {path:'SeatID', formatter:'ZSeatReservationUI5.util.Formatter.Quantity'}"
            info="{path: 'State', formatter:'ZSeatReservationUI5.util.Formatter.StateText'}"
            icon="{path: 'UserId', formatter:'ZSeatReservationUI5.util.Formatter.UserUrl'}"
            activeIcon=""
            number="{UserId}"
            numberUnit=""
            infoState="{path: 'State', formatter:'ZSeatReservationUI5.util.Formatter.State'}"
            type="None"
            iconDensityAware="true"
            press="">
       </StandardTile>
  </TileContainer>

I hope I could give you a little insight into the use of tiles. If there are any suggestions or ideas for  an improvement of my app, bring it on.

Thanks.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Alexander Zulechner

    hi,

    so how do you call the function to create the tiles in the first example?

    in the init function? because you always have to refresh your detailpage after navigate to it? or is the function called after click on the master page?

    regards, Alex

    (0) 
    1. Remo Bettin Post author

      Hi Alexander,

      I used the “updateFinished” event of the list control to refresh and draw the tiles.

      view:

      <List id=”lineItemList” items=”{path:’SeatSet’}” mode=”{device>/listMode}”

        select=”handleSelectDialogPress” updateFinished=”updateFinished”

      controller:

      updateFinished: function(oControlEvent){

        if (deviceDesktop == true){

        var list = this.getView().byId(“lineItemList”);

        this.drawTiles(oControlEvent);

        }

      (0) 

Leave a Reply