XMLUI视图中的SAPUI5 OData(带导航)& VizFrame图表导航

时间:2017-06-11 19:39:35

标签: javascript xml navigation odata sapui5

我正在为我的公司开发一个SAPUI5应用程序,而我在基于XML的视图中使用OData(带导航)时遇到了麻烦。关于它有一些关于它的帖子,但我无法使用expand属性。 (如果我在基于Js的视图中尝试它,它可以工作)

Metadata.xml



<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx">
  <edmx:DataServices m:DataServiceVersion="1.0" m:MaxDataServiceVersion="3.0" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">

    <Schema Namespace="TEST_SRV" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">


      <EntityType Name="ISSUE_B">
        <Key>
          <PropertyRef Name="B" />

        </Key>
        <Property Name="B" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false" Unicode="true" />
        <Property Name="NbI" Type="Edm.Int32" Nullable="false" />
        <Property Name="K1" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false" Unicode="true" />
        <Property Name="I1" Type="Edm.Int32" Nullable="false" />
        <Property Name="K2" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false" Unicode="true" />
        <Property Name="I2" Type="Edm.Int32" Nullable="false" />


        <NavigationProperty Name="B2AB_NAV" Relationship="TEST_SRV.B2AB_ASS" FromRole="FromRole_B2AB_ASS" ToRole="ToRole_B2AB_ASS" />

      </EntityType>

      <EntityType Name="ISSUE_AB">
        <Key>
          <PropertyRef Name="CId" />
          <PropertyRef Name="B" />
        </Key>
        <Property Name="B" Type="Edm.String" Nullable="false" MaxLength="40" FixedLength="false" Unicode="true" />
        <Property Name="CId" Type="Edm.String" Nullable="false" Unicode="true" />
        <Property Name="Open" Type="Edm.Int32" Nullable="false" Unicode="true" />
        <Property Name="Closed" Type="Edm.Int32" Nullable="false" Unicode="true" />

      </EntityType>

      <Association Name="B2AB_ASS">
        <End Type="TEST_SRV.ISSUE_B" Multiplicity="0..1" Role="FromRole_B2AB_ASS" />
        <End Type="TEST_SRV.ISSUE_AB" Multiplicity="*" Role="ToRole_B2AB_ASS" />
        <ReferentialConstraint>
          <Principal Role="FromRole_B2AB_ASS">
            <PropertyRef Name="B" />
          </Principal>
          <Dependent Role="ToRole_B2AB_ASS">
            <PropertyRef Name="B" />
          </Dependent>
        </ReferentialConstraint>
      </Association>
    </Schema>
    <Schema Namespace="ODataWebV2.My.Model" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
      <EntityContainer Name="TEST_SRV_Entities" m:IsDefaultEntityContainer="true" p6:LazyLoadingEnabled="true" xmlns:p6="http://schemas.microsoft.com/ado/2009/02/edm/annotation">


        <EntitySet Name="ISSUE_BSet" EntityType="TEST_SRV.ISSUE_B" />
        <EntitySet Name="ISSUE_ABSet" EntityType="TEST_SRV.ISSUE_AB" />

        <AssociationSet Name="B2AB_ASSSet" Association="TEST_SRV.B2AB_ASS">
          <End EntitySet="ISSUE_BSet" Role="FromRole_B2AB_ASS" />
          <End EntitySet="ISSUE_ABSet" Role="ToRole_B2AB_ASS" />
        </AssociationSet>
      </EntityContainer>
    </Schema>
  </edmx:DataServices>
</edmx:Edmx>
&#13;
&#13;
&#13;

查看(&#39; myData&#39;是我在清单中定义的OData模型)

&#13;
&#13;
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:semantic="sap.m.semantic" xmlns:footerbar="sap.ushell.ui.footerbar" xmlns:viz="sap.viz.ui5.controls" xmlns:viz.data="sap.viz.ui5.data" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
  xmlns:suite="sap.suite.ui.commons" controllerName="test.controller.DetailView" xmlns:html="http://www.w3.org/1999/xhtml" height="100%">

  <Page id="detail1" title="{i18n>detailTitle}" showFooter="true" enableScrolling="false" showNavButton="true" navButtonPress="onNavBack">
    <content>

      <ObjectHeader title="{myData>B}" number="{myData>NbI}" numberUnit="{i18n>numberUnit}" />


      <suite:ChartContainer id="idChartContainer" showFullScreen="true" showPersonalization="false" autoAdjustHeight="false" showLegend="true">

        <suite:toolbar>
          <OverflowToolbar id="appToolbar">
            <suite:ChartContainerToolbarPlaceholder/>
          </OverflowToolbar>
        </suite:toolbar>
        <suite:content>
          <suite:ChartContainerContent icon="sap-icon://bar-chart" title="Column Chart">
            <suite:content>
              <viz:VizFrame uiConfig="{applicationSet:'fiori'}" id="oVizFrame1" vizType="column" width="100%" selectData="onClickVizFrame">
                <viz:dataset>
                  <viz.data:FlattenedDataset data="{
                path:'myData>/ISSUE_BSet',
                parameters: {expand: 'B2AB_NAV'}
                }">
                    <viz.data:dimensions>
                      <viz.data:DimensionDefinition name="Customer" value="{myData>B2AB_NAV/CId}" />
                    </viz.data:dimensions>
                    <viz.data:measures>
                      <viz.data:MeasureDefinition name="Closed" value="{myData>B2AB_NAV/Closed}" />
                      <viz.data:MeasureDefinition name="Open" value="{myData>B2AB_NAV/Open}" />
                    </viz.data:measures>
                  </viz.data:FlattenedDataset>
                </viz:dataset>
                <viz:feeds>
                  <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Open" />
                  <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Closed" />
                  <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Customer" />
                </viz:feeds>
              </viz:VizFrame>

            </suite:content>
          </suite:ChartContainerContent>
        </suite:content>
      </suite:ChartContainer>

    </content>
    <footer>
      <Toolbar>
        <content>
          <ToolbarSpacer>
          </ToolbarSpacer>
          <Button id="__button1" icon="sap-icon://action" press="handlePopoverShare" />
        </content>
      </Toolbar>
    </footer>

  </Page>
</core:View>
&#13;
&#13;
&#13;

控制器

&#13;
&#13;
sap.ui.define([
      "test/controller/BaseController",
      "sap/ui/model/json/JSONModel",
      "sap/ui/model/Filter",
      "sap/ui/model/FilterOperator"
    ], function(BaseController, JSONModel, Filter, FilterOperator) {
      "use strict";

      return BaseController.extend("test.controller.DetailView", {



          onInit: function() {

            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);

            oRouter.getRoute("select").attachMatched(this._onRouteMatched, this);

          },


          _onRouteMatched: function(oEvent) {

            var oArgs = oEvent.getParameter("arguments");
            var oView = this.getView();
            var oChart = oView.byId("oVizFrame2");

            oChart.bindElement({
              path: "/" + oArgs.domain,
              model: "myData",
              expand: "B2AB_NAV"
            });


            oView.bindElement({
              path: "/" + oArgs.domain,
              model: "myData",
              events: {
                change: this._onBindingChange.bind(this),
                dataRequested: function(oEvent) {
                  oView.setBusy(true);
                },
                dataReceived: function(oEvent) {
                  oView.setBusy(false);
                }

              }
            });



          },
          _onBindingChange: function(oEvent) {

            // No data for the binding
            if (!this.getView().getBindingContext("myData")) {
              this.getRouter().getTargets().display("notFound");
            }
          },



          onClickVizFrame: function(oEvent) {


            var oItem = oEvent.getSource();

            // Get data	
            var clickedCol = oEvent.getSource().vizSelection()[0].data["_context_row_number"]
            var oChart = this.getView().byId("oVizFrame1");
            var aContexts = oChart.getDataset().getBinding("data").getContexts();
            var sPath = aContexts[clickedCol].getPath().substr(1); //selected binding context

            // Clear VizFrame Selection
            var action = {
              clearSelection: true
            };
            oItem.vizSelection("", action);

            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.navTo("detail", {
              data: sPath
            });

          },
          onNavBack: function() {
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.navTo("initial", true);
          }
        }
      });
&#13;
&#13;
&#13;

此外,我想通过使用VizFrame图表导航到更多细节但是如果我在点击它时尝试获取BindingContext路径,则只给出了没有上一个路径的导航路径。

提前感谢您的帮助:)

编辑:

Working plunker example

正如您在导航到第二页时所看到的那样,第一个图表不起作用(xml)但第二个图表(js)起作用。由于更改了BindingContext,导航到第三页并不起作用。

1 个答案:

答案 0 :(得分:0)

我已经解决了您遇到的问题,这里是修改后的plunker的链接:

这是&#34; bindObject&#34;的一个例子。方法调用(我把它放在这里,因为stackoverflow不允许在没有编码的情况下将链接发布到plnkr,这对我来说非常奇怪。

  oView.bindObject({
    path: "/" + oArgs.data,
    model: "myData",
    parameters: {
      $expand: "B2AB_NAV"
    }
  });

https://plnkr.co/edit/hTSvXk1811MKdUxqfQJn

简而言之:

  1. &#34;扩展&#34;参数在元素(对象)绑定中以错误的方式设置
  2. 视图中的绑定路径错误
  3. 路线对细节的捍卫&amp; detail2具有相同的模式,这是不正确的
  4. 没有必要创建多个ODataModel,默认情况下实例化的那个(基于你的manifest.json配置)非常强大
  5. 我没有进行重构,但是有一个抛光的空间。增强这个编码,正如一个所说,请再次参考walkthough文档,有各种绑定类型的好例子。祝你好运:))