Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
ayaza2894
Explorer
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.

 

Thanks & regards

Ayaz Pasha

 
6 Comments
Labels in this area