In Part I, we learnt how to make use of external resources in SAPUI5 applications. Now we will implement same in a project and see the concept in action.
With this article you’ll have a chance to play around the gauges.
What are Gauges?
Gauges are nothing but a measurement device of any range or value. For example, speedometer, it is also a gauge which measures the speed of our vehicle.
Same way we can represent the gauge in our programming too. Let’s get started an implement a simple Gauges in our Application and make it look cool. 🙂
Prerequisites : You should be familiar with WebIDE and creating project.
- If not, do not worry. Please go through this post to Learn and Create you first SAPUI5 in WebIDE.
- You need this following files to have Gauge effects:
- justgage.js (Licensed under MIT)
- raphael-2.1.4.min.js (Licensed under MIT)
You can download both these files form here Justgage. And extract the files.
Step 1 : Create an SAPUI5 application.
Step 2 : Make a New Folder in the project and copy these files ‘justgage.js’ and ‘raphael-2.1.4.min.js’ files into your project.
Step 3 : In Component of your application define these files path. Please provide proper path of your files, you can see in my application it is ‘Guages/util/FileName’.
Also Read: An ABAPer’s First SAPUI5 App in SAP WebIDE
Step 4 : Some Programming
Gauges.view.xml
<mvc:View controllerName="Gauge.controller.Gauges" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:l="sap.ui.layout"> <App> <pages> <Page title="Gauge Demo"> <content> <html:div id="id_Gauge1"></html:div> <FlexBox id="id_Gauge2" class="gauage"/> <l:Grid id="id_Gauge3" class=""/> </content> </Page> </pages> </App> </mvc:View>
You can see in the above code that i’m using HTML, FlexBox, Grid to show this gauges you can also try with many other components like VBox, HBox etc.

Note: One of our senior SAPYard member who is junior in SAPUI5 🙂 was trying to use the Grid without declaring the library. Make sure, you do not repeat the mistake. Declare the Library on the Top before using it later.
Gauges.controller.xml
Call the “GuageDispaly” function in “onAfterRendering“.
Why do we not call the function in onInit?
Technically, we can call the gauageDisplay function in onInit but the resources will not be loaded then. So it makes more logical sense in calling it after rendering.
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("ZGauge.controller.Gauges", {
onAfterRendering: function() {
//Semi-circle gauges
this.GauegeDisplay();
},
//Semi-circle gauges
GauegeDisplay: function() {
new JustGage({
id: this.getView().byId("id_Gauge1").sId,
value: 67,
min: 0,
max: 100,
title: "Sample 1 with HTML"
});
new JustGage({
id: this.getView().byId("id_Gauge2").sId,
value: getRandomInt(0, 100),
min: 0,
max: 100,
title: "Sample 2 with FlexBox",
label: "pounds",
view: this.oView,
size: 900,
});
new JustGage({
id: this.getView().byId("id_Gauge3").sId,
value: getRandomInt(0, 100),
min: 0,
max: 100,
title: "Shadow effects",
label: "",
shadowOpacity: 1,
shadowSize: 5,
shadowVerticalOffset: 10,
view: this.oView,
size: 400,
});
},
//Meter Gauges
createGauge: function(container, label, min, max) {
var config = {
size: 120,
label: label,
min: undefined != min ? min : 0,
max: undefined != max ? max : 100,
minorTicks: 5
};
var range = config.max - config.min;
config.greenZones = [{
from: config.min,
to: config.min + range * 0.75
}];
config.yellowZones = [{
from: config.min + range * 0.75,
to: config.min + range * 0.9
}];
config.redZones = [{
from: config.min + range * 0.9,
to: config.max
}];
this.gauges[container] = new Gauge(container, config);
this.gauges[container].render();
return this.gauges[container];
},
});
});

Note: You would find createGauge function in the above Gauges.controller.js. You may ignore it or comment it. We are not using it.
Also Read: SAPUI5 Basic Debugging for Beginners
Step 5 : Execute the Application.
There are so many properties that you can play with, like changing the size of the Gauge or giving custom colors and many more. You can find these properties in the Justgage zip file. And there are some examples in the zip file. Do make use of it.
You may just import the Project in your WebIDE and see it in Action.
If you do not want to use third party files in your application then you can go for Radial Charts which serves almost the same purpose.
Now, SAPYard has a YouTube Channel. Please Subscribe to our Channel for useful videos shorter than 5 minutes.
When to Choose Row Vs Column Store in S/4HANA explained in 3.5 minutes?
We have a very active Telegram (App) SAP Technical Group with more than 1717+ SAP Technical Practitioners from 6 Continents of the SAP World. Please join it using below link.
Telegram SAP Technical Discuss Group. You need to install the Telegram App first on your mobile device. Once you have it on your mobile, you can join the group and also access it from the Web on your computer and laptop.
Step by Step Tutorials on SAPUI5
- Journey to SAPUI5
- SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part II. Routing and Navigation in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)
- SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5
- SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers
- SAPUI5 Tutorial with WebIDE. Part VI. Using Fragments in SAPUI5 Fiori Applications
- SAPUI5 Tutorial with WebIDE. Part VII. An ABAPer’s First SAPUI5 App in SAP WebIDE
- SAPUI5 Tutorial with WebIDE. Part VIII. Deploy my First SAPUI5 App in WebIDE
- SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()
- SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application
- SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App
- SAPUI5 Tutorial with WebIDE. Part XII. SAPUI5 Basic Debugging for Beginners
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 1
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 2
- Add Delete & Save Multiple Records in SAPUI5. Part 1 – ADD
- Add Delete & Save Multiple Records in SAPUI5. Part 2 – DELETE
- Add Delete & Save Multiple Records in SAPUI5. Part 3 – SAVE
- Modularization and Large Scale Architecture in SAPUI5
- Use of Third Party (or) External Resources in SAPUI5. Part I – Overview
- Use of Third Party (or) External Resources in SAPUI5. Part II – Practical with Gauges
- How to Deploy UI5 App without LPD_CUST?
- SAPUI5 For ABAPers – Component Reuse with Real Time Example
- SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD Operations
- Advance SAPUI5 – 1- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
- Advance SAPUI5 – 2- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- Advance SAPUI5 – 3 – How to send e-mail in SAPUI5 Hybrid App?
- Advance SAPUI5 – 4 – How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application? Approach 1













