In the first part of this blog we focused on generating a business application using the SAP Web IDE. Our application displays business data retrieved from the public OData Northwind service. Then we deployed the application to our HANA Cloud Platform account , registered it to our newly created Fiori Launchpad Site and created a Static Tile for it.

In the 2nd part of this blog we will see how to create Dynamic and Custom Launch Tiles for our employees application (section 4 and 5) and dive into some of the implementation details related to the custom tile (section 6).

Dynamic app launcher tiles can display a KPI number retrieved by an OData services. The tile has a configurable refresh interval for fetching new data. In this part we will create an additional (dynamic) tile for the employees application showing the number of employees.

Refresh Interval: 6000Is the Number of seconds after which dynamic content is reloaded from the data source and the display is refreshed

3. Click Next

In the Assignment screen

Assign your application to the Northwind Tile Group you created earlier

Assign your application to the Northwind Content Package you created earlier.

Click Finish

The new Tile should now be available on your launchpad Site

Preview the Fiori launchpad Site

Go back to the launchpad site

Refresh the browser

Notice the new Tile Group Northwind added to your launchpad with the new Dynamic Tile in it displaying the KPI (number of employees) defined by the OData query

5) Developing a Custom Tile

Custom tiles can display any content that you define in an SAPUI5 view. This means that we can add additional Views (and Controllers) to our lightweight applications for the sake of creating custom tiles or deploy them as part of a separate dedicated application.

For that sake of this exercise, we already implemented the code required for the custom tile. It uses the same Northwind OData service we used for the employees app itself, this time displaying a kind of a business card teaser that switches between each of the available employees in a timed interval:

You will need to download the source code (attached below), import it to your SP Web IDE project, commit the changes to the dedicated git repository and create the new tile.

Explanation

Screen Shot

Download the 3 files attached at the end of this blogFormatter.js.txt.zip, Tile.controller.js.txt.zip, Tile.view.xml.txt.zip

Rename the files to: Formatter.js, Tile.controller.js, Tile.view.xml

Import the code into your Web IDE employees project

Expand the employees root folder

Right click on the view folder

Select Import > From File System

From the Import dialog box click Browse…

Select theTile.controller.js file

Click OK

Import Tile.view.xmlinto theview folder

Import Formatter.jsinto the util folder

Your employees project should have the following file structure

Commit the new files to the Git Repository

Select the employees root project folder

Open the Git Pane from the right side panel.

Click the Stage All check box. The 3 new files should all be staged for commit

Custom Properties, are a key-value pair that can be used in the tile’s source code. We use them in our implementation to set the tile’s header text. (See part 6 for more information)

click Add to to add an additional Key-Value pair

Insert the following (case sensitive)

Key: titleText

Value: Colleagues you may know….

Click Next

In the Assignment screen – Same as in Part 4.

Assign your application to the Northwind Tile Group you created earlier

Assign your application to the Northwind Content Package you created earlier.

Click Finish

The new Tile should now be available on your launchpad Site

Preview the Fiori launchpad Site

Go back to the Launchpad site

Refresh the browser

Notice the new Custom Tile was added to the Northwind Tile Group

6) Pointers for Implementing a Custom Tile

As we mentioned earlier a custom tile is basically a small application based on an SAPUI5 View and its corresponding Controller. Inthis section we will focus on some of the technical aspects of implementing one. You may want to take a look at our implementation for the Employees custom tile in the attached files you imported into your Web IDE:

employees.view.Tile.view.xml

employees.view.Tile.controller.js

a. Tile Content

the SAPUI5 library comes with several Tile implementations that are pretty easy and intuitive to use. In SAPUI5 Explore you can view the APIs, run some samples and view the code. You can use the Standard Tile or theOverview Tile. For the Employees custom tile we used the Generic Tile.

Another option is to use the Custom Tile which enables you to determine the tiles structure by using any SAPUI5 controls or standard HTML tags within the tile’s content tag:

<CustomTile xmlns=”sap.m”

id=”customTile”

class=”customTileStyle”

press=”onPress”>

<content>

<html:div class=”container” >

<html:div class=”title_tile_home” id=”titleDiv” >

XXX TITLE

</html:div>

<html:div class=”info_text_tile” id=”descriptionDiv”>

<html:div class=”counter_home” id=”counterDiv”>6 </html:div>

xxx description xxxx

</html:div>

</html:div>

</content>

</CustomTile>

b. Passing Parameters to the Tile

When we configured the Employees custom tile in section 5 we added a Custom Property (Key-Value pair). The cutome properties (and their values) are passed to the tile so we can make use of them in our code if we dont want to hardcode specific values (and leave them for the administrator to configure) or if we would like to reuse the tile and make it more generic.

To access the custom property titleText we configured in section 5 in our *.Controller.js:

var view = this.getView();

var oViewData = view.getViewData();

var titleTextValue = oViewData.properties.titleText;

c. Using Resources

In case you’d like to use additional resources (like image files) in your custom tile you need to include them in your application. In addition, in order to integrate your app into the Fiori Launchpad Site, you will need to modify the URLs youre using to reference these resources and add the module path prefix:

jQuery.sap.getModulePath(“< app id >”)

For instance, lets say we want to use an image ae.jpg to our custom tile.

Create a new img folder under the project root folder

Upload the image resource ae.jpg into it

The reference to use while developing and previewing the application in the Web IDE:“employees/img/ae.jpg”

The reference we would use for Fiori Launchpad integration:jQuery.sap.getModulePath(“employees”) + “/img/ae.jpg“

d. Launching the Application

When developing a custom tile, you are also responsible for implementing the tile’s behavior upon a click / press event.

Generally, tiles usually launch the associated application upon a user press event, however tiles can also be used as standalone mini apps (such as an image gallery) that dont launch any application.

In order to launch the application associated with your custom tile upon press implement the following:

1. In the SAPUI5 View (take a look at the attached Tile.view.xml file) – declare a handler for your tile’s press event

<GenericTile

id=”genericTile”

class=”tile”

size=”M”

frameType=”TwoByOne”

press=”onPress”>

</GenericTile>

2. Implement the handler in the corresponding Controller (take a look at the attached Tile.controller.js file):

The Launchpad navigation framework provides the hasher object for launching applications with a hashed URL. The URL is available in the ViewData object that we used in (part b) for accessing our Custom Tile Properties and contains the tile’s own configuration properties. The URL is stored under a property named navigation_target_url.

If the URL is hashed the application is launched within the Launchpad, otherwise it is opened in a new browser window.

Destinations are a way for applications to access external services (e.g. OData). You cannot access data through destinations directly from the portal – only through an application that is deployed on your account.

if I can’t use destinations in protal, how to set service url in dynanmic tile ? Just copy and paste the remote service URL? Why they always add ‘/sap/fiori/(project name)‘ in front of URL which directed to 404 ?

Just to make clear, you CAN use destinations if they are managed by applications.

For example, an application shows your open orders, and the application is using a destination to get the orders data from a backend system. You can then create a tile that shows the number of open orders (or any other data from that destination) by using the same URL that the application itself uses to get the data.

Using the direct URL of the remote service might not work due to browser cross-origin security constraints. The usage of /sap/fiori/application-name is used exactly for this purpose – it tunnels requests to deployed applications through the base URL of the portal, making sure that requests are not blocked by cross-origin limitations.

Guy Roth

SAP HANA Cloud Platform, Portal Service

If you find this answer useful or correct, please mark it accordingly for the benefit of other members.