Hi Everyone, I am writing this blog for beginners on how to filter the data using function Import in SAP UI5 using OData which will be helpful for both front end and back end developer.
Function imports are used to do the GET and POST operations for the requirements , which are not possible by the standard operations available in OData.
Sometimes we may want to filter the data based on names or city(non key value), that time we can use function import.
We will implement the function import code inside EXECUTE_ACTION method by redefining this method in the DPC Extension class.
Steps to create Function Import as follows.
First we will create function import in odata.
Step1:- Create a table. Use t-code se11
CREATING A TABLE
enter the info
here we will create field and we will give data element.
click on data element of phone.
click yes
here you have to give domain name.
here give data type name and no. of character
then activate it.
Table
we have to go to enhancement category
click on more—extras— click on Enhancement category.
enhancement of data
select data class
now activate the table.
After this, Enter the data in table.
more—utilities—table content—create entries.
table entries
table data
Step2:- Go to SEGW and create a new project.
Give project name and save in local object or package.
project created
now your project will look like this
Step3:- Right click on Data Model and select import and then select DDIC structure.
Give Name and table name and click next.
Select table name and click next
select is Key and click on finish.
now generate runtime artifacts.
runtime artifacts generated
Step4:- Right Click on data model, select create and then click on function import.
Give Function import name and click on continue.
Fill like this.
Now project look like this .
Click on function import folder and fill the following.
What you want to search you can give the Name.
After this, generate runtime artifacts.
Step5:- Click on DPC_EXT and redine EXECUTE_ACTION.
Write this code in execute_action method.
Come back to segw.
Click on Service maintanence and register. Give Local and select continue and then select Local package.
After this ,Click on SAP Gateway client and select yes.
Step6:- Give Function Import name followed by what you want to display the data
Here I have given Designation=’DEVELOPER’.
So only developer data will be visible.
This is about oData function import.
—————————————————————————————————————————-
Function Import using UI5 in VS code
if you have not installed vs code, install vs code and node js.
open vs code— click on view—then command palette—then explore and install generator.
install all generator
Step1:- Create new project(click on view—then command palette—click on fiori: open application generator).
select basic
Step2:- Select service of function import.
data source as connect to a system.
system:- destination configuration
service as segw function import service.
click on next.
Give View name and project name and click on finish.
After this project template will be generated.
step3:- First we will create a json model to store the data.
click on model—create a file as data.json
json model
Configure in manifest.json
Here “data” is named model.
step4:- in View .
view name is Home.view.xml
Here I have used Select control to select the key and table to display the data based on selection.
<mvc:View xmlns:core="sap.ui.core" controllerName="functionimport.controller.Home"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<App >
<Page id="page" title="{i18n>title}">
<customHeader>
<Bar >
<contentLeft>
<Label />
<Title text="Designation"/>
<Select selectedKey="SELECT" id="designationsearchid" change="onPress">
<items>
<core:Item text="-----Select one------" key="SELECT"></core:Item>
<core:Item text="DEVELOPER" key="DEVELOPER"></core:Item>
<core:Item text="TESTER" key="TESTER"></core:Item>
</items>
</Select>
</contentLeft>
</Bar>
</customHeader>
<content>
<Table items="{data>/}">
<columns>
<Column >
<Text text="NAME"></Text>
</Column>
<Column >
<Text text="EMAIL"></Text>
</Column>
<Column >
<Text text="PHONE"></Text>
</Column>
<Column >
<Text text="AGE"></Text>
</Column>
<Column >
<Text text="DESIGNATION"></Text>
</Column>
</columns>
<items>
<ColumnListItem >
<cells>
<Text text="{data>Name}"></Text>
</cells>
<cells>
<Text text="{data>Email}"></Text>
</cells>
<cells>
<Text text="{data>Phone}"></Text>
</cells>
<cells>
<Text text="{data>Age}"></Text>
</cells>
<cells>
<Text text="{data>Designation}"></Text>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</App>
</mvc:View>
step5 :- in Controller
controller name :-Home.controller.js
in controller first we should get the selected key, and get the model.
Then we have to use callFunction where we need to give entityset , method and urlparameters.
onPress:function(){
debugger
var selectedKey=this.getView().byId("designationsearchid").getSelectedKey()
var oModel=this.getView().getModel('data')
var oContext=this;
var oDataModel=this.getOwnerComponent().getModel()
var arr=new Array();
oDataModel.callFunction(
"/ZAP_FunctionDemo", {
method:"GET",
urlParameters:{
DESIGNATION:selectedKey
},
success:function(oData,response){
arr=oData.results
oModel.setData(arr)
oContext.getView().setModel(oModel);
debugger
},
error:function(oError)
{
}
}
);
}
});
————————————output——————————–
run the program in terminal using npm start.
output view
on select of developer
on select of tester
Conclusion:-
Instead of Filtering the data using primary key, we can also filter the data based on non primary key.
