Question

这个问题是关于使用SAP Web IDE开发SAPUI5。我想将OData-Service与我刚刚通过POST方法调用的Web服务相结合。所以基本上它是这样的：我从OData服务（来自后端-SAP系统）检索列表并在表元素中显示它。到现在为止还挺好。它有效。

现在对于表中的每一行，我想用POST方法调用web服务来检索我想在行中显示的值。像：

行列1的值为A，列2的值为B，我将其传递给webservice，告诉我“对于A和B，结果为X”。所以我想在同一行的另一列中显示X.

如何实现这一目标？你知道有什么例子吗？

Answer 1

使用AJAX POST响应中的数据创建JSON模型。将表中所需的单元格绑定到此新JSON模型。然后，如果要根据从每个特定行的OData接收的值在JSON模型中生成选择数据，则使用使用部件的格式化函数。

这里有一个从Northwind获取数据的示例和一个带有虚假数据的JSON模型：https://jsbin.com/racenaqoki/edit?html,output

通过真正的AJAX调用： https://jsbin.com/jivomamuvi/edit?html,output

<html>
<head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta charset="utf-8">

    <title>MVC with XmlView</title>

    <!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
    <script id='sap-ui-bootstrap'
        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>


    <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->

    <!-- define a new (simple) View type as an XmlView
     - using data binding for the Button text
     - binding a controller method to the Button's "press" event
     - also mixing in some plain HTML
     note: typically this would be a standalone file -->

    <script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
        <Page>
        <Table items="{/Orders}" updateFinished="onTableUpdateFinished">
      <columns>
          <Column >
              <Text text="My Value From OData"/>
          </Column>
          <Column>
              <Text text="My Value From AJAX"/>
          </Column>
      </columns>
      <items>
          <ColumnListItem>
            <cells>
              <ObjectIdentifier title="{CustomerID}"/>
              <ObjectIdentifier text="{parts:[{path:'CustomerID'}, {path:'myOtherModel>/'}], formatter: '.myFormatter'}"/>
            </cells>
        </ColumnListItem>
      </items>
    </Table>
        </Page>
    </mvc:View> 
</script>


    <script>
        // define a new (simple) Controller type
        sap.ui.controller("my.own.controller", {
          onInit: function(){
              var myOtherModel = new sap.ui.model.json.JSONModel();
              this.getView().setModel(myOtherModel, "myOtherModel");

              //Here your AJAX call to get the data from a POST request
              /*
                $.ajax({
          type: "POST",
          url: url,
          data: data,
          success: this.ajaxSuccess,
          dataType: dataType
        });
              */

              //Let's simulate that there was a success receiving the following data
              var data = {
                VINET: {
                  message: "VINET Rocks!!"
                },
                WARTH: {
                  message: "WARTH is good company!!"
                },
                RICSU: {
                  message: "RICSU I don't like"
                },
                HANAR: {
                  message: "HANAR was my first customer"
                }
              }
              this.ajaxSuccess(data);
            },

            ajaxSuccess: function(data){
              this.getView().getModel("myOtherModel").setData(data)
            },

            myFormatter: function(sCustomerID, otherModelData){
              // This formatter will be executed for each table row. 
              // In the first parameter, the value binded in the first column
              // In the second parameter, the node you want of your second model (in this case the root node)

              //do whatever you want here and return a string for the 'text' property in this case
              if(otherModelData[sCustomerID]){
                // If there is a node in your second model with a node for the given Customer ID, then return the message into it
                return otherModelData[sCustomerID].message;
              }
              //Otherwise return empty string
              return "";
            }
        });



        /*** THIS IS THE "APPLICATION" CODE ***/
        // create a Model and assign it to the View
        // Using here the HEROKU Proxy to avoid a CORS issue
        var uri = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc"; // local proxy for cross-domain access
        var oNorthwindModel = new sap.ui.model.odata.ODataModel(uri, {
            maxDataServiceVersion: "2.0"
        }); 
        // instantiate the View
        var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
        // Set the OData Model
        myView.setModel(oNorthwindModel);


        myView.placeAt('content');
    </script>

</head>
<body id='content' class='sapUiBody'>
</body>

Answer 2

您可以扩展您的oData服务，以便该实体包含“webservice_result”属性。在数据提供程序类中，您将该属性留空，仅返回“A”和“B”值。

在调用oData服务并获得结果之后，您只需使用值为A，B的ajax调用其他Web服务，当您获得结果时，您只需设置给定行的“webservice_result”属性（实体））使用返回值 oDataModel.setProperty("row_x/webservice_result", value)

请参阅：

jQuery.ajax

setProperty method

SAPUI5：将OData与同一表中的其他Webservice相结合

2 个答案: