Dear all,
After working the DesignStudio space for two years now, I got the chance to look into some Fiori topics lately. As a result I would like to share a Fiori component with you today, which enables you to render arbitrary UI5 content on a custom Fiori tile and ultimately tie that to any web service there is on the web.
For my examples I used the Yahoo finance API to get live market data. Yahoo offers extensive market data through a SQL based interface, which they call YQL (Yahoo Query Language).
UPDATE: Unfortunately Yahoo stopped the service after 9 years in late 2017 claiming it is violating their terms of services. I am currently migrating my code examples to iextrading instead.
Fig.1: Example usage of YQL with my custom tiles in combination with UI5 NumberContent MicroCharts and others
Generally speaking my custom tile type extends the standard Fiori dynamic tile exposing its content to the tile configuration screen. In order to be able to consume web services which are not within your domain I configured the AJAX calls to use jsonp.
You can add any UI5 content that fits the tile's space. Just browse SAPUI5 explored and check the underlying XML-View code. Wrap that XML-snippet in a UI5 fragment-tag defining the necessary namespaces (e.g xmlns="sap.suite.ui.microchart") and you are good to go.
The service callback is added to a JSONModel so that you can use UI5 templates to feed the values into your custom tile dynamically during runtime. All examples used on the website use the yahoo finance API but you are not limited to that.
The custom tile ships with two shapes. The standard tile, which is a square (1x1) and the second option, which is a wide rectangle (2x1). For the latter you also get to choose if you want two columns for your visuals or one wide one. The tiles adapt slightly on mobile devices in total size to save space.
Fig.1: Another two by one tile example with YQL showing a wide chart
To finally use my component in your system, you need to register it as a "chip". Directions on how to do this can be found on my GitHub page or on the link mentioned before.
According to the SAP Fiori community you can achieve a similar solution as of HANA SP09 with the standard Custom App Launcher tile type. However my solution does not involve programming object deployment or a HANA platform at all. Reading from external source due to the lack of jsonp would also be a problem with the custom app launcher.
So if you want to keep it simple, be as flexible on how you visualize web service data as possible and read data from where ever you want to, my tile type is the way to go.
Check out my GitHub page for installation hints and further documentation especially regarding the possible configurations.
Also I would like to thank David Garcia for lending me one of his many hands to get this up and running in no time. You are the best David!
As usual feel free to leave comments and ask lots of follow up questions.
Yours
Martin
The following links could also be of interest to you:
My custom tile was inspired by this GitHub project.
After working the DesignStudio space for two years now, I got the chance to look into some Fiori topics lately. As a result I would like to share a Fiori component with you today, which enables you to render arbitrary UI5 content on a custom Fiori tile and ultimately tie that to any web service there is on the web.
For my examples I used the Yahoo finance API to get live market data. Yahoo offers extensive market data through a SQL based interface, which they call YQL (Yahoo Query Language).
UPDATE: Unfortunately Yahoo stopped the service after 9 years in late 2017 claiming it is violating their terms of services. I am currently migrating my code examples to iextrading instead.
Fig.1: Example usage of YQL with my custom tiles in combination with UI5 NumberContent MicroCharts and others
Generally speaking my custom tile type extends the standard Fiori dynamic tile exposing its content to the tile configuration screen. In order to be able to consume web services which are not within your domain I configured the AJAX calls to use jsonp.
You can add any UI5 content that fits the tile's space. Just browse SAPUI5 explored and check the underlying XML-View code. Wrap that XML-snippet in a UI5 fragment-tag defining the necessary namespaces (e.g xmlns="sap.suite.ui.microchart") and you are good to go.
The service callback is added to a JSONModel so that you can use UI5 templates to feed the values into your custom tile dynamically during runtime. All examples used on the website use the yahoo finance API but you are not limited to that.
The custom tile ships with two shapes. The standard tile, which is a square (1x1) and the second option, which is a wide rectangle (2x1). For the latter you also get to choose if you want two columns for your visuals or one wide one. The tiles adapt slightly on mobile devices in total size to save space.
Fig.1: Another two by one tile example with YQL showing a wide chart
To finally use my component in your system, you need to register it as a "chip". Directions on how to do this can be found on my GitHub page or on the link mentioned before.
According to the SAP Fiori community you can achieve a similar solution as of HANA SP09 with the standard Custom App Launcher tile type. However my solution does not involve programming object deployment or a HANA platform at all. Reading from external source due to the lack of jsonp would also be a problem with the custom app launcher.
So if you want to keep it simple, be as flexible on how you visualize web service data as possible and read data from where ever you want to, my tile type is the way to go.
Check out my GitHub page for installation hints and further documentation especially regarding the possible configurations.
Also I would like to thank David Garcia for lending me one of his many hands to get this up and running in no time. You are the best David!
As usual feel free to leave comments and ask lots of follow up questions.
Yours
Martin
The following links could also be of interest to you:
- https://blogs.sap.com/2017/01/28/how-to-create-custom-tile-types-for-onpremise-fiori-launchpad/
- https://blogs.sap.com/2016/08/23/create-and-use-custom-tile-type/
- https://help.sap.com/saphelp_nw74/helpdata/en/3f/f37eb5e28a4da5b5b152b036776c98/content.htm
My custom tile was inspired by this GitHub project.
- SAP Managed Tags:
14 Comments
