SAP

Author

Jason Yang

Jason Yang

Jason Yang is the Product Owner in the SAC Analytics Designer development team with over 10+ years of experience in Business Analytics.

Keep in touch

Subscribe for the latest news, updates, tips and more delivered right to your inbox.

Subscribe to updates

Category

Learning

Connect with us

Using Analytics Designer you can not only build professional dashboards, but also sophisticated smart analytics applications that integrate with other applications either SAP applications or third-parties.

I would like to share with you an example about how to build an app that fully leverages the big screen, remotely controls interactions via mobile phone and triggers Search to Insights. Hope this could bring you some inspirations when you have similar use cases.

In the demo below, image you are sitting in a meeting room with big screens displaying the analytics app. You use your mobile phone to scan the QR code on the app to open the controlling page. Then interact with the controlling page on your mobile phone to remotely control the app on the big screen. Additionally, you can use the voice recognition to open the Search to Insight tool, a natural language query interface, on your big screen to obtain insights about your data in an instance.

After looking at the demo, do you wonder how to build it? Four major parts are involved:

Note: In this case, Sync Service (server.js) is deployed on my Node.js as https://server:4000

Part 1: Receiver.html

It is a HTML page that is embedded in the analytics app to generate the QR code and pass the command actions from the mobile phone to the host analytics app via PostMessage API.

It has two purposes:

Generate the QR Code for URL of controller.html

1. Connect to the Sync Service (server.js) to GET https://server:4000/connect to create a MQ channel and get channel UUID as token

2. Parse window.location to get:

remotePageUrl = window.location.protocol + “//” + window.location.host + “/” + “controller.html ” + “?token=” + token

3. [Optional] Shorten the remotePageUrl (e.g. use bitly.com)

4. Generate and Show QR Code by the (shortened) remotePageUrl (e.g. https://server:4000/controller.html?token=123456)

5. User scan QR code and open remotePageUrl (controller.html)

Read Command Actions and Pass them to the Host Analytics App

1. Every 1500ms GET https://server:4000/action?token=123456&random to read actions from the MQ channel by token (token is actually channel UUID)

2. If Actions are returned, window.top.postMessage(action.action + “:” + action.value, “<your SAC tenant>”);

Here we use the postMessage API. To learn more about this API, you could read my another blog: Typical Patterns and Samples of Integrating Analytics Designer

Part 2: Controller.html

It is a HTML page that runs on your mobile phone after you scan the QR code.

You can freely design the web page in the way that you would like the end user to interact with by referring to the contents in your app. For instance, switch the time periods, open and close the popups respectively for Gross Margin, Quantity Sold and Discount as we shown in our example below. You can also integrate with voice recognition service to generate the UI commands in a very natural way.

sample URL https://server:4000/controller.html?token=123456 

The HTML page will:

  1. Show Input Controls according to Application content design
  2. Parse window.location to get token
  3. When user triggers actions:
    POST https://server:4000/action
    {“token”: token, “actions”: [{“action”: “YOUR_ACTION_TYPE”, “value”: “YOUR_ACTION_VALUE”, “ts”: new Date().getTime()}]}

Part 3: Server.js

It is a Sync Service running on server for instance node.js to:

1.     1. Generate token for MQ channel

2. Receive commands from controller.html with route methods

3.      3. Pass the commands to the receiver.html with route methods

Here is a sample server.js that runs on the node.js. (you can copy and save it as server.js file)


var express = require('express');

var bodyParser = require(‘body-parser’);

var app = express();

app.use(bodyParser.json({

limit: ‘1mb’

}));

app.use(bodyParser.urlencoded({

extended: false

}));

app.use(express.static(__dirname + ‘/public’));

// {

// “”: [{

// “ts”: 1554113602367,

// “action”: “postKeyword”,

// “value”: “a, b, c”

// }]

// }

var connections = {};

app.get(‘/connect’, function(req, res, next) {

var token = “T-” + String(Math.random()).substring(2);

connections[token] = [];

res.json({

“token”: token

});

});

app.get(‘/action’, function(req, res, next) {

var token = req.query.token;

var keep = req.query.keep;

var actions = connections[token];

if (!keep) {

connections[token] = [];

}

res.json({

“actions”: actions

});

});

app.post(‘/action’, function(req, res, next) {

var token = req.body.token;

var actions = connections[token];

if (actions) {

connections[token] = actions.concat(req.body.actions);

actions = connections[token];

res.json({

“actions”: actions

});

} else {

res.json({

“error”: “token is not found”

});

}

});

app.use(‘/’, function(req, res, next) {

res.json({

“nodejs express”: new Date().getTime()

});

});

app.listen(process.env.PORT || 4000);

app.listen(process.env.PORT || 4000);

Part 4: Analytics application

In the Analytics application’s onPostMessageReceived event, it parses message to get cmd and perform cmd logic, like switch the time periods, open and close the popup for Gross Margin.


Application– onPostMessageReceived: function(message: string, origin: string) {

if (appInitialized) {

// parse message to get cmd and perform cmd logic

var actionPair = message.split(“:”);

if (actionPair.length === 2) {

var type = actionPair[0];

var value = actionPair[1];

if (type === “H_Time_Dropdown”) {

H_Time_Dropdown.setSelectedKey(value);

InputHandlers.H_Time_Dropdown_onSelect();

}

}

}

}

In release 2019.13, Search to Insights API is delivered in Analytics Designer. Search to Insight is a natural language query interface to answer and delve deep into business questions. Users can directly ask questions from the mobile phone via the voice recognition such as Show Taxes for all Regions, sales higher than 300 dollars, Show top five Texas and Utah Sales by Priority and Quarter.

(Note: release 2019.13 is only necessary for the conversational AI (smart insight) part. With current GA version of Analytics Designer you should already be able to build some interesting scenarios. In general, the pattern of this sample app is about the device (phone, iPad) generates the commands, then the application interprets and executes the commands. In other words, any commands can be interpreted and executed are ok. For instance, which is not implemented in the sample app yet, from the phone you could use an input field or slider to enter the planning quota to do the simulation. This does not require features in release 2019.13.)

API to use the Search to Insights in Analytics Designer:

//Open the Search to Insights dialog with your questions

SearchToInsight_1.openDialog(question, SearchToInsightDialogMode.Simple, false, true)

Summary

It might seem that you need to spare some efforts to create the receiver.html, controller.html and service.js. But once done, you will have a scenario that combines big screen, smart phone, and Search to Insights together. Human machine interaction becomes simpler and more natural. Communication can be more collaborative and efficient, and analytics becomes more flexible and intelligent.

Enjoy your exploration with Analytics Designer!

SAP Analytics Cloud earns a top ranking from BARC

See how SAP Analytics Cloud performed in the world’s largest survey of Business Intelligence software users.