Customize your simple Fiori App – Walkthrough – Adding Sliding News Tile XML View

Going through the SAP UI5 Developer Guide – Walkthrough.

From Step 6 – Modules , i have gained enough knowledge to deviate from the tutorial a bit and try experimenting with different UI5 Elements.

Up to this step, you should have the basic structure of your UI5 Application.

I am using SAP WEB IDE on the cloud as my development tool.

Step 1 : Create a new folder in your app structure called test-resources, create a sub folder inside this folder called tiles this folder will be used to store the background images for your tiles.

Step 2 : Upload your sliding news tile background images to the folder.(right-click on folder and select import).

NB : Approx size of the sliding tile is  374px x 174px

Step 3 : To add a sliding news tile (with static data). Add the following code to your App.view.xml View file. – Make sure the image name and path corresponds.

<SlideTile class=”sapUiSmallMargin”>

  <tiles>

  <GenericTile header=”Heading1″ backgroundImage=”test-resources/tiles/NewsImage1.jpg” frameType=”TwoByOne”>

  <tileContent>

  <TileContent footer=”New Notifications”>

  <content>

  <FeedContent contentText=”Notify Great outcome of the Presentation today. The new functionality and the design was well received. Berlin, Tokyo, Rome, Budapest, New York, Munich, London” subheader=”about 1 minute ago in Computer Market” value=”9″>

  </FeedContent>

  </content>

  </TileContent>

  </tileContent>

  </GenericTile>

  <GenericTile header=”Heading2″ backgroundImage=”test-resources/tiles/NewsImage2.jpg” frameType=”TwoByOne”>

  <tileContent>

  <TileContent footer=”New Notifications”>

  <content>

  <FeedContent contentText=”Notify Great outcome of the Presentation today. The new functionality and the design was well received. Berlin, Tokyo, Rome, Budapest.” subheader=”about 1 minute ago in Computer Cluster” value=”9999″>

  </FeedContent>

  </content>

  </TileContent>

  </tileContent>

  </GenericTile>

  </tiles>

  </SlideTile>

  <SlideTile class=”sapUiSmallMargin”>

  <tiles>

  <GenericTile backgroundImage=”test-resources/tiles/NewsImage2.jpg” frameType=”TwoByOne”>

  <tileContent>

  <TileContent footer=”August 21, 2013″>

  <content>

  <NewsContent contentText=”SAP Unveils Powerful New Player Comparison Tool Exclusively on NFL.com” subheader=”SAP News”>

  </NewsContent>

  </content>

  </TileContent>

  </tileContent>

  </GenericTile>

  <GenericTile backgroundImage=”test-resources/tiles/NewsImage1.jpg” frameType=”TwoByOne”>

  <tileContent>

  <TileContent footer=”August 21, 2013″>

  <content>

  <NewsContent contentText=”SAP Unveils Powerful New Player Comparison Tool Exclusively on NFL.com” subheader=”SAP News”>

  </NewsContent>

  </content>

  </TileContent>

  </tileContent>

  </GenericTile>

  </tiles>

  </SlideTile>

Step 4 : You should have your bootstrapping done on your index.html file according to Step 2 of the development guide.

Step 5 : Double click on your index.html file and run your application. – You will now see two Sliding News Tiles that scroll through the content and background images that you have specified.

You can also find an example of this in SAPUI5 Explored – Slide Tile.