<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>RoadMap</title>
<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons,sap.ui.table, sap.ui.layout" data-sap-ui-xx-bindingSyntax="complex"></script>
<script>
var dataObject = [{
Label: "Welcome"
}, {
Label: "General Order Data"
}, {
Label: "Select Order Type"
}, {
Label: "Type Specific Data"
}, {
Label: "File Upload"
}];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(dataObject);
sap.ui.getCore().setModel(oModel);
//create the RoadMap control
var oRMap = new sap.ui.commons.RoadMap("rMap");
//create the RoadMap steps
var oStepTemplate = new sap.ui.commons.RoadMapStep({
label: "{Label}"
});
//Bind JSONModel to steps aggregation
oRMap.bindAggregation("steps", {
path: "/",
template: oStepTemplate
})
var oButton = new sap.ui.commons.Button({
text: "Add Step",
style: "Emph",
icon: "sap-icon://add",
press: function(oEvent) {
var oModel = sap.ui.getCore().getModel();
var oProperty = oModel.getProperty("/");
var nObject = {
Label: "Summary"
};
oProperty.push(nObject);
oModel.setProperty("/", oProperty);
}
}).addStyleClass("buttonStyle");
//Place the control on the UI
var oVLayout = new sap.ui.layout.VerticalLayout({
content: [oRMap, oButton]
});
oVLayout.placeAt("uiArea");
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 RoadMap -->
<div id="uiArea"></div>
</body>
</html>
// Code goes here
/* Styles go here */