I added an Input and Button to the screen (MainView Xml) for an example.
I connected the ValueHelpRequest of the Input to the onValueRequest function.
<mvc:View controllerName="modelbinding.modelbinding.controller.Main"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m"
xmlns:f="sap.ui.layout.form">
<Page id="page" title="{i18n>title}">
<content >
<VBox class ="sapUiSmallMargin"
>
<f:SimpleForm id="SimpleFormDisplay354"
editable="false"
layout="ResponsiveGridLayout"
title="Model Binding"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="4"
emptySpanL="4"
emptySpanM="4"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Input id="followersInput" value="{main>/FollowersCode}" placeholder="Enter Follower Code" showSuggestion="true" showValueHelp="true" valueHelpRequest=".onValueHelpRequest" />
<Button class="Btn" press="onButtonPress" activeIcon="" ariaHasPopup="None" enabled="true" icon="empty string" iconDensityAware="true" iconFirst="true" text="Send" textDirection="Inherit" type="Emphasized" width="8%" />
</f:content>
</f:SimpleForm>
</VBox>
</content>
</Page>
</mvc:View>
Ardından kullanacağım kütüphaneleri Controller.Js’e ekledim.
sap.ui.define(
[
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/core/Fragment",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator",
"sap/m/MessageToast",
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (
Controller,
JSONModel,
Fragment,
Filter,
FilterOperator,
MessageToast
)
Ardından main modelimizi manifest.json’a tanımlıyoruz.
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "modelbinding.modelbinding.i18n.i18n"
}
},
"main": {
"type": "sap.ui.model.json.JSONModel",
"settings": {},
"preload": false
}
Then, I defined an array named Followers for Data Bind. Then, I bound the properties of oMainModel to Followers.
return Controller.extend("modelbinding.modelbinding.controller.Main", {
_aFollowers: [
{ FollowersCode: "Ali001", FollowersName: "Ali" },
{ FollowersCode: "Veli002", FollowersName: "Veli" },
{ FollowersCode: "Zeynep003", FollowersName: "Zeynep" },
],
onInit: function () {
var oMainModel = this.getOwnerComponent().getModel("main");
oMainModel.setProperty("/Followers", this._aFollowers);
},
After that, I created a folder named Fragments under WebApp and added Fragments Xml.
This Xml defines the Title and Description that will come in the Search Help. Here, I entered the names of the Javascript functions we will use.
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<SelectDialog
id="selectDialog"
title="Followers"
items="{main>/Followers}"
search=".onValueHelpSearch"
confirm=".onValueHelpClose"
cancel=".onValueHelpClose">
<StandardListItem
title="{main>FollowersCode}"
description="{main>FollowersName}" />
</SelectDialog>
</core:FragmentDefinition>
I am creating a function to make it easier for the user to select a specific input value by filtering the values in the “FollowersName” and “FollowersCode” fields.
After giving the function the oEvent parameter and reaching the source by saying oEvent.getSource(), I create the “sInputValue” variable to get the user’s input by saying .getValue().
Then I assigned the oView variable to the view in the function by saying getView().
Then, I checked whether the “_pValueHelpDialog” variable was created or not in the code. If this variable is not defined yet, I said “Load a Fragment”.
After saying Fragment. Load for the Value Help variable, I opened a curly bracket and
Set the ID to the View’s ID
Set the name to the path of the fragments section in our project
The controller was defined in the function with “this”.
This loading process returns a Promise with then, and the Promise returns a result when the process is completed. Therefore, the result of the Promise is assigned to the “_pValueHelpDialog” variable, so it is loaded only once and not reloaded afterward.
Then, assuming that the “pValueHelpDialog” variable exists, I created a “Filter” object.
This filter filters the matching values by comparing the values in the “FollowersName” and “FollowersCode” fields with the input value in the “sInputValue” variable.
Then, the code assigns two data models named “main” and “i18n” to the “oDialog” variable using the “oDialog.setModel” method and finally opens the Search Help using the “oDialog.open” method.
onValueHelpRequest: function (oEvent) {
var sInputValue = oEvent.getSource().getValue(),
oView = this.getView();
if (!this._pValueHelpDialog) {
console.log(!this._pValueHelpDialog);
this._pValueHelpDialog = Fragment.load({
id: oView.getId(),
name: "modelbinding.modelbinding.fragments.ValueHelpDialog",
controller: this,
}).then(function (oDialog) {
oView.addDependent(oDialog);
return oDialog;
});
}
var _this = this;
this._pValueHelpDialog.then(function (oDialog) {
// Create a filter for the binding
oDialog
.getBinding("items")
.filter([
new Filter("FollowersName", "FollowersCode" ,FilterOperator.Contains, sInputValue),
]);
// Open ValueHelpDialog filtered by the input's value
oDialog.setModel("main", _this.getView().getModel("main"));
oDialog.setModel("i18n", _this.getView().getModel("i18n"));
oDialog.open(sInputValue);
});
After that, I defined another variable with the oEvent parameter to perform the search operation.
The code “oEvent.getParameter(“value”)” allows getting the “value” parameter from the “oEvent” object using the “getParameter” method. This contains a string that includes the search term entered by the user in the Search Help.
The code “new Filter(“FollowersName”, FilterOperator.Contains, sValue)” creates a “Filter” object. FilterOperator.Contains compares the input data entered by the user in the “FollowersName” array and returns the objects containing that data. (I compared the input name entered by the user with the array in the data model.)
Finally, I connected the items with the source of the oEvent using “oEvent.getSource().getBinding(“items”)”. I also filtered this connection with the filter we created above using the user’s input parameters.
onValueHelpSearch: function (oEvent) {
var sValue = oEvent.getParameter("value");
var oFilter = new Filter("FollowersName", FilterOperator.Contains, sValue);
oEvent.getSource().getBinding("items").filter([oFilter]);
},
Next, I will write the necessary function to process the selected items when the Search Help is closed.
I assign the selected object to a variable using the oEvent parameter.
Then, I use “oEvent.getSource()” to access the “Search Help” object. Then, I access the “Binding” object that is bound to the “items” element using “getBinding”. I cleared the filter by giving an empty array to the filter.
If the user has not selected any item on the screen, I end the function with a return statement.
Before closing the screen, I need to set the model properties (Property) that I will use in the following function.
I set the value of the “FollowersCode” property equal to the title of the selected item. The title acts as the key information of the item.
The above value is the Title header, and the below value is the Description field.
onValueHelpClose: function (oEvent) {
var oSelectedItem = oEvent.getParameter("selectedItem");
oEvent.getSource().getBinding("items").filter([]);
if (!oSelectedItem) {
return;
}
var oMainModel = this.getView().getModel("main");
oMainModel.setProperty("/FollowersCode", oSelectedItem.getTitle());
},
Next, there is a function that will run when our button is pressed.
I reassigned our main model to a variable. Then, I assigned the FollowersCode property from this variable to a string variable.
Next, using sap.m.MessageToast.show, I instructed the program to display a message on the screen saying “Show this Follower Code” if this variable is not empty.
onButtonPress: function (oEvent) {
var oMainModel = this.getView().getModel("main");
var sFollowersCode = oMainModel.getProperty("/FollowersCode");
if (sFollowersCode) {
sap.m.MessageToast.show(
"Followers Code" + sFollowersCode + "Has Been Sent"
);
}
},
You can access the code I wrote from the following link:
https://github.com/kaancancalkan/Medium-Blog/tree/main/modelbinding
No Comments