Calling a transaction by clicking a chart on a flavor

[cristin_charbonneau]

Good morning.

I have built a series of charts using HTMLViewers that are populated using HTML and javascript during the onLoad event of my flavor. I would like to expand the functionality to include an action when the user clicks on the chart or an area of the chart. Ideally, I would like to call a transaction, pass some variables to the selection screen, and execute the search.

I have successfully wrapped an "a href" around the chart that will call a function to display an alert when clicked. When I add a "session.startTransaction" to the function nothing happens.

Does anyone have experience adding functionality to charts on flavors that allow the user to interact with the chart?

I'm including a sample of my code for a pie chart.

chartsimage.jpg

chartcode.txt

Kind regards,

Cristin

[kmagons]

Hi Cristin,

The short answer is that, yes, it is possible to integrate SAPUI5 components with SAP Screen Personas flavors, however, it would require some custom development that depends on the rendering engine that you are using.

Some prerequisites:

• The SAPUI5 chart application is designed in a way that follow the SAPUI5 best practices - has the manifest.json and Component.js file, MVC pattern, etc...
• An Interface has been defined to interact with the SAPUI5 app from other applications, for example through the means of component services.
• The SAPUI5 chart application is deployed on the SAP Back-end system SAPUI5 ABAP repository

SAP GUI for HTML (Web GUI)

WebGUI doesn't have the SAPUI5 runtime dependency therefore for your Chart component to work you would need to load the library along with the component assets. GuiHtmlViewer is the best option that embeds your chart component along with dependencies in WebGUI using an inline frame.

To exchange information between the host application (Web GUI) and your Chart (SAPUI5 component) through the inline frame, Cross Origin Resource Sharing (CORS) requirements have to be fulfilled: domain origins for the host app should match the origin of the embedded app or you would need to setup an HTML5 postMessage API based communication

You would need to write an SAP Screen Personas script that acts as an adapter and consumes the SAPUI5 component API

Slipstream Engine (SE)

SE technically is an SAP Fiori SAPUI5 application and allows you can embed other SAPUI5 components in a single page application setting without the need of using GuiHtmlViewer and loading additional dependencies. Use the SAP Screen Personas scripting engine to dynamically load and attach your Chart application to the Slipstream Engine DOM structure. Here is a simple code example for inspiration 🙂

Loading of the component (an onLoad script):

var sComponentName = "iw29mobiletable";
var sComponentURL = "/sap/bc/ui5_ui5/sap/z_iw29_table";
var sComponentInstanceId = session.utils.get("UI5_APPLET_ID");


if(sComponentInstanceId){
	//No need to load the component instance, if it is already loaded
	return;
}


sap.ui.core.Component.load({
	name: sComponentName,
	url: sComponentURL
}).then(function(oComponent) {
	sComponentInstanceId = oComponent().sId;
	//Attach Table Selection Handler 
	oComponent().getService("SelectionService").attachSelect(function(oEvent){
		session.utils.put("SELECTED_NOTIFICATION", oEvent.getParameter("id"));
		//Call the script that handles the SAPUI5 Fiori table selection event
		session.utils.executeScriptAsync("wnd[0]/scrptPersonas_0050568405451EDABBD7235178B0728C");
	}.bind(this));
});

Attaching the SAPUI5 component to SE DOM (an afterRefreshScript):

var oSEComponent = sap.ushell ? sap.ushell.Container.getService('AppLifeCycle').getCurrentApplication().componentInstance :
	sap.ui.getCore().getComponent("sap.se.ui");
	
var oScreenServiceAPI = oSEComponent.getService("ScreenService");


var fnRefreshAppledOnDomReady = function(){
	var sGuiSimpleContainerId = "wnd[0]/usr";
	var oParentUI5Container = oScreenServiceAPI.getControlById(sGuiSimpleContainerId);
	var sComponentInstanceId = session.utils.get("UI5_APPLET_ID");
	var oAppletComponent;
	
	oScreenServiceAPI.detachAfterRendering(fnRefreshAppledOnDomReady, this);
	
	if(!oParentUI5Container || !sComponentInstanceId ){
		return;
	}
	
	this.oComponentContainer = this.oComponentContainer || new sap.ui.core.ComponentContainer({
		component: sComponentInstanceId
	});
	//Set the SAPUI5 Applet view model data 
	oAppletComponent = sap.ui.getCore().getComponent(sComponentInstanceId);
	var oViewModel = oAppletComponent.getModel("DATA");
	oViewModel.setData({"NotificationCollection" : this.oTableData});
	oParentUI5Container.addContent(this.oComponentContainer);
	
}
oScreenServiceAPI.attachAfterRendering(fnRefreshAppledOnDomReady, this);

Please be informed that such approach is not yet officially supported, we are researching options to simplify SAPUI5 component integration with Slipstream Engine flavors.

Thank you!

Krists Magons

SAP Screen Personas Dev Team

[cristin_charbonneau]

Thank you both for the great answers!

Kind Regards,

Cristin

[tamas_hoznek]

I think the problem here may be that session.startTransaction is a Personas-specific scripting command but the rest of what you built is regular JavaScript, and it doesn't understand what that command is. There is an error in the console too.

The simplest would be of course if we had an onClick event for the HTML viewer control, but since that doesn't exist, there is a trick you could use. Create a transparent script button (with no border) that covers the chart and has a higher Z-index than the chart's HTML viewer. This will stay invisible and lets you see the chart, but when you click on it, you can pass whatever parameters and start the transaction you want.