SAP Fiori problem reading data

[enginbeyazgul]

Hello, im new to fiori development and I have a problem like everyone else does.

There are 2 data sets coming from odata service. I think reading this data sets in my controller and i writing datasets into input-assisted. While i run fiori application and test this status. First data sets is correctly returning into first input with input search-help. But second data sets returning free space as much as the number of second data sets with search-help.

Whichever one I click on first works correctly. The other one returning free space.

I am sharing the lines of code and images that I need for your help. Thank you in advance, best regards.

Controller page:

onPersonelRequest: function (oEvent) {
                var oModel = this.getOwnerComponent().getModel();
                var jModel = new sap.ui.model.json.JSONModel();
                console.log("personel");
                console.log(jModel);
                oModel.read("/zzimmet_003Set", {
                    success: function (odata) {
                        jModel.setData(odata);
                        this.getView().setModel(jModel);
                    }.bind(this), error: function (oError) {
                        console.log(oError);
                    }
                });
                var sInputValue = oEvent.getSource().getValue(),
                    oView = this.getView();
                if (!this._pValueHelpDialog) {
                    this._pValueHelpDialog = Fragment.load({
                        id: oView.getId(),
                        name: "zzzimmet.fragment.Personel",
                        controller: this
                    }).then(function (oDialog) {
                        oView.addDependent(oDialog);
                        return oDialog;
                    });
                }
                this._pValueHelpDialog.then(function (oDialog) {
                    oDialog.getBinding("items").filter([new Filter("Sicil", FilterOperator.Contains, sInputValue)]);
                    oDialog.open(sInputValue);
                });
            },
            onPersonelSearch: function (oEvent) {
                var sValue = oEvent.getParameter("value");
                var oFilter = new Filter("Sicil", FilterOperator.Contains, sValue);
                oEvent.getSource().getBinding("items").filter([oFilter]);
            },
            onPersonelClose: function (oEvent) {
                var oSelectedItem = oEvent.getParameter("selectedItem");
                oEvent.getSource().getBinding("items").filter([]);
                if (!oSelectedItem) {
                    return;
                }
                this.byId("personelInput").setValue(oSelectedItem.getTitle());
            },
            onMalzemeRequest: function (oEvent) {
                var oModel = this.getOwnerComponent().getModel();
                var jModel = new sap.ui.model.json.JSONModel();
                console.log("malzeme");
                console.log(jModel);
                oModel.read("/zzimmet_002Set", {
                    success: function (odata) {
                        jModel.setData(odata);
                        this.getView().setModel(jModel);
                    }.bind(this), error: function (oError) {
                        console.log(oError);
                    }
                });

                var sInputValue = oEvent.getSource().getValue(),
                    oView = this.getView();
                if (!this._pValueHelpDialog) {
                    this._pValueHelpDialog = Fragment.load({
                        id: oView.getId(),
                        name: "zzzimmet.fragment.Malzeme",
                        controller: this
                    }).then(function (oDialog) {
                        oView.addDependent(oDialog);
                        return oDialog;
                    });
                }
                this._pValueHelpDialog.then(function (oDialog) {
                    oDialog.getBinding("items").filter([new Filter("Tanim", FilterOperator.Contains, sInputValue)]);
                    oDialog.open(sInputValue);
                });
            },
            onMalzemeSearch: function (oEvent) {
                var sValue = oEvent.getParameter("value");
                var oFilter = new Filter("Tanim", FilterOperator.Contains, sValue);
                oEvent.getSource().getBinding("items").filter([oFilter]);
            },
            onMalzemeClose: function (oEvent) {
                var oSelectedItem = oEvent.getParameter("selectedItem");
                oEvent.getSource().getBinding("items").filter([]);
                if (!oSelectedItem) {
                    return;
                }
                this.byId("malzemeInput").setValue(oSelectedItem.getTitle());
            }

View page:

<Input
                    width="500px"
                    id="personelInput"
                    class="sapUiSmallMarginTop"
                    placeholder="Personel numarası"
                    textAlign="Center"
                    showSuggestion="true"
                    showValueHelp="true"
                    valueHelpRequest="onPersonelRequest"
                    suggestionItems="{/results}">
                    <suggestionItems>
                        <core:Item text="{Sicil}" />
                    </suggestionItems>
</Input>
<Input
                    width="500px"
                    id="malzemeInput"
                    class="sapUiSmallMarginTop"
                    placeholder="Zimmet malzemesi seçin"
                    textAlign="Center"
                    showSuggestion="true"
                    showValueHelp="true"
                    valueHelpRequest="onMalzemeRequest"
                    suggestionItems="{/results}">
                    <suggestionItems>
                        <core:Item text="{Tanim}" />
                    </suggestionItems>
</Input>

Fragments:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
	<SelectDialog
		id="selectDialog"
		title="Personel seçin"
		items="{/results}"
		search=".onPersonelSearch"
		confirm=".onPersonelClose"
		cancel=".onPersonelClose">
		<StandardListItem
			title="{Sicil}"
			description="{Ad}" />
	</SelectDialog>
</core:FragmentDefinition>

-

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
	<SelectDialog
		id="selectDialog"
		title="Zimmet malzemesi seçin"
		items="{/results}"
		search=".onMalzemeSearch"
		confirm=".onMalzemeClose"
		cancel=".onMalzemeClose">
		<StandardListItem
			title="{Tanim}"
			description="{Model}" />
	</SelectDialog>
</core:FragmentDefinition>

State of screen is view like below picture while clicked search help.

-

[AlexNecula · Accepted solution]

You are using this._pValueHelpDialog for both dialogs. when you open one, this will contain the reference to the first dialog. After you press the second value help, the variable this._pValueHelpDialog will not be changed. Use different variables for each dialog.

[enginbeyazgul · Accepted solution]

I changed variable names like this: "_pValueHelpDialogA" and "_pValueHelpDialogB" but now too one of the dialogues does not open.

[AlexNecula · Accepted solution]

enginbeyazgul, are you sure you have changed everywhere needed?

[enginbeyazgul · Accepted solution]

I checked again and changed it everywhere.

[AlexNecula · Accepted solution]

Can you show the updated code?

[enginbeyazgul · Accepted solution]

onPersonelRequest: function (oEvent) {
                var oModel = this.getOwnerComponent().getModel();
                var jModel = new sap.ui.model.json.JSONModel();
                console.log("personel");
                console.log(jModel);
                oModel.read("/zzimmet_003Set", {
                    success: function (odata) {
                        jModel.setData(odata);
                        this.getView().setModel(jModel);
                    }.bind(this), error: function (oError) {
                        console.log(oError);
                    }
                });
                var sInputValue = oEvent.getSource().getValue(),
                    oView = this.getView();
                    debugger;
                if (!this._pValueHelpDialogA) {
                    this._pValueHelpDialogA = Fragment.load({
                        id: oView.getId(),
                        name: "zzzimmet.fragment.Personel",
                        controller: this
                    }).then(function (oDialog) {
                        oView.addDependent(oDialog);
                        return oDialog;
                    });
                }
                this._pValueHelpDialogA.then(function (oDialog) {
                    oDialog.getBinding("items").filter([new Filter("Sicil", FilterOperator.Contains, sInputValue)]);
                    oDialog.open(sInputValue);
                });
            },
            onPersonelSearch: function (oEvent) {
                var sValue = oEvent.getParameter("value");
                var oFilter = new Filter("Sicil", FilterOperator.Contains, sValue);
                oEvent.getSource().getBinding("items").filter([oFilter]);
            },
            onPersonelClose: function (oEvent) {
                var oSelectedItem = oEvent.getParameter("selectedItem");
                oEvent.getSource().getBinding("items").filter([]);
                if (!oSelectedItem) {
                    return;
                }
                this.byId("personelInput").setValue(oSelectedItem.getTitle());
            },
            onMalzemeRequest: function (oEvent) {
                var oModel = this.getOwnerComponent().getModel();
                var jModel = new sap.ui.model.json.JSONModel();
                console.log("malzeme");
                console.log(jModel);
                oModel.read("/zzimmet_002Set", {
                    success: function (odata) {
                        jModel.setData(odata);
                        this.getView().setModel(jModel);
                    }.bind(this), error: function (oError) {
                        console.log(oError);
                    }
                });

                var sInputValue = oEvent.getSource().getValue(),
                    oView = this.getView();
                    debugger;
                if (!this._pValueHelpDialogB) {
                    this._pValueHelpDialogB = Fragment.load({
                        id: oView.getId(),
                        name: "zzzimmet.fragment.Malzeme",
                        controller: this
                    }).then(function (oDialog) {
                        oView.addDependent(oDialog);
                        return oDialog;
                    });
                }
                this._pValueHelpDialogB.then(function (oDialog) {
                    oDialog.getBinding("items").filter([new Filter("Tanim", FilterOperator.Contains, sInputValue)]);
                    oDialog.open(sInputValue);
                });
            },
            onMalzemeSearch: function (oEvent) {
                var sValue = oEvent.getParameter("value");
                var oFilter = new Filter("Tanim", FilterOperator.Contains, sValue);
                oEvent.getSource().getBinding("items").filter([oFilter]);
            },
            onMalzemeClose: function (oEvent) {
                var oSelectedItem = oEvent.getParameter("selectedItem");
                oEvent.getSource().getBinding("items").filter([]);
                if (!oSelectedItem) {
                    return;
                }
                this.byId("malzemeInput").setValue(oSelectedItem.getTitle());
            }

-

[AlexNecula · Accepted solution]

I can't see the full error from your screenshot but I guess it is saying something about duplicate ID. You are probably using the same ID in both fragments. IDs should be unique throughout the app.

[enginbeyazgul · Accepted solution]

Worked! It worked correctly when I changed the fragment IDs. Thank you for your interest. Regards.