Alle Termine haben eine andere Zeile (sap.m.PlanningCalendar)

Question

Ich versuche meine alte Anwendung mit "sap.me.OverlapCalendar" in den neuen "sap.m.PlanningCalendar" zu portieren, ich möchte Termine nur für eine Person. Ich habe einen Unterschied in der Darstellung der Termine gefunden.

Die Vorlage ich benutze, ist:

var oTemplateRow = new sap.m.PlanningCalendarRow("RowTemplate", { 
     appointments:[ 
     new sap.ui.unified.CalendarAppointment({ 
      startDate: { 
       path: 'CalendarModel>DateFrom', 
       formatter: util.Formatter.toStartDate 
      }, 
      endDate: { 
       path: 'CalendarModel>DateTo', 
       formatter: util.Formatter.toEndDate 
      }, 
      title: "{CalendarModel>CardName} - {CalendarModel>ProjectName}", 
      text: "Gewerkte uren: {CalendarModel>WorkedHours}", 
      type: "Type04", 
      tentative: false, 
      key: "{CalendarModel>ReportID}" 
     })] 
}); 

das dem Kalendersteuerung mit gebunden ist:

bindAggregation("rows", "CalendarModel>/Items/", oTemplateRow); 

Die Daten werden in den Kalender zeigt, aber die Art und Weise zeigt es ist anders.

Alte Kalender: http://imgur.com/3glZRtT

Neuer Kalender: http://imgur.com/snnsWVE

Was soll ich tun, um die gleiche Leistung zu bekommen?

Answer 1

Sie müssen das Modell ändern: Beispielsweise erstellen Sie im Stammverzeichnis des Modells ein Array, das den Zeilen des Kalenders entspricht, und jede Zeile sollte ein Array von Terminen enthalten. Eine Probe JSON-Datei kann wie folgt aussehen:

{ 
    "items": [{ 
     "title": "Item1", 
     "appointments": [{ 
      "text": "appointment1", 
      "start": "2017-02-17T09:30:00", 
      "end": "2017-02-17T13:00:00" 
     }, { 
      "text": "appointment2", 
      "start": "2017-02-17T09:45:00", 
      "end": "2017-02-17T13:10:00" 
     }] 
    }, { 
     "title": "Item2", 
     "appointments": [{ 
      "text": "appointment3", 
      "start": "2017-02-17T10:30:00", 
      "end": "2017-02-17T14:00:00" 
     }, { 
      "text": "appointment4", 
      "start": "2017-02-17T10:45:00", 
      "end": "2017-02-17T14:10:00" 
     }] 
    }] 
} 

„Artikel“ ist ein Array von Kalender Zeilen und jedes Element enthält Array von Terminen. Die Bindung der Kontrolle sollte komplexer sein. Früher habe ich eine solche Datei eine Basis für JSON-Modell und der Controller-Code wie folgt aussieht:

sap.ui.define([ 
    "sap/ui/core/mvc/Controller" 
], function(Controller) { 
    "use strict"; 

    return Controller.extend("QuickStartApplication.controller.View1", { 

     onInit: function() { 
      var oCale = this.getView().byId("PC1"); 

      var oModel = this.getOwnerComponent().getModel("CalendarModel"); 

      this.getView().setModel(oModel, "CalendarModel"); 

      var oTemplateRow = new sap.m.PlanningCalendarRow("RowTemplate", { title: "{CalendarModel>title}" }); 

      oTemplateRow.bindAggregation("appointments", { 
       path: "CalendarModel>appointments", 
       template: new sap.ui.unified.CalendarAppointment({ 
        title: "{CalendarModel>text}", 
        startDate: { 
         path: "CalendarModel>start", 
         formatter: this.toDate 
        }, 
        endDate: { 
         path: "CalendarModel>end", 
         formatter: this.toDate 
        } 
       }), 
       templateShareable: true 
      }); 

      oCale.bindAggregation("rows", { 
       path: "CalendarModel>/items", 
       template: oTemplateRow, 
       templateShareable: true 
      }); 

     }, 

     toDate: function(sValue) { 
      if (sValue) { 
       return new Date(sValue); // 
      } 
     } 

    }); 

}); 

Beachten Sie, dass Sie zunächst eine Reihe Vorlage erstellen und dann binden seine „Termine“ Aggregation „Termine“ Eigentum von „CalendarModel "Modell mit Vorlage für die Erstellung von Kalenderterminen. Anschließend erstellen Sie eine Bindung für Kalenderzeilen, die sich auf die Zeilenvorlage beziehen.