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).
Creating a News Tile to display RSS feeds is described in this blog:
FIORI Launchpad in SAP HCP - news tiles and cross origin policy error
Creating a Mobile Docs Tile to display and access your documents is described in this blog:
Creating an SAP Mobile Documents Tile in SAP Fiori Launchpad on Cloud
4) Configuring a Dynamic Tile
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.
| Explanation | Screen Shot |
|---|---|
Create a new App Tile
|
|
In the Navigation screen
|  |
In the Tile screen
Northwind.svc/Employees/$count Is the URL of an OData query from which data should be read. The format of the URL is as follows: /<fiori proxy>/<application id>/destinations/<destination name>/<path to OData service>/<OData collection>/<query string>
|  |
In the Assignment screen
The new Tile should now be available on your launchpad Site |  |
Preview the Fiori launchpad Site
|  |
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 |
|---|---|
| |
Import the code into your Web IDE employees project
|  |
| Your employees project should have the following file structure |  |
Commit the new files to the Git Repository
|  |
Create a new application version and activate it
|
|
Now that we deployed and published the latest version of our application we can go back and create the tile.
| Explanation | Screen Shot |
|---|---|
Create a new App Tile
|  |
In the Navigation screen - Same as in Part 4.
| |
In the Tile screen
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)
|  |
In the Assignment screen - Same as in Part 4.
The new Tile should now be available on your launchpad Site | |
Preview the Fiori launchpad Site
|  |
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 the Overview 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.
 |
|
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):
onPress: function(){
var view = this.getView(),
oViewData = view.getViewData(),
navTargetUrl = oViewData.properties && oViewData.properties.navigation_target_url;
if (navTargetUrl) {
if (navTargetUrl[0] === '#'){
hasher.setHash(navTargetUrl);
}
else{
window.open(navTargetUrl, '_blank');
}
}
}
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.
- SAP Managed Tags:
17 Comments
