Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 3, 2015 13:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/59baacb7a3211ba360eb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/59baacb7a3211ba360eb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Sep 3, 2015.
    204 changes: 204 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,204 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="description" content="OpenUI5 BIN Starting template" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8">
    <!-- Here I used the absolute OpenUI link to sap-ui-core.js, adapt to your need -->
    <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
    id="sap-ui-bootstrap"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.ui.commons,sap.m"></script>
    <title>Basic SAPUI5 MVC example</title>
    <!--
    In normal use, uncomment this block
    <script>
    sap.ui.view({
    type: sap.ui.core.mvc.ViewType.JS,
    viewName: "com.yourdomain.yourapp.view"
    })
    .placeAt("uiArea");
    </script>
    -->
    </head>

    <body class="sapUiBody">
    <div id="uiArea"></div>
    <script id="jsbin-javascript">
    /* UI5 view
    * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js')
    */
    sap.ui.jsview("com.yourdomain.yourapp.view", {

    getControllerName: function() {
    return "com.yourdomain.yourapp.controller";
    },

    createContent: function(oController) {

    //Created a sample SimpleForm layout
    var oLayout = new sap.ui.layout.form.SimpleForm(
    "mySimpleForm",
    {
    maxContainerCols: 1,
    content:[
    new sap.ui.core.Title({text:"Sample Invoice Form"}),

    new sap.ui.commons.Label({text:"Start Date"}),
    new sap.ui.commons.DatePicker({yyyymmdd:"{/startDate}"}),

    new sap.ui.commons.Label({text:"End Date"}),
    new sap.ui.commons.DatePicker({yyyymmdd:"{/endDate}"}),

    new sap.ui.commons.Label({text:"Rate"}),
    new sap.ui.commons.TextField({value:"{/rate}"}),

    new sap.ui.commons.Label({text:""}),
    new sap.ui.commons.RadioButtonGroup({
    columns: 2,
    selectedIndex : "{/dailyHourlyIndex}",
    items: [
    new sap.ui.core.Item({text: "Daily"}),
    new sap.ui.core.Item({text: "Hourly"})
    ]
    }),

    new sap.ui.commons.Label({text:"Number of days"}),
    //Using a formatter function to calculate number of days
    new sap.ui.commons.TextView({text:{
    parts : ["/startDate", "/endDate"],
    formatter : function(ymdDate1, ymdDate2) {
    var days = ymdDate2 - ymdDate1;
    return days;
    }
    }})
    ]
    });
    return oLayout;
    },

    onAfterRendering: function() {
    }
    });



    /* UI5 controller
    * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js')
    */
    sap.ui.controller("com.yourdomain.yourapp.controller", {
    onInit: function() {
    //Declare your model data
    var oData = {
    startDate : 20140714,
    endDate : 20140731,
    rate : 90,
    dailyHourlyIndex : 1
    };

    //Declare and set your model
    var oModel = sap.ui.model.json.JSONModel();
    oModel.setData(oData);
    sap.ui.getCore().setModel(oModel);
    }
    });


    // For JSBin, I have included this here (normally this is in index.html)
    sap.ui.view({
    type: sap.ui.core.mvc.ViewType.JS,
    viewName: "com.yourdomain.yourapp.view"
    })
    .placeAt("uiArea");
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">/* UI5 view
    * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js')
    */
    sap.ui.jsview("com.yourdomain.yourapp.view", {

    getControllerName: function() {
    return "com.yourdomain.yourapp.controller";
    },

    createContent: function(oController) {

    //Created a sample SimpleForm layout
    var oLayout = new sap.ui.layout.form.SimpleForm(
    "mySimpleForm",
    {
    maxContainerCols: 1,
    content:[
    new sap.ui.core.Title({text:"Sample Invoice Form"}),

    new sap.ui.commons.Label({text:"Start Date"}),
    new sap.ui.commons.DatePicker({yyyymmdd:"{/startDate}"}),

    new sap.ui.commons.Label({text:"End Date"}),
    new sap.ui.commons.DatePicker({yyyymmdd:"{/endDate}"}),

    new sap.ui.commons.Label({text:"Rate"}),
    new sap.ui.commons.TextField({value:"{/rate}"}),

    new sap.ui.commons.Label({text:""}),
    new sap.ui.commons.RadioButtonGroup({
    columns: 2,
    selectedIndex : "{/dailyHourlyIndex}",
    items: [
    new sap.ui.core.Item({text: "Daily"}),
    new sap.ui.core.Item({text: "Hourly"})
    ]
    }),

    new sap.ui.commons.Label({text:"Number of days"}),
    //Using a formatter function to calculate number of days
    new sap.ui.commons.TextView({text:{
    parts : ["/startDate", "/endDate"],
    formatter : function(ymdDate1, ymdDate2) {
    var days = ymdDate2 - ymdDate1;
    return days;
    }
    }})
    ]
    });
    return oLayout;
    },

    onAfterRendering: function() {
    }
    });



    /* UI5 controller
    * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js')
    */
    sap.ui.controller("com.yourdomain.yourapp.controller", {
    onInit: function() {
    //Declare your model data
    var oData = {
    startDate : 20140714,
    endDate : 20140731,
    rate : 90,
    dailyHourlyIndex : 1
    };

    //Declare and set your model
    var oModel = sap.ui.model.json.JSONModel();
    oModel.setData(oData);
    sap.ui.getCore().setModel(oModel);
    }
    });


    // For JSBin, I have included this here (normally this is in index.html)
    sap.ui.view({
    type: sap.ui.core.mvc.ViewType.JS,
    viewName: "com.yourdomain.yourapp.view"
    })
    .placeAt("uiArea");

    </script></body>
    </html>
    85 changes: 85 additions & 0 deletions jsbin.kakap.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,85 @@
    /* UI5 view
    * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js')
    */
    sap.ui.jsview("com.yourdomain.yourapp.view", {

    getControllerName: function() {
    return "com.yourdomain.yourapp.controller";
    },

    createContent: function(oController) {

    //Created a sample SimpleForm layout
    var oLayout = new sap.ui.layout.form.SimpleForm(
    "mySimpleForm",
    {
    maxContainerCols: 1,
    content:[
    new sap.ui.core.Title({text:"Sample Invoice Form"}),

    new sap.ui.commons.Label({text:"Start Date"}),
    new sap.ui.commons.DatePicker({yyyymmdd:"{/startDate}"}),

    new sap.ui.commons.Label({text:"End Date"}),
    new sap.ui.commons.DatePicker({yyyymmdd:"{/endDate}"}),

    new sap.ui.commons.Label({text:"Rate"}),
    new sap.ui.commons.TextField({value:"{/rate}"}),

    new sap.ui.commons.Label({text:""}),
    new sap.ui.commons.RadioButtonGroup({
    columns: 2,
    selectedIndex : "{/dailyHourlyIndex}",
    items: [
    new sap.ui.core.Item({text: "Daily"}),
    new sap.ui.core.Item({text: "Hourly"})
    ]
    }),

    new sap.ui.commons.Label({text:"Number of days"}),
    //Using a formatter function to calculate number of days
    new sap.ui.commons.TextView({text:{
    parts : ["/startDate", "/endDate"],
    formatter : function(ymdDate1, ymdDate2) {
    var days = ymdDate2 - ymdDate1;
    return days;
    }
    }})
    ]
    });
    return oLayout;
    },

    onAfterRendering: function() {
    }
    });



    /* UI5 controller
    * normally put in a separate file (in this case, 'com.yourdomain.yourapp.view.js')
    */
    sap.ui.controller("com.yourdomain.yourapp.controller", {
    onInit: function() {
    //Declare your model data
    var oData = {
    startDate : 20140714,
    endDate : 20140731,
    rate : 90,
    dailyHourlyIndex : 1
    };

    //Declare and set your model
    var oModel = sap.ui.model.json.JSONModel();
    oModel.setData(oData);
    sap.ui.getCore().setModel(oModel);
    }
    });


    // For JSBin, I have included this here (normally this is in index.html)
    sap.ui.view({
    type: sap.ui.core.mvc.ViewType.JS,
    viewName: "com.yourdomain.yourapp.view"
    })
    .placeAt("uiArea");