Former Member

April 29, 2015 5 minute read

SAP BEx Query to Fiori App – From ASUG MN 2015

Fiori is great, but how do you get started?

In this blog I share how anyone can take the incredible amount of data in SAP BW and bring it directly into SAP Fiori to enable instant mobile reports. Last week, I was honored to present at the ASUG Minnesota Chapter Meeting on this topic. The session started many great conversations, and I wanted to share those discussions with the larger community. I’ve tried to capture the comments in this blog, but as always, please feel free to contact us if you have any questions.

Learning Points:

Fiori is the new UX for SAP
S/4 HANA & Fact Sheets are awesome
Make any BEx Query a Fiori App in a few steps today

Avoid being the next Avon:

Before we start, Avon is a great example that I regularly use in discussions with Fiori customers. It shows how a seemingly perfectly executed SAP project can go horribly wrong when design is not truly considered from the beginning. In 2013, Avon was forced to cancel the roll out of their new order system because of a “steep drop in representatives.” It seems the system “works as designed” but wasn’t designed to work– usability was the reason. Avon’s workforce would rather quit than use the system. After a $125M write-down, and a cancelled roll-out, Dec 11, 2013 – WS J, we can see why usability is so very important to consider.

Let’s make this happen:

Now let’s consider the steps required to convert any BEx query into a Fiori app. To summarize:

Fiori & Launchpad
Architecture
Turn a BEx query into a Gateway service
Make a Fiori Chart from that service
Turn it into a mobile app

Fiori Launchpad:

Role-based navigation – similar to SAP Portal.
Dynamic tiles – KPI’s and other good info all in one place.
Catalogs – loads of content available.
Deep-linking – send a link for a particular view of a single item to a friend.
Jump-to links – navigate from app to app.
HANA Search (next slide)

HANA Search:

Imagine a Google-like search to navigate to anything in SAP
Search apps and any object from Fiori
Fact Sheets are extremely powerful. See my other blog: Getting (SAP Fiori) Fact Sheets Right

Fact Sheets:

HANA only
KPI’s
Jump-to other fact sheets
Fiori Transactions can be launched
SAPGUI traditional style can be launched too

Architecture:

Fiori Client
Netweaver Gateway (on ABAP)
BW needs IW_BEP installed (default after 7.4)

Convert BEx Query to ODATA

BEx Query Designer – Enable Easy Query Option (Also works with MDX, but more difficult)

Shout-out:

This blog series by Chandan is great:Transform SAP BW Queries into OData Service: Part 1 – Generation and Activation

Try out the BEx Query in Analyzer to get comfortable with the data. We will pull in order value by month and descend the last twelve months.

You can also preview in transaction EQMANAGER.

In BW, go to t-code SEGW.
Create a new project.
Right-click on Data Model and select Redefine a BW Data Source.
Choose Controller for Easy Query.
Choose your Query from the picker.

Accept all entities.
Accept all associations (this is how ODATA will do navigation and F4-style lookups).
Generate the project.

Create a new service in the Gateway HUB with this model in transaction: /IWFND/MAINT_SERVICE
Activate and test the service.
Pull up the $metadata by appending it to the URL.

Use ODATA standard notation to setup a query URL: /sap/opu/odata/sap/ZGQ_BW_1_SRV/ZSD_C03_Q100Results?$select=A0CALMONTH,A0NE7PB7ADBFJXU0B6OB8636XO&$top=12&$orderby=A0CALMONTH%20desc&$skip=4

Translated:

Get the result set
Select dimension month
Select measure A0NE…(from $metadata that maps to sales)
Grab the top 12 and sort in descending order
Skip 4 for ASUG demo purposes…

Make a Chart in Fiori – Step 1

Now that we have ODATA, we can bind it to SAPUI5 in Fiori

Check out the chart types you may want: https://sapui5.hana.ondemand.com/sdk/explored.html#/entity/sap.viz.ui5.controls.VizFrame/samples

Make a Fiori Chart – Step 2

Create a new SAPUI5 Mobile Project in Web IDE or Eclipse with:

Index.html
Component.js
demo_chart2.view.xml
demo_chart2.controller.js

I shared the code here:https://github.com/MindsetConsulting/asug_bex_query_fiori_demo

Publish to Gateway:

Or launch from SAP Fiori Client:

Click the tile:

And see the view:

Key Learnings:

Fiori is the new SAP User Experience
Get started now bringing BW data to Fiori
Enable BW with Easy Query
Use more advanced MDX if necessary
OData makes it easy to consume data

Designing the Enterprise:

As you know, SAP is great, but it needs our help to make it simple, mobile, and beautiful. With a tool like Fiori, we’re able to make the software we use every day better for the companies we work for. I hope this blog helps you to begin turning your BEx Queries into Fiori apps.

And finally, I hope to see many of you next week at SAPPHIRE NOW. We’ll put up a more formal post soon, but if you’ll be there, here are the places you can find us:

Panel presentation (ASUG): SAP QM + Fiori, PL1287 (Wed 5/6 4:15 PM S310A)
Internet of Things booth: SmartWatch Beacons with SAP PM, PT20267(Digital with API), LB20588 (Explore Innovations in Asset Management), andLB206 EAM station, with a video at PT421, HANA Cloud Demos.
Fiori / User Experience booth: Google extensions for Fiori

7 Comments

You must be Logged on to comment or reply to a post.

Jeremy Good

May 1, 2015 at 3:15 am

Thanks Gavin - have a great Sapphire!

Tejas Chouhan

May 1, 2015 at 3:47 am

Very helpful 🙂

Masayuki Sekihara

May 8, 2015 at 5:37 am

Wow 😎 . Easy Query+OData+WebIDE+Fiori bring a nice solution.

Former Member

January 22, 2016 at 1:41 pm

Hi Gavin,

I have a question about BW on Fiori without HANA.

I wan to display our bo reports ( dashboard, design studio, webi, lumira) on fiori launchpad. And also I want to create bex query on fiori too.

Is it possible without Hana, only use ECC, BW?

Thank you.

Former Member

January 8, 2017 at 5:07 am

Hi Gavin,

Is HANA Mandatory for this FIORI App?

Regards-
Shashank

Dinesh Durai Raj A

September 11, 2017 at 2:50 pm

Hi Shashank,

You can convert bex queries into FIORI custom tile.

Please refer the below link:

https://blogs.sap.com/2015/06/20/how-to-configure-a-bw-bex-query-in-a-custom-fiori-tile/

Regards,

Dinesh.

Arpan Gupta

October 25, 2017 at 11:54 am

Hi Gavin,

I am very new to Fiori.

I am able to generate a simple fiori chart with JSON data defined inside my View1.controller.js. But the problem is when I am trying to connect to my Bex query, I am unable to do so.

I have 3 items basically

Index.html
XML view
Controller for XML view

Index.html looks like

<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta charset="UTF-8">

		<title>helloworld6</title>

		<script id="sap-ui-bootstrap"
			src="../../resources/sap-ui-core.js"
			data-sap-ui-libs="sap.m"
			data-sap-ui-theme="sap_belize"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-resourceroots='{"helloworld6": ""}'>
		</script>

		<link rel="stylesheet" type="text/css" href="css/style.css">

			<script>
			sap.ui.getCore().attachInit(function() {
			sap.ui.xmlview({
				viewName : "helloworld6.view.View1"
			}).placeAt("content");
			});
		</script>
	</head>

	<body class="sapUiBody" id="content">
	</body>

</html>

XML view look like

<mvc:View controllerName="helloworld6.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
  xmlns:viz="sap.viz.ui5.controls" 
 xmlns="sap.m">
<Toolbar>
	<ToolbarSpacer/>
<Title text="SEPOS APP"/>
	<ToolbarSpacer/>
 <Button icon="sap-icon://action" press="onPress" ariaLabelledBy="actionButtonLabel"/>	
</Toolbar>
	<viz:VizFrame xmlns="sap.viz" id="idcolumn" width="100%">
		</viz:VizFrame>	
</mvc:View>

And the View1.controller.js looks like

sap.ui.define([
	"sap/m/MessageToast","sap/ui/core/mvc/Controller"
], function(MessageToast,Controller) {
	"use strict";
	var PageController = Controller.extend("helloworld6.controller.View1",{
		
	onInit: function(){
		//                1.Get the id of the VizFrame
	var oVizFrame = this.getView().byId("idcolumn");


	var oDataSetBex = new sap.viz.ui5.data.FlattenedDataset({
		'dimensions' : [{
			'name' : 'Month and Year',
			'value': "{A0CALWEEK}"
		}],
		'measures':[{
			'name':'Sales',
			'value':'{A00O2TPJXEBUT4F4UBQXI2U4EQ}'
		}],
		'data': {
			'path':"/OE_SD_FIORI_APPResults?$select=A0CALWEEK,A00O2TPJXEBUT4F4UBQXI2U4EQ&$top=3"
		}
	});
var feedPrimaryValues4 = new sap.viz.ui5.controls.common.feeds.FeedItem({
	      'uid' : "primaryValues",
	      'type' : "Measure",
	      'values' : [ "Sales" ]
	    });
var feedAxisLabels4 = new sap.viz.ui5.controls.common.feeds.FeedItem({
	      'uid' : "axisLabels",
	      'type' : "Dimension",
	      'values' :  ["Month and Year"]
	    });
oVizFrame.setDataSet(oDataSetBex);
var oDataBExModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/sap/ZODSP_SEPOS_DATA_SRV/");
oVizFrame.setModel(oDataBExModel);
oVizFrame.addFeed(feedPrimaryValues4);
oVizFrame.addFeed(feedAxisLabels4);
oVizFrame.setVizType('bar');
},
onPress:function(){
	MessageToast.show("Button Pressed");
}
});
return PageController;
});

Am I missing something? Any help is appreciated.

Regards,

Arpan

SAP BEx Query to Fiori App – From ASUG MN 2015

Assigned Tags