cancel
Showing results for 
Search instead for 
Did you mean: 

sap.m.CustomTile didn't render under Tile Container

Former Member
0 Kudos

Hi,

Please share any sample code to achieve similar to StandardTile properties in Custom Tile.If possible please share in xml view.

I tried like below but custom tile didn't render.

<TileContainer id="tc1"width="100%" height="100%" editable=""allowAdd="" tileMove=""
tileDelete="" tileAdd="">
<tiles>
<CustomTile id="ct1" removable="true" press="">
<content>
<Text id="text10" text="Errors left to handle"textDirection="Inherit"
visible="true"wrapping="true" textAlign="Begin" width=""maxLines=""></Text>
</content> <!-- sap.ui.core.Control -->
        </CustomTile>
</tiles> <!-- sap.ui.core.Control -->

    </TileContainer>

Regards,

Koti Reddy

Accepted Solutions (1)

Accepted Solutions (1)

ChandraMahajan
Active Contributor
0 Kudos
Former Member
0 Kudos

Hi,

In your example , you used Standard Tile as Custom Tile Content. I want to define multiple layouts and multiple UI Elements in Custom Tile...Is it possible?

Regards,

Koti Reddy

ChandraMahajan
Active Contributor
0 Kudos

Hi,

Check this example of custom tile having multiple UI element in vertical layout JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;alternate&quot; type=&q...

Regards,

Chandra

Former Member
0 Kudos

Hi

The example which you given is working in JSBin but not working from my eclipse. I used below code but somehow Custom Tile is not rendering.

Please suggest me the sample code along with CSS Code as well.Please try from your eclipse/developer studio as well.

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

xmlns:c="sap.ui.commons" xmlns:l="sap.ui.layout" controllerName="zcustomtile.zcustomtile" xmlns:html="http://www.w3.org/1999/xhtml">

    <Page title="Title">

        <content>          

           <CustomTile class="sapMTile" id="id" removable="true" press="">

        <tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->

        <dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->

        <HBox>

        <content>

              <Text  id="id1" text="test1"     textDirection="Inherit"

    visible="true" wrapping="true"     textAlign="Begin"     width=""     maxLines="">

       

        <tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->

        <dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->

        </Text>

        </content> <!-- sap.ui.core.Control -->

        </HBox>

         </CustomTile>

        </content>

    </Page>

</core:View>

Regards,

Koti Reddy

ChandraMahajan
Active Contributor
Former Member
0 Kudos

Hi Koti Reddy,

Set Page property: enableScrolling="false"

Regards,

Trimurthulu.

Former Member
0 Kudos

I am not using any kind of Page property in my view.I think it may not be applicable.

Regards,

Koti Reddy

Former Member
0 Kudos

Hi Chandra,

As per your example , class= "sapMTile" was used for custom tile , please share CSS style related to that class which is useful to compare and use explicitely in my code as custom tile is not rendering may be due to library issue or CSS Class issue.

Regards,

Koti Reddy

Former Member
0 Kudos

Hi,

Used below CSS Code and able to render CustomTile

.sapMTile{border:1px solid #dddddd;display:inline-block;-webkit-transition-property:transform3d;-webkit-transition-duration:0.2s;-moz-transition-property:transform3d;-moz-transition-duration:0.2s;transition-property:transform3d;transition-duration:0.2s;width:11rem;height:7rem;margin:0.5rem;-webkit-touch-callout:none;background-color:#ffffff}

.sapMTile *{-webkit-user-select:none;-webkit-user-drag:none;-moz-user-select:-moz-none;-ms-user-select:none}

.sapMTCEditable .sapMTile{background-color:rgba(255,255,255,0.5)}html[data-sap-ui-browser='ie']

.sapMTile{transition-property:transform}

.sapMTile.sapMTileActive{background:#007cc0}.sap-phone

.sapMTile{width:11rem;height:7rem;margin:0.5rem}.sap-phone

.sapMTileContent{width:11rem;height:7rem}

.sapMTileContent{overflow:hidden;width:11rem;height:7rem}

.sapMTileDrag{opacity:0.8;z-index:10;-webkit-transition-property:none;-moz-transition-property:none;transition-property:none}

.sapMNavItemFlipping .sapMTile{opacity:0.01}.

Regards,

Koti Reddy

Answers (0)