Tile Container for GenericTile (NOT StandardTile)

[Former Member]

Ladies and Gentlemen,

one thing keeps bothering me. For sap.m.StandardTile we have the brilliant sap.m.TileContainer, but I won't find anything similar for the sap.suite.ui.commons.GenericTile. Basically I'm looking for a control that contains the GenericTiles and will resize & center them automatically, depending on the device.

Can anyone help?

Thank you so much in advance,

Steffen

[Former Member]

Hi Guys,

I want code two section with three generic tiles in each on same page.

Section 1:(title)

tile1 tile2 tile3

Section 2:(title)

tile1 tile2 tile3

I tried to code in two panel but all generic tiles goes in panel 1.

my view.js code for your reference.

jQuery.sap.includeStyleSheet("mysecondapp/myStyle.css");

sap.ui.jsview("mysecondapp.myFirstPage", {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

  * @memberOf mysecondapp.myFirstPage

  */

  getControllerName : function() {

  return "mysecondapp.myFirstPage";

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf mysecondapp.myFirstPage

  */

  createContent : function(oController) {

  //Create a panel instance

  var oPanel = new sap.ui.commons.Panel({expandable:false});

  //Set the title of the panel

  oPanel.setTitle(new sap.ui.core.Title({text: "Our Services"}));

  //Tile Section

  var projectProcessTile1 = new sap.suite.ui.commons.GenericTile("pprocessTile1", {

   header: "Project Processes",

   subheader: "Delayed Stage Approvals",

   size: "M",

   frameType: "OneByOne"

   });

  var projectProcessTile2 = new sap.suite.ui.commons.GenericTile("pprocessTile2", {

   header: "Project Processes",

   subheader: "Delayed Stage Approvals",

   size: "M",

   frameType: "OneByOne"

   });

  var projectProcessTile3 = new sap.suite.ui.commons.GenericTile("pprocessTile3", {

   header: "Project Processes",

   subheader: "Delayed Stage Approvals",

   size: "M",

   frameType: "OneByOne"

   });

  var projectProcessTile4 = new sap.suite.ui.commons.GenericTile("pprocessTile4", {

   header: "Project Processes",

   subheader: "Delayed Stage Approvals",

   size: "M",

   frameType: "OneByOne"

   });

  //Add the form to the panels content area

  oPanel.addContent(projectProcessTile1);

  oPanel.addContent(projectProcessTile2);

  oPanel.addContent(projectProcessTile3);

  oPanel.addContent(projectProcessTile4);

  //Second Panel

  //Create a panel instance

  var oPanel1 = new sap.ui.commons.Panel({expandable:false});

  //Set the title of the panel

  oPanel1.setTitle(new sap.ui.core.Title({text: "Our Services"}));

  //Tile Section

  var projectProcessTile5 = new sap.suite.ui.commons.GenericTile("pprocessTile5", {

   header: "Project Processes",

   subheader: "Delayed Stage Approvals",

   size: "M",

   frameType: "OneByOne"

   });

  var projectProcessTile6 = new sap.suite.ui.commons.GenericTile("pprocessTile6", {

   header: "Project Processes",

   subheader: "Delayed Stage Approvals",

   size: "M",

   frameType: "OneByOne"

   });

  var projectProcessTile7 = new sap.suite.ui.commons.GenericTile("pprocessTile7", {

   header: "Project Processes",

   subheader: "Delayed Stage Approvals",

   size: "M",

   frameType: "OneByOne"

   });

  var projectProcessTile8 = new sap.suite.ui.commons.GenericTile("pprocessTile8", {

   header: "Project Processes",

   subheader: "Delayed Stage Approvals",

   size: "M",

   frameType: "OneByOne"

   });

  //Add the form to the panels content area

  oPanel.addContent(projectProcessTile5);

  oPanel.addContent(projectProcessTile6);

  oPanel.addContent(projectProcessTile7);

  oPanel.addContent(projectProcessTile8);

  var page = new sap.m.Page({

  title: "Title",

  content: [

           oPanel, oPanel1       

  ]

  });

  return  page;

  }

});

Regards,

Dhiraj

[Former Member]

Hi Dhiraj,

this is happening because you actually do insert all your tiles in the first Panel.

//Add the form to the panels content area

  oPanel.addContent(projectProcessTile5);

  oPanel.addContent(projectProcessTile6);

  oPanel.addContent(projectProcessTile7);

  oPanel.addContent(projectProcessTile8);

should be

//Add the form to the panels content area

  oPanel1.addContent(projectProcessTile5);

  oPanel1.addContent(projectProcessTile6);

  oPanel1.addContent(projectProcessTile7);

  oPanel1.addContent(projectProcessTile8);

because you named your second Panel "oPanel1". May I suggest different names like oPanel1 and oPanel2 for the next time?

Besides I am glad to help you, but I am not sure if this thread is the right place to ask. Please open you own thread for your next question.

[Former Member]

Hi Steffen,

I found a way to display generic Tiles in a TileContainer. I created a normal TileContainer and inserted CustomTiles. Then I created a Style Class for the CustomTiles so they look like a GenericTile:

      .myCustomTile {
         width: 23.5rem;
         height: 11rem;
         border: 1px solid #dddddd;
        border-radius: 2px;
         box-shadow: 0 1px 3px rgba(0,0,0,0.15);
        background-color: #ffffff;
         margin: 0.5rem;
      }

Then I added that StyleClass to the CustomTiles and after that I created a GenericTile in the content aggregation of the CustomTile like this:

<CustomTile class="myCustomTile">
  <content>
  <suite:GenericTile 
     size="M" 
     frameType="TwoByOne"
     press="press"
     backgroundImage="data/NewsImage1.png">
     <suite:tileContent>
       <suite:TileContent footer="August 21, 2013" size="M">
         <suite:content>
           <suite:NewsContent 
             size="M" 
             contentText="SAP Unveils Powerful New Player Comparison Tool Exclusively on NFL.com" 
             subheader="SAP News">
           </suite:NewsContent>
         </suite:content>
       </suite:TileContent>
     </suite:tileContent>
   </suite:GenericTile>
  </content>
  </CustomTile>

Thats all I had to do for now. Of course I have to watch the behaviour of the TileContainer with this big Tiles but at least it is possible to display GenericTiles in a TileContainer.

[former_member183062]

Nils great solution. One suggestion

Use standard tile class 'sapMTile' instead of custom CSS class.

Kudos!

[Former Member]

Hi ,

It's been a while since January but   :

Did you succeed to use both "two by one" any "one by one" tiles in the container ?

It seems the two sizes conflicts because if you insert "two by one" near "one by one" the first one

override the second.

What about the container drag and drop functionality ? Did you encounter any problems ?

Thanks,

Arie.

[former_member183062]

Sorry! we did not used 2x1 neither did we implemented drag and drop.