尝试在SAP ui5中显示VIZFRAME时出现未定义错误的setdataset

Question

我正在尝试显示vizframe，我的数据是一个简单的json数据。我的视图和控制器都在js中。（我将开始在xml中编写我的视图），因为我认为这是要走的路。

我得到空白页。我想念的是什么。还是我应该将视图更改为xml，因为sdk仅具有xml的示例。

我的查看代码是这个。

    createContent: function (oController) {
        var oSubHeader = new sap.m.Bar({
            contentLeft: [new sap.m.Button({
                icon: "sap-icon://nav-back",
                press: [oController.onNavBack, oController]
            })],
            contentMiddle: [new sap.m.Label({
                text: "{i18n>app_subhead_2}"
            })]

        });
        var oVizFrame = new sap.viz.ui5.controls.VizFrame("VizFrameId", {
            width: "100%",
            height: "400px",
            vizType: "line"

        });
        oVizFrame.placeAt("content");

        var oPage = new sap.m.Page({
            title: "UI5 Assignment App",
            showSubHeader: true,
            subHeader: oSubHeader,
            content: [oVizFrame]
        });
        return oPage;
    }

});

我对应的控制器是

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/UIComponent",
    "sap/ui/core/routing/History",
    "sap/viz/ui5/controls/VizFrame",
    "sap/viz/ui5/data/FlattenedDataset"
], function (Controller, UIComponent, History,VizFrame, FlattenedDataset) {
    "use strict";

    return Controller.extend("Project_Tile_learning.Divya_tile_Project.controller.ProductDetailPage", {
        onNavBack: function () {
            var oHistory = History.getInstance();
            var sPreviousHash = oHistory.getPreviousHash();

            if (sPreviousHash !== undefined) {
                window.history.go(-1);
            } else {
                var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                oRouter.navTo("homepage", true);
            }
        },
        onInit: function () {
            var sampleDatajson = new sap.ui.model.json.JSONModel("json/PA.json");
            var oVizFrame = this.getView().byId("VizFrameId");

            var oDataset = new sap.viz.ui5.data.FlattenedDataset({
                dimensions: [{
                    name: "Year",
                    value: "{Year}"
                }],

                measures: [{
                    name: "Supplier",
                    value: "{Supplier}"
                }, {
                    name: "Liquor",
                    value: "{Liquor}"
                }, {
                    name: "Quantity",
                    value: "{Quantity}"
                }],

                data: {
                    path: "/items"
                }
            });
            oVizFrame.setDataset(oDataset);

            oVizFrame.setModel(sampleDatajson);
            var oFeedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
                    "uid": "valueAxis",
                    "type": "Measure",
                    "values": ["Supplier"]
                }),
                oFeedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
                    "uid": "valueAxis",
                    "type": "Measure",
                    "values": ["Liquor"]
                }),
                oFeedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
                    "uid": "valueAxis",
                    "type": "Measure",
                    "values": ["Quantity"]
                }),

                oFeedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
                    "uid": "categoryAxis",
                    "type": "Dimension",
                    "values": ["Year"]
                });

            oVizFrame.addFeed(oFeedValueAxis);
            oVizFrame.addFeed(oFeedValueAxis1);
            oVizFrame.addFeed(oFeedValueAxis2);
            oVizFrame.addFeed(oFeedCategoryAxis);
        }
    });

});

但是我得到空白页。

Answer 1

在JS视图定义中创建控件时，请始终使用this.createId("myControl")。

From the doc:

如果您想为JSView内的控件定义ID以确保其唯一性[...]，则无法提供硬编码ID，但必须给视图提供添加其实例ID的机会，例如前缀。这是通过使用View.createId(...)方法完成的。

对于上面的示例，此操作如下：

new sap.viz.ui5.controls.VizFrame(this.createId("VizFrameId"), { /*...*/ });

然后在控制器中，myView.byId尝试使用视图自己的ID作为前缀访问该控件，这一次将成功，因为该控件具有一个以视图ID作为前缀的ID。