SAPUI5 sap.m.Input — значения предложения

Как включить интерактивные предложения с чтением из моей службы odata для одной ячейки в моей таблице?

oTable.addColumn(new sap.ui.table.Column({
                template : new sap.m.Input({
                    value : column, // also works, its dynamic
                    textAlign : sap.ui.core.TextAlign.Center,
                    inputType : Text,
                    type : sap.m.InputType.Text,
                    showSuggestion : true,
                    liveChange : function() {
                        if (this.getValue().length > 0) {
                            var oModel = new sap.ui.model.json.JSONModel();
                            var value = this.getValue();
                            var serviceUrl = "/sap/opu/odata/SAP/XXXX_SRV/SuggestionsSet/?$filter=startswith(Key,'" + value + "')";
                            oModel.loadData(serviceUrl, null, false, "GET", false, false, null);

                            this.destroySuggestionItems();
                            for (var i = 0; i < oModel.oData.d.results.length; i++) {
                                this.addSuggestionItem(new sap.ui.core.Item({
                                    text: oModel.oData.d.results[i].Key,
                                }));
                            } // everything seems fine, but no Suggestion opens..


                        }
                    },
                }),
                visible : true,
            }));

input odata sapui5 search-suggestion
person dotchuZ    schedule 03.12.2015    source источник

Ответы (1)


arrow_upward
7
arrow_downward

См. исследованный пример. Однако в вашем случае модель является ODataModel, но это не имеет большого значения... Как вы можете видеть в коде примеров, вы также можете использовать

showSuggestion="true"
suggest="handleSuggest"
suggestionItems="{/ProductCollection}"

Затем в обработчике вы делаете это (также скопировано из примера):

handleSuggest: function(oEvent) {
    var sTerm = oEvent.getParameter("suggestValue");
    var aFilters = [];
    if (sTerm) {
        aFilters.push(new Filter("Name", sap.ui.model.FilterOperator.StartsWith, sTerm));
    }
    oEvent.getSource().getBinding("suggestionItems").filter(aFilters);
}

В основном вы - создаете один или несколько фильтров - получаете привязку для агрегации suggestionItems - вызываете .filter(...) в привязке и передаете фильтр(ы)

Нет необходимости кодировать этот материал вручную (например, запрос GET и т. д.).

Вот вам пример запуска (запуск через jsbin), см. ниже. В вашем случае все, что вы делаете, это привязка к

suggestionItems="{path:'/SuggestionSet', templateShareable:false}">

Затем в обработчике handleSuggest вы получите значение свойства Key набора SuggestionSet, которое принадлежит текущему/соответствующему полю ввода, чтобы создать экземпляр нового фильтра. Я думаю, вы можете получить Key из BindingContext...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SAPUI5 single file template | nabisoft</title>
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
            <!-- use "sync" or change the code below if you have issues -->

            <!-- XMLView -->
            <script id="myXmlView" type="ui5/xmlview">
                <mvc:View
                    controllerName="MyController"
                    xmlns="sap.m"
                    xmlns:core="sap.ui.core"
                    xmlns:mvc="sap.ui.core.mvc">

                    <Table
                        id="myTable"
                        growing="true"
                        growingThreshold="10"
                        growingScrollToLoad="true"
                        busyIndicatorDelay="0">
                        <columns>
                            <Column>
                                <Text text="Customer ID"/>
                            </Column>
                            <Column>
                                <Text text="Company Name"/>
                            </Column>
                        </columns>
                        <items>
                            <!-- filled via bindItems() in controller -->
                        </items>
                    </Table>

                </mvc:View>
            </script>

            <!-- XML Fragment -->
            <script id="myXMLFragment" type="ui5/fragment">
                <core:FragmentDefinition
                    xmlns="sap.m"
                    xmlns:core="sap.ui.core">
                    <ColumnListItem type="Active">
                        <cells>
                            <ObjectIdentifier title="{CustomerID}"/>

                            <Input
                                value="{CompanyName}"
                                showSuggestion="true"
                                suggest="handleSuggest"
                                suggestionItems="{path:'/Customers', templateShareable:false}">
                                <suggestionItems>
                                    <core:Item text="{CompanyName}" />
                                </suggestionItems>
                            </Input>

                        </cells>
                    </ColumnListItem>
                </core:FragmentDefinition>
            </script>


        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";

                //### Controller ###
                sap.ui.controller("MyController", {
                    onInit : function () {

                        this.getView().setModel(
                            new sap.ui.model.odata.v2.ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", {
                                json : true,
                                useBatch : false
                            })
                        );

                        var sPath = "/Customers";
                        var oTable = this.byId("myTable");
                        var oTemplate =  sap.ui.xmlfragment({
                            fragmentContent : jQuery("#myXMLFragment").html()
                        });

                        oTable.bindItems(sPath, oTemplate, null /*oSorter*/, null /*aFilters*/);
                    },
                    handleSuggest: function(oEvent) {
                        var sTerm = oEvent.getParameter("suggestValue");
                        var aFilters = [];
                        if (sTerm) {
                            aFilters.push(new Filter("CompanyName", sap.ui.model.FilterOperator.StartsWith, sTerm));
                        }
                        oEvent.getSource().getBinding("suggestionItems").filter(aFilters);
                    }
                });

                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");

            });
        </script>

    </head>

    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>
person Nabi    schedule 03.12.2015
comment
не совсем то, о чем я просил, я получил много ячеек, в каждой ячейке есть другие элементы предложения, поэтому я загружаю их динамически во время liveChange с запросом oData... - person dotchuZ; 03.12.2015
comment
Я вижу, что для каждой ячейки ваш запрос GET выглядит одинаково, за исключением другого значения. value - это sTerm в моем предложении. Это означает, что вы можете связать предложения вашего шаблона с {/SuggestionSet}, верно? Почему это не сработает? - person Nabi; 03.12.2015
comment
@zyrex Я обновил ответ и добавил рабочий пример. Это то, что вы ищете? - person Nabi; 03.12.2015