Construct External JSON For SAPUI5 Planning Calender

1
votes

We have been facing problem in constructing external JSON model for sapui5 planning control

Planning Calendar Example SAPUi5 the model has been implemented inside controller.js file.

var oModel = new JSONModel();
      oModel.setData({
        startDate: new Date("2015", "11", "15", "8", "0"),
        people: [{
          pic: "sap-icon://employee",
          name: "Max Mustermann",
          role: "team member",
          appointments: [{
            start: new Date("2015", "11", "15", "10", "0"),
            end: new Date("2015", "11", "15", "12", "0"),
            title: "Team meeting",
            info: "room 1",
            type: "Type01",
            pic: "sap-icon://sap-ui5",
            tentative: false
          }, {
            start: new Date("2015", "11", "16", "0", "0"),
            end: new Date("2015", "11", "16", "23", "59"),
            title: "Vacation",
            info: "out of office",
            type: "Type04",
            tentative: false
          }],
          headers: [{
            start: new Date("2015", "11", "16", "0", "0"),
            end: new Date("2015", "11", "16", "23", "59"),
            title: "Private",
            type: "Type05"
          }, ]
        }, {
          pic: "https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/demokit/explored/img/johnDoe.png",
          name: "John Doe",
          role: "team member",
          appointments: [{
            start: new Date("2015", "11", "15", "08", "30"),
            end: new Date("2015", "11", "15", "09", "30"),
            title: "Meeting",
            type: "Type02",
            tentative: false
          }, {
            start: new Date("2015", "11", "15", "10", "0"),
            end: new Date("2015", "11", "15", "12", "0"),
            title: "Team meeting",
            info: "room 1",
            type: "Type01",
            pic: "sap-icon://sap-ui5",
            tentative: false
          }, {
            start: new Date("2015", "11", "15", "11", "30"),
            end: new Date("2015", "11", "15", "13", "30"),
            title: "Lunch",
            type: "Type03",
            tentative: true
          }],
          headers: [{
            start: new Date("2015", "11", "15", "8", "0"),
            end: new Date("2015", "11", "15", "10", "0"),
            title: "Reminder",
            type: "Type06"
          }, ]
        }]
      });

Planning Calendar Output Screen

Code:

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">
  <title>PlanningCalendar</title>
  <script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex">
  </script>
  <style type="text/css">
    
  </style>

  <!-- XML-based view definition -->
  <script id="oView" type="sapui5/xmlview">
    <mvc:View height="100%" controllerName="myView.Template" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:unified="sap.ui.unified" xmlns="sap.m" class="viewPadding">
      <App>
        <pages>
          <Page id="oPage" title="Appointments" class="marginBoxContent">
            <content>
              <VBox class="sapUiSmallMargin">
                <PlanningCalendar id="PC1" startDate="{path: '/startDate'}" rows="{path: '/people'}" appointmentSelect="handleAppointmentSelect">
                  <toolbarContent>
                    <Title text="Title" titleStyle="H4" />
                  </toolbarContent>
                  <rows>
                    <PlanningCalendarRow icon="{pic}" title="{name}" text="{role}" appointments="{appointments}" intervalHeaders="{headers}">
                      <appointments>
                        <unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" text="{info}" type="{type}" tentative="{tentative}">
                        </unified:CalendarAppointment>
                      </appointments>
                      <intervalHeaders>
                        <unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" type="{type}">
                        </unified:CalendarAppointment>
                      </intervalHeaders>
                    </PlanningCalendarRow>
                  </rows>
                </PlanningCalendar>
              </VBox>
            </content>
          </Page>
        </pages>
      </App>
    </mvc:View>
  </script>

  <script>
    // Controller definition
    sap.ui.define([
      'jquery.sap.global',
      'sap/ui/core/mvc/Controller',
      'sap/ui/model/Filter',
      'sap/ui/model/json/JSONModel'
    ], function(jQuery, Controller, Filter, JSONModel) {
      "use strict";

      var TableController = Controller.extend("myView.Template", {

        onInit: function() {
          // create model
          var oModel = new JSONModel();
          oModel.setData({
            startDate: new Date("2015", "11", "15", "8", "0"),
            people: [{
              pic: "sap-icon://employee",
              name: "Max Mustermann",
              role: "team member",
              appointments: [{
                start: new Date("2015", "11", "15", "10", "0"),
                end: new Date("2015", "11", "15", "12", "0"),
                title: "Team meeting",
                info: "room 1",
                type: "Type01",
                pic: "sap-icon://sap-ui5",
                tentative: false
              }, {
                start: new Date("2015", "11", "16", "0", "0"),
                end: new Date("2015", "11", "16", "23", "59"),
                title: "Vacation",
                info: "out of office",
                type: "Type04",
                tentative: false
              }],
              headers: [{
                start: new Date("2015", "11", "16", "0", "0"),
                end: new Date("2015", "11", "16", "23", "59"),
                title: "Private",
                type: "Type05"
              }, ]
            }, {
              pic: "https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/demokit/explored/img/johnDoe.png",
              name: "John Doe",
              role: "team member",
              appointments: [{
                start: new Date("2015", "11", "15", "08", "30"),
                end: new Date("2015", "11", "15", "09", "30"),
                title: "Meeting",
                type: "Type02",
                tentative: false
              }, {
                start: new Date("2015", "11", "15", "10", "0"),
                end: new Date("2015", "11", "15", "12", "0"),
                title: "Team meeting",
                info: "room 1",
                type: "Type01",
                pic: "sap-icon://sap-ui5",
                tentative: false
              }, {
                start: new Date("2015", "11", "15", "11", "30"),
                end: new Date("2015", "11", "15", "13", "30"),
                title: "Lunch",
                type: "Type03",
                tentative: true
              }],
              headers: [{
                start: new Date("2015", "11", "15", "8", "0"),
                end: new Date("2015", "11", "15", "10", "0"),
                title: "Reminder",
                type: "Type06"
              }, ]
            }]
          });
          this.getView().setModel(oModel);
		  var oStartDate = String(this.getView().getModel().getProperty("/startDate"));
		  this.getView().getModel().setProperty("/firstStartDate",oStartDate);

        },

        onAfterRendering: function() {
          var oPC1 = this.getView().byId("PC1");
          var oTable = oPC1.getAggregation("table");
          var infoToolbar = oTable.getInfoToolbar();
          var aContent = infoToolbar.getContent();
		  var that = this;
          jQuery.each(aContent, function(iIndex, oField) {
            if (oField.getMetadata().getName() === "sap.ui.unified.CalendarTimeInterval") {
              var oCalendarHeader = oField.getAggregation("header");
              oCalendarHeader.setEnabledPrevious(false);
			  oCalendarHeader.attachPressPrevious(function(){
			  var oCalendarHeader = oField.getAggregation("header");
			  var oStartDate = String(oCalendarHeader.getParent().getStartDate());
			  var oModelDate = that.getView().getModel().getProperty("/firstStartDate");
			  if(oStartDate == oModelDate){
			  var oCalendarHeader = oField.getAggregation("header");
              oCalendarHeader.setEnabledPrevious(false);
			  }
			  });
            }
          });
        },

        handleAppointmentSelect: function(oEvent) {
          var oAppointment = oEvent.getParameter("appointment");
          if (oAppointment) {
            alert("Appointment selected: " + oAppointment.getTitle());
          } else {
            var aAppointments = oEvent.getParameter("appointments");
            var sValue = aAppointments.length + " Appointments selected";
            alert(sValue);
          }
        }

      });

      return TableController;

    });

    // Instantiate the View and display
    var oView = sap.ui.xmlview({
      viewContent: jQuery('#oView').html()
    });

    oView.placeAt('content');
  </script>
</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

Can you please guide to me constructing external json for this planning calendar in SAPui5

1
javascripthtmljsonsapui5

1 Answers

1
votes

Note: you can not carry out evaluation of an expression in JSON file, as it is meant only to store data in attribute–value pairs.

So, get your date in string format and in view you can use formatter to convert it in required format.

Add your JSON data in file with name for e.g. data.json, then specify path of this file as argument to JSONModel constuctor and you are good to go.

Consider your file is in util folder then the declaration will be

var oModel = new JSONModel("./util/data.json");

Update:

Modify all dates in JSON file in following format:

"start": ["2015", "11", "15", "08", "30"]

In view code will be:

<unified:CalendarAppointment startDate="{path: 'start', formatter:'.dateFormatter}" >

In controller for code formatter:

dateFormatter: function(s){
    return new Date(s[0], s[1], s[2], s[3], s[4]);
}