構建外部JSON對於SAPUI5規劃日曆

我們在構建外部JSON模型sapui5規劃控制構建外部JSON對於SAPUI5規劃日曆

Planning Calendar Example SAPUi5模型已經controller.js文件內部實現一直面臨的問題。

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

代碼：

<!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); 
 
\t \t var oStartDate = String(this.getView().getModel().getProperty("/startDate")); 
 
\t \t 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(); 
 
\t \t 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); 
 
\t \t \t oCalendarHeader.attachPressPrevious(function(){ 
 
\t \t \t var oCalendarHeader = oField.getAggregation("header"); 
 
\t \t \t var oStartDate = String(oCalendarHeader.getParent().getStartDate()); 
 
\t \t \t var oModelDate = that.getView().getModel().getProperty("/firstStartDate"); 
 
\t \t \t if(oStartDate == oModelDate){ 
 
\t \t \t var oCalendarHeader = oField.getAggregation("header"); 
 
       oCalendarHeader.setEnabledPrevious(false); 
 
\t \t \t } 
 
\t \t \t }); 
 
      } 
 
      }); 
 
     }, 
 

 
     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>

能否請您指導我構建外部JSON在SAPui5

來源

2016-07-06 Ganesh Babu

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.

這個計劃日曆

因此，以字符串格式獲取日期，並在視圖中您可以使用格式化程序將其轉換爲所需的格式。

將您的JSON數據添加到名稱爲data.json，然後指定這個文件的路徑作爲參數到JSONModel構造函數，你很好走。

考慮你的文件是UTIL文件夾，然後將聲明將

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

更新：

修改JSON文件中的所有日期的格式如下：

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

鑑於代碼將成爲：

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

用於代碼格式化程序的控制器：

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

來源

2016-07-06 07:19:13 Dopedev

謝謝@Dopedev。我嘗試了你提到的數據。JSON： { \t 「startDatefixed」：「新的日期（ '2016年5月5日00:00'）」， \t 「的startDate」：「新的日期（ '五月05 2016 00:00'）」， \t「的人「：[{ \t \t 「PIC」：「SAP-圖標：//樹液UI5」， \t \t 「名稱」：「GA0651」， \t \t 「角色」：「N-5670」， \t \t 「約會」：[{ \t \t \t「start」：「new Date（'May 05 2016 12:00'）」， \t \t \t 「結束」：「新的日期（ '月05 2016 14:00'）」， \t \t \t 「稱號」：「CGK-SIN」， \t \t \t 「信息」：「1小時20分鐘」， \t \t \t 「類型」：「類型01」， \t \t \t 「暫定」：「假」 \t \t}] \t}] }; 我們得到錯誤：「未捕獲的錯誤：日期必須是JavaScript日期對象;元素sap.m.PlanningCalendar＃slotplancalendar - PC1」 –

是@Dopedev，如果可能的話共享格式化程序的示例代碼。它會幫助我快速完成。:) –

檢查修改後的答案！ – Dopedev

構建外部JSON對於SAPUI5規劃日曆

回答

相關問題