<!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 */