所有约会都有不同的行(sap.m.PlanningCalendar)

时间:2017-02-17 09:42:10

标签: sapui5

我正在尝试将带有“sap.me.OverlapCalendar”的旧应用程序移植到新的“sap.m.PlanningCalendar”中,我想只为一个人显示约会。我发现约会的显示方式有所不同。

我使用的模板是:

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
            <version>1.5.1.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.40</version>
        </dependency>           
  </dependencies>

  <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

使用以下命令绑定到Calendar控件:

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}"
        })]
});

数据显示在日历中,但显示的方式不同。

旧日历:http://imgur.com/3glZRtT

新日历:http://imgur.com/snnsWVE

如何获得相同的输出?

1 个答案:

答案 0 :(得分:1)

您必须更改模型:例如,在模型的根目录中,您可以创建与日历行对应的数组,并且每行应包含约会数组。 示例json文件可能如下所示:

{
    "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"
        }]
    }]
}

“items”是一组日历行,每个项目都包含约会数组。控件的绑定应该更复杂。我使用这样的文件作为JSON模型的基础,控制器代码如下所示:

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); //
            }
        }

    });

});

请注意,首先创建一个行模板,然后将其“约会”聚合绑定到“CalendarModel”模型的“约会”属性,并使用模板创建CalendarAppointment。然后,为引用行模板的日历行创建绑定。