Versions Compared

Version Old Version 21 New Version 22
Changes made by

Fynn Grandke (Unlicensed)

Tim Schauder

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. First create your Fiori website by clicking on the tile with the + in your website directory tab.
    Choose a website name and click on the SAP Fiori Launchpad template.

  2. Then open your Web IDE, go to the second tab on the left side and right click on Workspace → New → Project from Template (alt. Ctrl+Alt+Shift+E) 
    Choose SAPUI5 Application with SAPUI5 Version 1.44 click next → Project Name tutorialProject click next → set View Type to XML click finish 

  3. Include your zipped graphomate library into the resource folder by right click -clicking on res → Import → From File System

  4. Change your manifest.json to the correct paths of your resource folder by adding a "resourceRoots" property to your "sap.ui5" property and add value "graphomate.ui.charts": {} to libs under "dependencies" 

    Code Block
    languagejs
    	"sap.ui5": {
		"resourceRoots": {
			"graphomate": "./res/graphomate/"
		},
		"rootView": {
			"viewName": "tutorialProject.view.tutorialView",
			"type": "XML"
		},
		"dependencies": {
			"minUI5Version": "1.30.0",
			"libs": {
				"sap.ui.core": {},
				"sap.m": {},
				"sap.ui.layout": {},
				"sap.ushell": {},
				"sap.collaboration": {},
				"sap.ui.comp": {},
				"sap.uxap": {},
				"graphomate.ui.charts": {}
			}
		},


  5. To create a chart in your XML we need to define the namespace first by adding xmlns:charts="graphomate.ui.charts" to the XML.
    You can now create your chart by using <charts:Chart series1="X,Y,Z" width="XXpx" height="XXpx" ... > .
    In this case we are setting our seriesLabels through model binding seriesLabels="{sampleModel>/seriesNames}" and we also add a button to the XML, to dynamically change the chart.

    Code Block
    languagejs
    <mvc:View 
	controllerName="TutorialProject.controller.xmlView1" 
	xmlns:html="http://www.w3.org/1999/xhtml" 
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" 
	xmlns:charts="graphomate.ui.charts"
	xmlns="sap.m">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<HBox justifyContent="Center">
						<items>
							<charts:Chart 
								id="myChart"
								width="200px"
								height="200px"
								series1="4,2,8,5"
								showSeriesLabelsLeft="{sampleModel>/showSeriesLabelsLeft}"
								seriesLabels="{sampleModel>/seriesNames}" />
						</items>
					</HBox>
					<Button text="press me" press="onButtonPress" />
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>


  6. In the controller we implement an onInit and onButtonPress function to change the data of the chart.
    The onInit function contains a JSON object and the model binding syntax.
    The onButtonPress function will add a second series and categoryLabels to the chart and apply the changes. 

    Code Block
    languagejs
    sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("TutorialProject.controller.xmlView1", {
		onInit: function() {
			var data = {
				seriesNames: ["Apples", "Bananas"],
				showSeriesLabelsLeft: true
			};
			this.getView().setModel(new sap.ui.model.json.JSONModel(), "sampleModel");
			this.getView().getModel("sampleModel").setData(data);
		},
		onButtonPress: function() {
			var chart = this.getView().byId("myChart");
			var chartConstructor = {
				series2: [5,2,9,7],
				categoryLabels:[["A", "B", "C", "Y"]]
			};
			chart.applySettings(chartConstructor);
		}
	});
});

     

  7. To test the app before deploying it on Hana we need to right click one the project → Run → Run as → SAP Fiori Launchpad Sandbox. 
    Note: Sometimes it might happen that an error screen appears in the new tab even though there are no coding errors. To fix it, click on Ok and then on the top left icon and click on log out under Default User. Log in again and try running it on in the Sandbox again. 

  8. When everything works like expected in the sandbox, you can now deploy the app on Hana by right click on your project → Deploy → Deploy to SAP Cloud Platform. Click deploy and then click Register to Fiori Launchpad. In the following window press next, set your title and subtitle, choose the site, catalog and group to which it should be registered and click next, then finish.
    Open your Portal and choose your Website-Directory tab. By clicking on the link in your website tile you open your website with your created Fiori Apps. If you wish to edit the tile of your app afterwards, click 




Known Issues:

  • If you want to include absolute deviations enumerations you have to in define it by adding require them, e.g. add "graphomate/ui/charts/enums/DeviationType" to the requirements
  • When using attributes /elements in your XML-View which need a "graphomate.ui.enums.[...]"-value, make sure to type the first letter in upper-case, e.g. "type='Absolute' " 
  • The Web IDE might not load the graphomate library properly and throws an error within the IDE an error IDE "error: Variable: ESLint(no-undef) : "graphomate" is not defined.", but if you include the library correctly it should work anyways.
  • Sometimes when using the sandbox or by using deployed apps on your launchpad you might face an 503 Error or "Uncaught SyntaxError: Unexpected token <", which doesn't allow to open your app properly. Try to click on the upper left icon and log out and in again. This should fix this bug. (Tip: Anonymous may not using apps as far as we know)
  • Sometimes you need to clear your cache so libraries can load properly (F12 → Ctrl+Shift+R)