Skip to Content
avatar image
Former Member

Tile Container for GenericTile (NOT StandardTile)

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • avatar image
    Former Member
    Feb 13, 2015 at 10:00 AM

    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.


    generic.PNG (172.4 kB)
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Dec 02, 2015 at 07:54 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • 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. 😊