My journey through SAP App Development exercises

Add a Custom Control PieChart into the OpenUI5 Sample App

  • Use this .devcontainer and no additional installations are necessary for this exercise!

Kick off development

Follow the instructions from the great technical article written by Peter Muessig

Step 1: Prepare your environment 

git clone https://github.com/SAP/openui5-sample-app.git
cd openui5-sample-app
npm install
1
2
3
  • Check for updates and update the package.json.
node ➜ /workspaces/openui5-sample-app (master ✗)
$ npm install -g npm-check-updates 
$ ncu -u
1
2
3
  • Run the application with the following command
ui5 serve -o index.html
1

Step 2: Configure the ui5-tooling-modules extensions and add the livereload middleware 

npm install ui5-tooling-modules --save-dev
npm install ui5-middleware-livereload --save-dev
1
2

  • Open the ui5.yaml and add the following lines

  • ui5.yaml

builder:
  customTasks:
    - name: ui5-tooling-modules-task
      afterTask: replaceVersion
server:
  customMiddleware:
    - name: ui5-tooling-modules-middleware
      afterMiddleware: compression
    - name: ui5-middleware-livereload
      afterMiddleware: compression
      configuration:
        extraExts: "xml,json,properties"
        path: "webapp"
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Step 3: Add Chart.js to the project 

node ➜ /workspaces/openui5-sample-app (master ✗)
$ npm install chart.js --save-dev
1
2

Create a custom control for the PieChart integration into UI5: (Create a new folder control and with a new PieChart.js file) webapp/control/PieChart.js

  • Use the Custom Control in your App.view
<mvc:View xmlns:mvc="sap.ui.core.mvc" 
	xmlns:layout="sap.ui.layout"
	xmlns:cc="sap.ui.demo.todo.control"
	... />
	[...]
	<f:DynamicPage>
		[...]
		<f:content>
			<layout:VerticalLayout>
				<List ... />
				<cc:PieChart todos="{/todos}"/>
			</layout:VerticalLayout>
		</f:content>
		[...]
	</f:DynamicPage>
	[...]
</mvc:View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Voilá, now you will see the PieChart

after-running-cds-watch

Step 4: Connecting the dots

Follow the article

Step 5: Building your project

After the build completed, inspect the “dist” folder and you can find a file called “chart.js.js”:

dist/resources/chart.js.js

openui5-sample-app
├── dist
  ├── resources
    ├── chart.js.js       <-- the custom bundle for Chart.js
    ...
    └── ui5loaader.js
  ...
  └── manifest.json
...
└── ui5.yaml
1
2
3
4
5
6
7
8
9
10