You are on page 1of 85

qwertyuiopasdfghjklzxcvb

nmqwertyuiopasdfghjklzxc
vbnmqwertyuiopasdfghjkl
SAP-FIORI
zxcvbnmqwertyuiopasdfgh
jklzxcvbnmqwertyuiopasdf
ghjklzxcvbnmqwertyuiopa
sdfghjklzxcvbnmqwertyuio
pasdfghjklzxcvbnmqwerty
uiopasdfghjklzxcvbnmqwe
rtyuiopasdfghjklzxcvrtyui
opasdfghjklzxcvbnmqwert
yuiopasdfghjklzxcvbnmqw
ertyuiopasdfghjklzxcvbnm
qwertyuiopasdfghjklzxcvb
nmqwertyuiopasdfghjklzxc
vbnmrtyuiopasdfghjklzxcv
bnmqwertyuiopasdfghjklz

SAP-FIORI

as

Class-1:

Odata Netweaver Gateway Services:
Advantage Of Odata Abap Service:
Any Front End Application Can Consume Odata Abap Services,
And Can Send/Receive The Data From Sap Backend System.
Odata Abap Services Are Developed Using Abap Programming.
Front End Application Can Be Any Technology( Sap Ui5/Fiori/Php/Java)
Odata Abap Service Means = "Open" Data Protocal Services
I.E Any Front End Can Consume Our Abap Services

SAP-FIORI

as
Odata Abap Services Are Developed Under Sap Netweaver Gateway Server.
Sap Nw Gateway Server Supports Two Formats:
1)Xml Format
2)Json Format
Xml Format , Json Format Are Independent Of Front End Apps
Any Front End App Can Send/Receive Data By Consuming Odata Abap Service
Strategy:
From Now, With Odata ( Only Database Operations Will Be In Abap.)
But Screens Can Be Sap Ui5/Fiori
Note : With The Above Strategy,
Sap Ui5/Fiori Screens Are Accessible From Intranet, Internet
Sap Ui5/Fiori Screens Are Acessible From Mobile, Tablet, Desktop/Laptop
Sap Ui5/Fiori Screens Are Good At Look And Feel ( Good At Appearance )
Sap Ui5/Fiori Screens Are Light Weight Screens
Sap Ui5/Fiori Screens Are Loaded Fast ( Bcoz They Are Light Weight Screens )
Sap Ui5/Fiori Screene Are Browser Based Screens( Web Based Screens )
Sap Ui5/Fiori Screens Are Designed With Almost By Using 189 Screen Elements
Xml Format :
If Server Want To Send Or Receive The Records In Xml Format,
<Empid>
1001 </Empid>
<Name>
Vijay </Name>
<Salary>
2000 </Salary>
<Position>
Analyst
</Position>
<Empid>
<Name>
<Salary>
<Position>

1002 </Empid>
Ajay </Name>
3000
</Salary>
Analyst
</Position>

<Empid>
<Name>
<Salary>
<Position>

1003 </Empid>
Suman
</Name>
4000
</Salary>
Manager
</Position>

<Empid>
10034</Empid>
<Name>
Kiran </Name>
<Salary>
5000
</Salary>
<Position>
Manager
</Position>
_____________________________________________________________________
Note : Gateway Server Will Fetch Data From Sap Backend System.
And Gateway Server Will Send/Receive Data To/From Front End In Xml/Json Format
__________________________________________________________________________________________
Json Format:
If Server Want To Send/Recieve Data In Json Format.

SAP-FIORI

as

{
Empid
: 1001
Name : Vijay
Salary
: 2000
Position : Analyst
}
{
Empid
: 1002
Name : Ajay
Salary
: 3000
Position : Analyst
}
{
Empid
: 1003
Name : Suman
Salary
: 4000
Position : Manager
}
{
Empid
: 1004
Name : Kiran
Salary
: 5000
Position : Manager
}
Note : Backend Server To Gateway Server
Gateway Server To Front End Application
Xml Format And Json Are Independent Of Front End Applications
__________________________________________________________________
Crud Operations Means = Create , Read , Update, Delete
Note : As A Abaper. We Implement Our Database Operations According To
Below Diagram
Http Method
Crud Operation
Abap
_____________________________________________________________________________
Get
Read ( Single Record)
Select Single *
Get
Read ( Multiple Records) Select *
Post
Create
Insert
Put
Update
Update
Delete
Delete
Delete
_____________________________________________________________________________
Note : For Developing Odata Abap Services, We Use Transaction Code = Segw
Segw --> Sap Netweaver Gateway Service Builder
____________________________________________________________________________
Note: Sap Odata Abap Services = Segw
Sap Ui5 /Fiori
= Sap Web Ide Tool

SAP-FIORI as Sap Ui5 /Fiori = Eclipse( Under Eclipse Add Sap Ui5+Fiori Plugins) Class-2: Transaction Codes For Odata Service Developement: __________________________________________________ Segw Se11 Se24 Se37 /Iwfnd/Gw_Client /Iwfnd/Error_Log /Iwfnd/Apps_Log /Iwfnd/View_Log /Iwfnd/Cache_Cleanup /Iwfnd/Med_Activate /Iwfnd/Srv_Validate /Iwfnd/Reg_Service /Iwfnd/Maint_Service /Iwfnd/Iwf_Activate /Iwfnd/Moc_Parallel /Iwfnd/Virus_Scan /Iwfnd/Traces Vscantrace Sicf Rz10 Rz20 Sm59 Spro Pfcg St22 Lpd_Cust /Ui5/Theme_Tool /Ui5/Theme_Designer .

__________________________________________________ Entity Type : It Is Collection Of Fields/Properties Entity : It Is To Hold Single Record Entityset : It Is To Hold Collection Of Records Odata Abap Project Contains: _________________________ 1)Data Model 2)Service Implementation 3)Service Maintainence 4)Runtime Artifacts __________________________ Runtime Artifacts : ___________________ 1) Zcl_<Projectname>_Mpc ----->Model Provider Class 2) Zcl_<Projectname>_Mpc_Ext ----->Model Provide Extension Class 3) Zcl_<Projectname>_Dpc ----->Data Provider Class 4) Zcl_<Projectname>_Dpc_Ext ----->Data Provider Extension Class 5) Zcl_<Projectname>_Mdl ----->Registered Model 6) Zcl_<Projectname>_Srv ----->Registered Service _______________________________________________________________________ Note: All The Above Clases Are Generated By Framework. And These Classes Are Used By Framework For Execution Of Service At Runtime ____________________________________________________________________________ Note: As A Developer We Handle Our Functionalities Inside These Runtime Artifacts And In These Runtime Artifacts . We Can Use Our Abap Syntaxes Whenever Wherever Necessary Except "Abap Screen Related Statements" _______________________________________ ______________________________________________________________________________________________ Abap Statements Which Can Be Used Under Odata Abap Service Developement Select Select With Where Clause Select With Inner Joins Select With For All Entries Delete Update Insert Modify Append Sort Move Move-Corressponding .SAP-FIORI as Tools ______________________________________________________ Eclipse With Sap Ui5 Plugins And Sap Fiori Plugins Sap Web Ide ( Old Name Is River Ide ) ______________________________________________________ Terms Commonly Used In Odata Abap Gateway Services.

Time Edm.Sbyte Edm.Double Edm.String Edm.Single Edm.Byte Edm. Structures Call Function 'Fm/Rfc/Bapi' ( Which Are Not Related Abap Screens ) If--Elseif..Binary . Tables.Sy-Subrc.Sy-Index.Float Edm. Loop At Itab To Wa.Int64 Edm.Int16 Edm..Condense.Sy-Uzeit.Sy-Tabix Etc.Sy-Datum.Int32 Edm.SAP-FIORI as Internal Table Operations Workarea Operations String Operations -->Concatenate.. ____ Entity Data Model Edm. ________________________________________________________________________ Data Types In Odata Abap Services: Note : Odata Datatypes Are Also Known As 'Edm" Data Types..Boolean Edm. Data Elements..Decimal Edm. Table Types. Translate.Replace. Etc. Case When Endcase Clear Refresh ________________________________________________________________________ Abap Screen Related Statments Cannot Be Used In Odata Abap Service Development Call Transaction 'Va01' X Call Screen '200' X Write X Selectionn-Screen X At-Initialization X At Line-Selection X Top-Of-Page X Top-Of-List X Sy-Lsind X Etc. Views..Datetime Edm.Sy-Lang. Search Helps. Shift.Guid Edm. Data Dictionary(Se11) -->Domains... // Endloop. Split System Variables -->Sy-Uname..

E _Create_Entity _Get_Entity _Get_Entityset _Update_Entity _Delete_Entity For For For For For Insert Functionality --C Fetch Functionality ( Single Record ) --R Fetch Functionality ( Multiple Records ) --R Update Functionality --U Delete Functionality --D . Import Ddic Structure Provide Entity Type = Emp Provide Ddic Structure = Zuserinfo Select Checkbox To Create Entity Set Also Click On Next Chose Required Fields From Ddic Structure Select One Of The Field As Key Field Click On Continue. Entity Type. We Have Equivalent Odata Edm Data Type Refer The Field Abap . & Entity Set Is Created If We Click On Icon( Runtime Objects ) Then Automatically Below Options Are Generated _Mpc_Ext _Mpc _Dpc_Ext _Dpc _Mdl _Srv _______________________________________________________________ Note : In Odata Abap Services. Note : Now. Fields Are Known As "Properties" ----------____________________________________________________________________ Note : Each Entityset Contains -> 5 Methods ( Crud Operations ) I.SAP-FIORI as _________________________________________________________________________ Note : For Each Abap Data Type .To Develope Odata Service _________________________________________________________________________ Class-3 Creating Odata Service : ---------------------------Got Segw Tcode : Create A Zproject_1 With Default Settings Save It In Package Continue Right Click On Data Model..

Framework Will Generate Separate Crud Operations/Methods _______________________________________________________________________________ Note : When We Refer Abap Fields Inside Odata Services. We Should Not Implement Custom Code We Should Not Modify/Change The Autogenerated Code Model Provider Class . Contains "Meta Data" Of Our Service ____________ What Is Meta Data ? Ans) Name Of Entity Type Name Of Entity Set Each Field Name Of Entity Type Each Field Data Type Of Entity Type Each Field Length Of Entity Type Name Of Ddic Structure Used In Service And Other Properties Of Each Field Class-4: .SAP-FIORI as ___________________________________________________________________________ Note : Under Single Odata Abap Service. Framework Automatically Converts Abap Data Types Into Its Eqivalent Odata Edm Data Types _________________________________________________________________________________________ Note : Under Model Provider Class ( Mpc ): ___________________________________ As A Developer . We Can Have Many Entity Types We Can Have Many Entity Sets ___________________________________________________________________________ Note : For Each Entity Set .

______________________________________________________________________________ Note : All The Classes Generated By Odata Framework Are "Global Classes" ____________________________________________________________________________ The Main Methods Of Data Provider Extension Class _____________________________________________________ 1) _Create_Entity * 2) _Delete_Entity * 3) _Update_Entity * 4) _Get_Entity * 5) _Get_Entityset * 6) ~Create_Stream * 7) ~Read_Stream * 8) ~Update_Stream * 9) ~Delete_Stream * 10)~Execute_Action * 11) Copy_Data_To_Ref * 12) Commit_Work * . A Developer Need To Implement Your Functionalities In "Data Provider Extension Class".SAP-FIORI as Creating Entity Type ( Maintains The Required Fields ) Creating Entity Set Runtime Artifacts __________________________ Behaviour Of Data Provider Extension Class Or How Data Provider Extension Class Is Generated Data Provider Extension Class Can Contain 1) Methods Of One Super Class (Data Provider Class ) 2) Methods Of Multiple Interfaces 3) Methods Additionally ( If Required ) ______________________________________________________ Note : As Part Of Odata Services.

Table Structure And Table Type Is Autogenerated When We Create Entity Type Note : Each Entity Type Contains Two Options 1) Table Structure 2) Table Type Note : Table Structure . And They Are Re-Generated According To The "Latest Metadata" ____________________________________________________________________________ Note : Dpc_Ext And Mpc_Ext Clases Are Not Re-Generated Model Provider Class( Mpc ): __________________________ Under Mpc Class.SAP-FIORI as 13) Rfc_Exception_Handling 14) Get_Message_Container * 15) ~Operation_Start 16) ~Operation_End 17) ~Init 18) ~Get_Expanded_Entity * 19) ~Get_Expanded_Entityset * 20) ~Changeset_Begin 21) ~Changeset_End 22) ~Changeset_Process 23) ~Cleanup ________________________________________________________________________________________ Note : Dpc_Ext Class Contains Methods . Which Developer Needs To Implement Functionalities Which Are Executed Automatically According To Framework Rules & Guidelines __________________________________________________________________________________________ Note : Only Dpc Class & Only Mpc Class Is Re-Generated . Automatically .Table Type Are Generated As Part Of Mpc Class _______________________________________________________________________ Programmatical Declarations: ____________________________________ I Want To Hold Single Record Data : Workarea Type Zcl_Mpc=>Tablestucture ________________________________________________________________ I Want To Hold Collection Of Records Data : Itab Type Zcl_Mpc=>Tabletype _______________________________________________________________ I Want To Hold Single Field Value Of Record .

Class-5: .SAP-FIORI as Data : Firstname Type Zcl_Mpc=>Tablestructure-Firstname Data : Salary Type Zcl_Mpc=>Tablestructure-Salary. Data : Firstname Type String. _______________________________________________________________ Data : Salary Type I.

SAP-FIORI as Behaviour Of Various Methods Available In Odata Abap Services --------------------------------------------------------------Note : Odata Abap Services Are Responsible For Taking Input From Front End Apps(Ui5/Fiori ) Are Responsible For Sending Output To Front End Apps(Ui5/Fiori ) _______________________________________________________________ Get_Entityset Method Io_Tech_Request_Context Will Accept Input Et_Entityset Will Send Output .

SAP-FIORI as Get_Entity Method Io_Tech_Request_Context Will Accept Input Er_Entity Will Send Output _________________________________________________________________ Create_Entity Method Io_Data_Provider Will Accept Input Er_Entity Will Send Output __________________________________________________________________ Update_Entity Method Io_Data_Provider Will Accept Input Er_Entity Will Send Output ___________________________________________________________________ Delete_Entity Method Io_Tech_Request_Context Will Accept Input ___________________________________________________________________ Get_Stream Method Io_Tech_Request_Context Will Accept Input Er_Stream Will Send Output ____________________________________________________________________ Create_Stream Method Is_Media_Resource Will Accept Input Io_Tech_Request_Context Will Accept Input Er_Entity Will Send Output __________________________________________________________________ Update_Stream Method Is_Media_Resource Will Accept Input Io_Tech_Request_Context Will Accept Input ____________________________________________________________________ Delete_Stream Method Io_Tech_Request_Context Will Accept Input ___________________________________________________________________ Execute_Action Method Io_Tech_Request_Context Will Accept Input Er_Data Will Send Output ___________________________________________________________________ Get_Expanded_Entity Method Io_Tech_Request_Context Will Accept Input .

We Can Consume Rfc/Bapi Functionalities. Note : While Consuming Rfc/Bapi Functionalities In Odata Abap Services. We Can Use Two Techniques 1) With Mapping ( The Code Is Generated ) 2) Without Mapping ( Developer Need To Write Code ) ___________________________________________________________________________ . We Make Use Of "Method Parameters". Note : Method Parameters Are Responsible For Data Transfer Between Odata Abap Service And Front_End Apps(Ui5/Fiori/Php/Net/Java) Note : Odata Abap Services Will Send Or Receive Data From Any Front End Technnologies _______________________________________________________________________________________________ Note : In Odata Abap Services.SAP-FIORI as Er_Entity Will Send Output Et_Expanded_Tech_Clauses Will Send Output ____________________________________________________________________ Get_Expanded_Entityset Method Io_Tech_Request_Context Will Accept Input Er_Entityset Will Send Output Et_Expanded_Tech_Clauses Will Send Output _____________________________________________________________________ Copy_Data_To_Ref Method Is_Data Will Accept Input Cr_Data Will Send Ouput __________________________________________________________________ Get_Message_Container Method Ro_Message_Container Will Send Output _________________________________________________________________ Init Method Io_Context Will Accept Input __________________________________________________________________ Note : As A Developer .

SAP-FIORI as Class-6: .

SAP-FIORI as Developing Odata Abap Gateway Service : Entity Type = Collection Of Fields Entity = It Is Like Workarea To Hold Single Record Entity Set = It Is Like Internal Table To Hold Collection Of Records Note : Et_Entityset It Is Like An Internal Table . Step2 : Right Click Data Model. ) _____________________________________________________________________________ Step1 : Goto Segw Tcode. Provide Entity Type = Emp Ddic Structure = Zuserinfo Select Create Entityset Step3 : Chose Required Fields From Ddic Structure And Make One Of The Field As Key Field In Entity Type Step4 : Generate Runtime Objects ( Runtime Artifacts ) ( Internally All Required Clases Will Be Autogenerated ) Step5 : Goto Data Provider Extension Class Redefine The Get_Entityset Method Step6 : Implement Below Code Select * From Zuserinfo Into Corresponding Fields Of Table Et_Entityset. Create Zproject With All Default Settings. It Is Responsible For Sending Output Records To Front End Apps( Ui5/Fiori/Php/ Etc. Import Ddic Structure . .

191 Ip Address/Host Name/Server Name 8000 Port No Sap/Opu/Odata Path Of Odata Service Sap Folder / Namespace Zonline_Project_111_Srv Service Name ___________________________________________________________ /Sap/Opu/Odata/Sap/Zonline_Project_111_Srv/Empset ________ Entityset It Will Fetch Records By Executing Get_Entityset Method /Sap/Opu/Odata/Sap/Zonline_Project_111_Srv/Empset?$Format=Xml ( Default ) /Sap/Opu/Odata/Sap/Zonline_Project_111_Srv/Empset?$Format=Json /Sap/Opu/Odata/Sap/Zonline_Project_111_Srv/Empset/$Count It Is To Get Count Of Records _________________________________________________________________ /Sap/Opu/Odata/Sap/Zonline_Project_111_Srv/Empset?$Select=Userid.22.Salary It Will Fetch All Records With 3 Fields/Columns ___________________________________________________________________________________ Note : Sap Netweaver Gateway Server And Front End Apps Will Transfer Data Using Xml/Json Format Note : Xml/Json Format Are Independent Of Front End Apps Xml/Json Format Are Light Weight Format For Data Transfer Xml/Json Format Are Universal Formats.Firstname.191:8000/Sap/Opu/Odata/Sap/Zonline_Project_111_Srv/ It Provides The Complete Uri Of The Service Http Protocal 117.22.218.218.SAP-FIORI as Step7 : Activate Entire Data Provider Extension Class Step8 : Goto Service Maintainence Step9 : Register The Service Via "Local" Option And Save It In Package ( Here Service Will Be Registered Under Sap Netweaver Gateway Server ) Step10: Test The Service : Goto Gateway Client Option Http://117. . Note : After Registering The Service In Sap Netweaver Gateway Server. The Front End App Can Consume This Service.

SAP-FIORI as Class-7: Developing odata ABAP service by accessing existing RFC/BAPI functionality --------------------------------------------------------------------------To make use of Existing BAPI/RFC functionalities inside odata ABAP service we can use two techniques: 1) With Mapping technique ( Code is autogenerated . ddic structure = BAPISFLDAT create along with ENTITY SET chose required fields and make AIRLINEID as KEY field and continue step3 : Right click ENTITYSET( FLIGHTSET ) chose MAP to DATASOURCE chose REMOTE FUNCTION CALL provide BAPI NAME = BAPI_FLIGHT_GETLIST and continue step4 : NOw Maintain Mapping between odata Service "ENTITYSET" and BAPI OUTPUT "FLIGHTLIST" -------------------step5 : Now generate RUNTIME OBJECTS ( automatically code is generated according to mapping maintained ) step6 : GOTO service maintainence. Register the service with LOCAL option . so we apply conditions ) _______________________________________________________________________________________ developing odata ABAP service with MAPPING technique ----------------------------------------------------step1 :create Project with default settings in SEGW tcode step2 : create ENITY TYPE = FLIGHT . so we cannot apply conditions ) 2) Without Mapping technique( code is implemented by Developer .

Price _________________________________________________________________________________________ note : We can test odata ABAP with different TOOLS 1) SAP Netweaver Gateway client ( SAP tool ) ----->SAP GUI 2) REST client ( 3rd party tool )---->Browser \It is just ADD-ON to Browser _____________________________________________________________________________________ Note :The URI patterns will be same for REST CLIENT also while the testing the service __________________________________________________________________________________ .Airline.SAP-FIORI as step7 :TEST The service goto SAP GATEWAY CLIENT TOOL Note : while testing provide ENTITYSET name and execute the service with GET operation /sap/opu/odata/SAP/ZONLINE_PROJECT_222_SRV/FLIGHTSet /sap/opu/odata/SAP/ZONLINE_PROJECT_222_SRV/FLIGHTSet/$count /sap/opu/odata/SAP/ZONLINE_PROJECT_222_SRV/FLIGHTSet?$format=json /sap/opu/odata/SAP/ZONLINE_PROJECT_222_SRV/FLIGHTSet?$format=xml /sap/opu/odata/SAP/ZONLINE_PROJECT_222_SRV/FLIGHTSet?$select=Airlineid.

step6 : activate entire DPC_EXT class step7 : REgister the service step8 : Goto Gateway client and test the service Select your ENTITY SET = FLIGHTSet and execute the service with GET operation provide .SAP-FIORI as Class-8: Developing odata ABAP service without MAPPING for accessing RFC/BAPI: ____________________________________________________________________ step1 : Create Project with default settings step2 : Create ENTITY TYPE and ENTITY SET with DDIC Stucture = BAPISFLDAT step3 : Chose Required Fields and make one of the field as KEY FIELD step 4 : Generate Runtime objects ( so automatically classes are generated ) step 5 : Open Data Provider EXTENSION CLASS REDEFINE GET_ENTITYSET method and implement the below code call function 'BAPI_FLIGHT_GETLIST' tables FLIGHT_LIST = ET_ENTITYSET.

218.191 Instance number = 00 System ID = FIO _________________________________________________ setting2: under hosts file under this path C:\Windows\System32\drivers\etc Map IP address with HOST.DOMAIN.218.22.Extension under hosts file 117.Price TO get records with specific columns ______________________________________________________________ /sap/opu/odata/SAP/ZONLINE_PROJECT_333_SRV/FLIGHTSet?$format=json To get records in JSON format ____________________________________________________________________ Note : The URI parameters will remain same for MAPPING technique and for Without Mapping also _____________________________________________________________________________________________ Developing odata ABAP service to Fetch records based on INPUT _______________________________________________________________ The parameters of GET_ENTITYSET : Note: IT_KEY_TAB It is a Standard parameter of GET_ENTITYSET method It is used for accepting Input From FRONT end apps(UI5/FIORI ) It is internal table Note : ET_ENTITYSET It is a standard parameter of GET_ENTITYYSET method IT is like an INTERNAL TABLE It can Hold collection of records at runtime.191 stfiorisrvr.st.com . It is responsible for Sending OUTPUT RECORDs to FRONT END apps ( Ui5/FIORI/ ) Class-10: How to access SAP Netweaver Gateway Online server: ---------------------------------------------------setting1: under Logon Pad configure below properties Application server = 117.SAP-FIORI as /sap/opu/odata/SAP/ZONLINE_PROJECT_333_SRV/FLIGHTSet To get records _______________________________________________________ /sap/opu/odata/SAP/ZONLINE_PROJECT_333_SRV/FLIGHTSet/$count To get record count ____________________________________________________________ /sap/opu/odata/SAP/ZONLINE_PROJECT_333_SRV/FLIGHTSet?$select=Airlineid.22.Airline.

Select * from ZUSERINFO into corresponding fields of ER_ENTITY where USerid = wa_key_tab1-VALUE AND Firstname = WA_KEY_TAB2-VALUE. NOTE : IT_KEY_TAB contains all KEY FIELD names and all KEY field Values will accept INPUT KEY FIELDS from FRONT END ER_ENTITY will transfer output record to FRONT END ________________________________________________________________________________ step 6: Register the service with LOCAL option and save it in package step7 : Goto GATEWAY client and test the service with GET operation ________________________________________________________ what is the behaviour GET_ENTITYSET method Note : if we use just EMPSet framework executes GET_ENTITYSET method if we use EMPSet?$filter=something . ENTITY SET with DDIC structure and chose required fields. step3 : save and GEnerate RUNTIME OBJECTS step4 : Open Data Provider Extension class redefine GET_ENTITY METHOD step5 : Implement the below code : data wa_key_tab1 TYPE /IWBEP/S_MGW_NAME_VALUE_PAIR.SAP-FIORI as _____________________________________________________________ Developing odata service with Multiple KEY fields for fetching record _______________________________________________________________________ Step1 : create project step2 : create ENTITY TYPE . and make USERID and FIRSTNAME as KEY FIELDs in ENTITY TYPE. Read TABLE IT_KEY_TAB into WA_KEY_TAB2 index 2 . READ TABLE IT_KEY_TAB into wa_key_tab1 INDEX 1. data wa_Key_tab2 TYPE /IWBEP/S_MGW_NAME_VALUE_PAIR.

SAP-FIORI as framework executes GET_ENTITYSET method if we use EMPSet?search=Something framework executed GET_ENTITYSET method _____________________________________________________________________ What is the behaviour of GET_ENTITY method if we use EMPSet('1001') Framework executes GET_ENTITY method if we user EMPSet(Userid='1001'.Firstname='VIJAY') framework execute GET_ENTITY method ____________________________________________________________________ IN Our service .Firstname='VIJAY') ______ ____ _________ ______ KEY 1 value KEY 2 value _____________________________________________________________________________________ Class-11: . use /sap/opu/odata/SAP/ZONLINE_PROJECT_117_SRV/EMPSet(Userid='1001'.

. "IO_DATA_PROVIDER" Double click "DATA PROVIDER EXTENSION CLASS" redefine CREATE_ENTITY method and implement below code data wa TYPE ZCL_Z9PM_PROJECT1_MPC=>TS_EMP. IF wA-USERID IS NOT INITIAL. IO_DATA_PROVIDER->READ_ENTRY_DATA( impORTING ES_DATA = WA ).SAP-FIORI as Developing odata ABAP service for Inserting data into SAP _____________________________________________________________ Note : We use CREATE_ENTITY method for inserting data Note : Create_ENTITY method contains a standard parameter ie. ENDIF. insert INTO ZUSERINFO VALUES wa.

if wa-userid is not initial. Read TABLE IT_KEY_TAB into wa_KEY_TAB index 1. UPDATE ZUSERinfo SET FIRSTNAME = wa-FIRSTNAME LASTNAME = wa-LASTNAME EMAILID = wa-EMAILID Salary = wa-SALARY where USERID = wa-USERID . _______________________________________________________________ activate DPC_Ext class and goto gateway client and test the service . SO WE CAN GET THE FORMAT OF RECORD REPRESENTATION AND USE THE SAME FORMAT FOR INSERTING THE RECORD. _______________________________________________________ activate DPC_Ext class open gateway client test the service ________________________________ Get the record along format and "use AS REQUEST " .SAP-FIORI as ______________________________________________________________________ ACTIVATE DPc_ext CLASS. GOTO GATEWAY CLIENT AND TEST THE SERVICE ________________________________________________________ First GET THE RECORD . BY PROVIDING NEW RECORD VALUES Use "POST" operation for inserting record after providing new record values in HTTP REQUEST __________________________________________________________________________ UPDATING record into SAP via odata Service goto DATA PROVIDER EXTENSION CLASS redefine UPDATE_ENTITY method and implement below code data wa TYPE ZCL_Z9PM_PROJECT1_MPC=>TS_EMP. IO_DATA_PROVIDER->READ_ENTRY_DATA( IMPORTING ES_DATA = WA ). endif. and update the values in HTTP REQUEST and USE 'PUT' operation and execute the service _________________________________________________________ DELETING record via odata ABAP service ----------------------------------------OPEN data provider Extension class and redefine DELETE_ENTITY method and implement below code data wa_key_tab TYPE /IWBEP/S_MGW_NAME_VALUE_PAIR. DELETE from ZUSERINFO where USERID = wa_KEY_TAB-VALUE.

Read TABLE IT_KEY_TAB into wa_key_tab index 1. "here mime tye is file type. If wa-filename is not initial.SAP-FIORI as /sap/opu/odata/SAP/Z9PM_PROJECT1_SRV/EMPSet('5577') and chose DELETE OPERATION for executing the service ______________________________________________________________ Class-16: UPloading File & Downloading File via odata Gateway service Make sure that the field is available with "RAWSTRING" data Type or Xstring Data TYpe or Binary Data TYpe -----------------------------. data wa_key_tab TYPE /IWBEP/S_MGW_NAME_VALUE_PAIR.-----------------Step1 : create ZProject_files in SEGW step2 : create ENTITY TYPE and ENTITY SET with DDIC strcuture = ZFILESTABLE and make one of the field as KEY FIELD use MEDIA option for ENTITY TYPE and save step3 :Generate RUNTIME OBJECTS ( so all required classes will be generated ) step4 :Open Data Provider Extension class REDEFINE UPDATE_STREAM method and implement below code data wa TYPE ZCL_Z9PM_PROJECT_FILES_MPC=>TS_FILE. INSERT Into ZFILESTABLE values WA. WA-SYDATE = sy-datum . WA-SYTIME = sy-UZEIT . endif. "here value is FILE CONTENT. ____________________________________________________ NOTE: IS_MEDIA_RESOURCE maintains file content and file TYPE step5: activate that method . Wa-MIMETYPE = IS_MEDIA_RESOURCE-MIME_TYPE. WA-FILENAME = WA_KEY_TAB-VALUE. Wa-CONTENT = IS_MEDIA_RESOURCE-VALUE .

For "FILE DOWNLOAD" use GET operation /sap/opu/odata/SAP/Z9PM_PROJECT_FILES_SRV/FileSet('fiori. _____________________________________________________________________ Note : ER_STREAM is responsible for sending FILE CONTENT and FILE TYPE while downloading ______________________________________________________________________________ step : ACtivate Data provider Extension class step : Register the service step : Goto gateway client and test the service _____________________________________________________________ while testing . COPY_DATA_TO_REF( exporting IS_DATA = WA_stream changing cr_data = ER_STREAM ).pdf')/$value and execute the service ___________________________________________________________________ Note : IS_MEDIA_RESOURCE is capable of hold any type of "file content" while uploading Note : ER_STREAM is capable of sending any TYPE of "File Content" while downloading _____________________________________________________________________ Note : In this service the file content is inserted into database table in the form of "RAWSTRING" format ________________________________________________________________________ Note : if you want to store records of FILE into data base table Please refer the PROJECT "ZFILERECORDS_DB_PROJECT" _________________________ THis project is for extracting records from FILE ________________________________________________________________________ "IFRAME" is screen element-> it will display FILE in the front end SEGW Click on open project search * .pdf')/$value and execute the service __________________________________________________ while testing. WA_STREAM-VALUE = wa-CONTENT. select single * from ZFILESTABLE into WA where Filename = wa_key_tab-VALUE. Read TABLE IT_KEY_TAB into wa_key_tab index 1.SAP-FIORI as Step6 : REDEFINE GET_STREAM method and implement the CODE data wa_stream TYPE TY_S_MEDIA_RESOURCE. attach File under HTTP request FOR "FILE UPLOAD" and use Put operation /sap/opu/odata/SAP/Z9PM_PROJECT_FILES_SRV/FileSet('fiori. WA_STREAM-MIME_TYPE = wa-MIMETYPE. data wa TYPE ZCL_Z9PM_PROJECT_FILES_MPC=>TS_FILE. data wa_key_tab TYPE /IWBEP/S_MGW_NAME_VALUE_PAIR.

we can consume Odata ABAP services ( SAP ECC/SCM/SRM/CRM ) we can consume odata EXTERNAL services ( NOn-SAP systems ) we can consume odata HANA XS services ( SAP HANA system ) SCRIPTING code is always executed in BROWSER/CLIENT but not in SERVER if(condition) { //if condition is true . then this block is executed } else .e . each statement ends with semicolon ( i. then code is executed } ____________________________________________ IF-ELSE condition statement if(condition) { //if condition is true.SAP-FIORI as Class-23: SCRIPTING SAP UI5/FIORI will make use of SCRIPTING Syntaxes: NOTE : here SCRIPTING means JAVA SCRIPTING but NOT JAVA ______________ _____ SCRIPTING is "CASE-SENSITIVE" In scripting . ) From SAP UI5/FIORI scripting.

i < 10 . case value2: //implement functionality. switch( ) { case value1: //implement functionality. i++ ) i-{ //implement code } ______________________________________________ Switch statement : _____________________ it is used to perform different actions based on different conditions.SAP-FIORI as { //if condition is false. then this block is executed } ______________________________________________ If--ELSE IF---ELSE If(condition1) { //if condition1 is true. case value3: //implement functionality. and condition2 is false then this block is executed } Loop statement for Iteration : for( i = 0 . break. } _____________________________________________________ Boolean statement : _____________________ Boolean(10 > 9) //returns true Boolean(Condition) //returns true if condition is true. break. else it returns false (10 > 9 ) //returns true 10 > 9 //return true ______________________________________________________________ variables in SCRIPTING: . break. then this block is executed } else if(condition2){ //if condition1 is false and condition2 is true then this block is executed } else { //if condition1 is falsse.

var fullname = "AJAY" + " " + "KUMAR" . var z = X + Y . var x = 4. ---> the value of Z becomes 4 ____________________________________________________________ NOte : we can use "COMPARISION OpERATORS" in scripting == equal to === equal value and equal data type != not equal !== not equal value or not equal data type > greater than < less than >= greater than or equal <= less than or equal __________________________________________________________ NOTE : we can use "Logical operators" in scripting" && AND || OR . var carname = "HONDA" . var X = 5 + 2 + 3 . x++ . var z = x .5 . var name = "VIJAY" . address = "HYDERABAD" . or var name = 'VIJAY' . Note : if required. var name = "VIJAY" . we can use "Arithematic Operators" in scripting + addition Subtraction * Multiplication / Division % Modulus ++ Increment -Decrement _______________________________________________________________ Increment operator : var x = 5 . var carname. var z = x . x-. For EX : var x = 5 .SAP-FIORI as ----------------------To declare a variable .. we use "var" KEYWORD Variables are like containers to HOLD the data at RUNTIME. --> the value of z becomes 6 _______________________________________________________________ Decrement operator : var x = 5 . var Y = 6 . age = 30 .

age : 30 } . age : 30 } ."VOLVO" ]. //NUmber var experience = 3. //OBJECT _____________________________________________________________________________ NOte : Array is used to hold more than one value at time. Variables can Hold values of Different data types : NUmbers DECIMALS Strings ARRAYs OBJECTS BOOLEAN _______________________________________________________________ For example : var salary = 40000. __________________________________________________________________________ if experience > 5 . The values in array is stored in the form indexes The values in array is stored from starting index as "0" To capture the value of an array . we use index . THEN salary = 800000 else salary = 400000 if age > 18 . age = 30 . var voteable = ( age > 18 ) ? "eligible" : "Not eligible" . var person = [ fname . address = "HYDERABAD" . For example : var salary = (experience > 5 ) ? 8000000 : 400000 . lname ."BMW" . lastname : "KUMAR" . lname = "KUMAR" . then voteable = "ELIGIBLE" else Voteable = "NOTE ELIGIBLE" ____________________________________________________________ NOTE : In SCripting . age.SAP-FIORI as ! NOT ___________________________________________________________ Conditional TERNARY operator in scripting: ____________________________________________ syntax : var <varname> = ( Condition) ? value1 : value2 .5 . //OBJECT ______________________________________________________ var var var var fname = "VIJAY" . // Array var x = { firstname :"VIJAY". //NUmber with decimal var firstname = "AJAY" // String var cars = [ "HONDA" . //Array ______________________________________________________________________________ var x = { firstname :"VIJAY" . address ].

placeAt("content"). ___________________________________________________________________ seo..setDisplayWelcome(true). seo. aho. etc.<method2>( ).<method3>( ). var aho = new sap.SAP-FIORI as Class-25: Faculty : A Vijayendar Reddy OASIS Technologies 9+ years experience in various SAP WEB TECHNOLOGIES ______________________________________________________________ SAP UI5 Screen elements : _______________________ Note : Screen elements are known as USER INTERFACE elements( UI ELEMENTS ) Syntax for using SAP UI5 screen elements: step1 : create screen element object and set properties step2 : access methods on Screen element object step3 : place Screen element on CONTENT ___________________________________________________________________ var seo = new <packageName>. property3 : value } ).ClassName( ID.GIF"). logo. ____________________________________________________________ SAP UI5 TEXT VIEW : -------------------it is used to display text on screen var tvo = new sap.setTooltip("WELCOME TEXT").setLogoSrc("MS.ApplicationHeader("appheader"). seo. aho. tvo. logoff option. property1 : value. aho..commons. welcome area.ui. ___________________________________________________________________ seo. aho. .ui.placeAt("content"). { property1 : value. ____________________________________________________________________ SAP Ui5/FIORI Application Header: ---------------------------------It is used to display TITLE. aho.setLogoText("OASIS TECHNOLOGIES Hyderabad").<method1>( ).commons.setText("WELCOME TO SAP UI5/FIORI TRAINING").TextView( ).setUserName("VIJAYENDAR REDDY"). tvo.

m sap.ui.setWidth('700px'). and GOTO API documentation and Recognize 1) Properties 2) Methods 3) Events ___________________________________________________________ SAP Ui5/FIORI contains mainly below packages/libraries sap. linko..Link({ text : "GOOGLE SEARCH" .Bold . .ui.Italic .SAP-FIORI as tvo.Positive .TextViewDesign.Small .in/maps/place/New York' }).ui..commons.Critical ..placeAt("content").ondemand.commons.ui. ________________________________________________________________________ Note : sap.placeAt("content").com/sdk under that chose screen element according to requirement.TextViewColor.H2).Standard ______________________________________________________________________ SAP UI5 LINK : ________________ It is used to link to other applicatoin via URL address with href property var linko = new sap. tvo.etc.TextViewColor.ui.me etc.google. tvo. tvo. _____________________________________________________________________________ Note : https://sapui5..ui.netweaver.Positive).co.commons.ui.TextViewDesign.ui.setDesign(sap.commons.viz sap..Underline sap.commons sap.ui.setSemanticColor(sap..commons.Negative .H1 to H6 .table sap.unified sap. href : 'http://www.etc.layout sap.

width : '15em' } ). value : "OASIS " .commons.commons.TextField({ id : 'textfield'. _________________________________________________________________________ SAP UI5 Label : ________________ step 1 : create object for LABEL and set properties if Required step 2 : call the required method on label object step 3 : place that label on Content ___________________________________________________________ var labelo = new sap. . value : "OASIS " .ui.placeAt("content").ui.setText("PLEASE ENTER your PASSWORD"). tfo.commons. __________________________________________________________________ SAP UI5 Password Field : __________________________ use the same code : But change the class name to PasswordField ___________________________________________________________________ var tfo = new sap.SAP-FIORI as _______________________________________________________ Class-26: SAP UI5 TEXT FIELD ______________________ step1 : create object for TEXT FIELD and set Properties step2 : call the method if required step3 : Place that text field on Content ___________________________________________________________ var tfo = new sap.PasswordField({ id : 'textfield'. width : '15em' } ).ui.Label( ).placeAt("content"). labelo. tfo.

title : "PASSWORD TOOLTIP". tfo.placeAt("content"). labelo.setDesign(sap. similarly .SAP-FIORI as labelo.commons.ui.setTooltip( richtooltipo ). _____________________________________________________ .RichTooltip({ text: "PLEASE ENTER PASSWORD VALUE". _________________________________________________________ Rich Tool Tip : ________________ In case of Rich Tool tip. we can use seo. _________________________________________________________ To recognize syntax error : open application with URL in browser and double click on warning symbol and identify the LINE NUMBER CHAR File name Open eclipse .GIF" }).ui.Bold).setRequired(true).setTooltip("TOOLTIP TEXT" ). labelo. above line number and try to rectify the syntax error ______________________________________________________________ Attaching TOOLTIP TO SAP UI5/fiori screen elements _____________________________________________________ Note : TOOl tip is of 3 types 1) Simple Tool Tip 2) Rich Tool Tip 3) QUICK View Tool tip ______________________________________________________ Simple TOOl TIP : ___________________ tfo. we can provide TOOLTIP TEXT.setTooltip("ENTER PASSWORD VALUE" ). TITLE. IMAGE/ICON step1 : create Object for RICH TOOL TIP class and set properties step2 : Attach richtool tip to any Screen element ______________________________________________________________ var richtooltipo = new sap. labelo. imageSrc : "MS. goto above file.setTooltip("PLEASE ENTER PASSWORD FIELD").Labeldesign.commons.

SAP-FIORI

as

SAP UI5 Paginator :
____________________
Paginator allows enduser to browse/navigate through different pages.
var paginatoro = new sap.ui.commons.Paginator( ) ;
paginatoro.setNumberOfPages(20);
paginatoro.setCurrentPage(10);
paginatoro.placeAt("content2");
_________________________________________________________
SAP UI5 Formatted TEXT VIEW :
_______________________________
The purpose of Formatted TEXT VIEW is to display the text in mixed format
For EX : display text along with LINks
step1 : Maintain HTML text string with EMBED option
step2 : create object for LInk1 ( SAP Ui5 )
step3 : create object for LINK2 ( SAP FIORI )
step4 : create object for Formatted TEXT VIEW class
step5 : set HTML TEXT STRING to FORMATTED TEXT VIEW
step6 : add link1 to Formatted text view
add link2 to Formatted text view
step7 : place Formatted text view on CONTENT
___________________________________________________________
var htmltextstring = 'OASIS TECHNOLOGIES is TRAINING CENTER for <embed data-index=\"0\"> and
also for <embed data-index=\"1\">'
var link1 = new sap.ui.commons.Link("l0" ,{
text : "SAP UI5",
href : "http://google.com/search?q=SAP UI5",
title : "SAP UI5"
});
var link2 = new sap.ui.commons.Link("l1" ,{
text : "SAP FIORI",
href : "http://google.com/search?q=SAP FIORI",
title : "SAP FIORI"
});
var formattedtextviewo = new sap.ui.commons.FormattedTextView( );

SAP-FIORI

as
formattedtextviewo.setHtmlText(htmltextstring);
formattedtextviewo.addControl(link1 );
formattedtextviewo.addControl(link2 );

//at index 0 in htmltextstring
//at index 1 in htmltextstring

formattedtextviewo.placeAt("content3" );
_______________________________________________________________________________

Class-27:
Faculty : A Vijayendar Reddy
OASIS Technologies
9+ years experience in various SAP WEB TECHNOLOGIES
______________________________________________________________
SAP UI5 Screen ELEMENTs:
___________________________
Note : We can add HTML options inside SAP UI5 SCREEN ELEMENTS using HTML CLASS
we can add HTML options between two SAP Ui5 screen element using HTMl CLASS
For EXample : i want display scrolling text .
THis is not possible directly with SAP Ui5 screen element.
so we use sap.ui.core.HTML class

SAP Ui5 HTML screen element:
______________________________________________
var htmltext = new sap.ui.core.HTML({
content :
"<marquee
style=\"color:red\"> <h1>
</marquee>"

OASIS TECHNOLOGIES

} );
htmltext.placeAt("content4");
____________________________________________________________________________
SAP UI5 TEXT AREA :
___________________
we use TEXT AREA to display multiple lines as OUTPUT.
accept multiple lines as INPUT.
Text Area is display with help of rows and columns as PROPERTIES.
var textareao = new sap.ui.commons.TextArea(
{

</h2>

SAP-FIORI

as
value : 'OASIS TECHNOLOGIES is training center for SAP Ui5 and FIORi , odata etc...',
cols : 50,
rows : 15
}
);
textareao.placeAt("content4");
________________________________________________________________________
SAP UI5 SLIDER:
_____________________
SAP UI5 SLIDER are of TWO types :
1) Normal SLIDER --> VERTICAL , HORIZONTAL
2) RANGE SLIDER --> VERTICAL , HORIZONTAL
Normal SLider: ( Horizontal )
--------------------------------var slidero = new sap.ui.commons.Slider( {
width : '400px',
min : 0 ,
max : 100,
value : 50 ,
totalUnits : 5,
stepLabels : true
} );
slidero.placeAt("content4");
___________________________________________________________________
Normal Slider : VERTICAL
-----------------------var slidero = new sap.ui.commons.Slider( {
width : '400px',
min : 0 ,
max : 100,
value : 50 ,
totalUnits : 5,
stepLabels : true ,
height : '400px',
vertical : true
} );
slidero.placeAt("content4");
_____________________________________________________________________________
Range SLIDER : HORIZONTAL :

SAP-FIORI

as
-------------------------var slidero = new sap.ui.commons.RangeSlider({
width : '30%',
min : 100 ,
max : 300 ,
value : 150 ,
value2 : 240 ,
totalUnits : 5,
stepLabels : true
} );
slidero.placeAt("content4");
___________________________________________________
RANGE SLIDER : VERTICAL :
var slidero = new sap.ui.commons.RangeSlider({
width : '30%',
min : 100 ,
max : 300 ,
value : 150 ,
value2 : 240 ,
totalUnits : 5,
stepLabels : true,
height : '300px',
vertical : true
} );
slidero.placeAt("content4");
___________________________________________________________
Difference between NORMAL SLIDER AND RANGE SLIDER :
____________________________________________________
NORMAL SLIDER : enduser can select single value
RANGE SLIDER : enduser can select two value ( Lowvalue , highValue )
__________________________________________________________________________
SAP UI5 progress INDICATOR :
----------------------------var oProgressIndicator3 = new sap.ui.commons.ProgressIndicator( {
width : "300px",
percentValue : 75,
showValue : true,
displayValue : 75,
barColor : sap.ui.core.BarColor.CRITICAL
});
oProgressIndicator3.placeAt("content4");
_____________________________________________

var img1 = new sap.jpg" .ui.Image({ "120%" }).ui.jpg" .addContent(img1). ratingindicatoro. carousel. value : 2 }). width : "95%" . carousel.jpg" .addContent(img5).ui.commons. carousel.commons.jpg" .Image({ "120%" }).Carousel( ). carousel. width : "95%" . carousel.addContent(img3). Carousel can be displayed either VERTICALL or HORIZONTAL. height : src : "images/deepak.RatingIndicator({ maxvalue : 5.CRITICAL NEGATIVE POSITIVE STANDARD ______________________________________________ SAP UI5 Rating Indicator : ___________________________ This allows enduser to provide rating for various options var ratingindicatoro = new sap. height : src : "images/ajay.ui.ui.addContent(img4). height : src : "images/suman.ui. var img2 = new sap.setWidth("100%").jpg" .Image({ "120%" }). var img6 = new sap. carousel.Image({ "120%" }).addContent(img7). carousel.ui. width : "95%" . src : "images/abc.addContent(img2). height : src : "images/ramesh. width : "95%" . height : src : "images/marie. var img3 = new sap.commons.placeAt("content4").commons. NAVIGATION is done through the arrow buttons . Class-28: SAP UI5 CAROUSEL : ______________________ Carousel is a screen element that can display N of UI5 Screen elements UNder CAROUSEL. height : .Image({ "120%" }).commons.jpg" . width : "95%" . var img7 = new sap. width : "95%" . carousel.Image({ "120%" }). var carousel = new sap.addContent(img6).commons. width : "95%" .commons. var img4 = new sap.Image({ "120%" }).jpg" .commons. carousel.ui.ui.commons. height : src : "images/claudia.SAP-FIORI as note : BarColor.setOrientation("horizontal"). var img5 = new sap.

ui.placeAt("content").core.placeAt("content"). item = new sap.addItem(item).ComboBox( ). item = new sap. dropdownbox.ListItem( { text : "SAP SD"}).addItem(item).core.ui.ui. var item = new sap. dropdownbox. dropdownbox.addItem(item).ListItem( { text : "SAP UI5"}). item = new sap.ui. dropdownbox.commons.addItem(item). item = new sap. dropdownbox. var item1 = new sap.commons.ui.core. _________________________________________ SAP UI5 COMBO BOX: __________________________ var combobox = new sap.ListItem( { text : "ABAP" }).ui.core. dropdownbox. _______________________________________________________________ SAP UI5 DropDown Box : ____________________________ step1 : create object for DROPDOWNBOX step2 : create object for LIST ITEMs and set TEXT step3 : Add LIST ITEM TO DROPDOWN BOX Repeat STEP2 and STEP3 based on NUMBER of ITEMS step4 : Place DropDown box on CONTENT _____________________________________________________________ var dropdownbox = new sap.core. dropdownbox.ui. // set default selected value in dropdown dropdownbox.ui.addItem(item1).core.ListItem( { text : "ABAP" }).ui. item = new sap.addItem(item).addItem(item).ListItem( { text : "SAP oDATA "}).DropdownBox( ).SAP-FIORI as carousel. .ListItem( { text : "SAP FIORI"}). item = new sap.core.ui.core.addItem(item).ListItem( { text : "WEBDYNPRO"}).ListItem( { text : "SAP HCM"}).setValue("SAP FIORI"). dropdownbox. combobox.

ListItem( { text : "SAP SD"}). user can select a value from existing list "only" in Combobox . // set default selected value in dropdown combobox. item1 = new sap.ui. key : "CHINA" } ).ListItem( { text : "SAP FIORI"}).core.core.addItem(item1). ____________________________________________________________________________ SAP Ui5 RADIOBUTTON GROUP : __________________________________ step1 : create an object for RADIOBUTTON GROUP CLASS step2 : create object for ITEM and set TEXT. item1 = new sap. key : "USA" } ).RadioButtonGroup( { columns : 1 } ). item1 = new sap.addItem(item1). itemm = new sap.core. key : "INDIA" } ).ui.placeAt("content"). step3 according to number of values in RADIOBUTTOn GROUP step4 : place RADIOBUTTOn GROUP on content ________________________________________________ var radiobuttongroup = new sap. radiobuttongroup.Item({ text : "CHINA" .ListItem( { text : "SAP UI5"}).ui.ListItem( { text : "SAP oDATA "}).addItem(item1).ListItem( { text : "SAP HCM"}). item1 = new sap. combobox.addItem(item1).core. combobox.Item({ text : "USA" . combobox.ui. combobox.core.commons. .addItem(itemm).core. combobox.ListItem( { text : "WEBDYNPRO"}).addItem(itemm). itemm = new sap.core.addItem(item1). KEY properties step3 : add Item to RADIOBUTTON GROUP repeat step2 . item1 = new sap.ui.ui.setValue("SAP FIORI"). combobox.SAP-FIORI as item1 = new sap.ui.core.addItem(item1).Item({ text : "INDIA" . ____________________________________________________ Difference between DROPDOWN BOX and COMBOBOX: ----------------------------------------------in dropdown box . var itemm = new sap. radiobuttongroup. radiobuttongroup.core.ui. combobox. user can select a value from existing list or user can provide a new value which is not part of list also.ui.addItem(itemm).ui.

addItem(itemm).CheckBox( { text : "I AM interested in SAP UI5".Panel( { text: "EMPLOYEE LIST" }). key : "NEPAL" } ).ui.core.ui. _________________________________________________________________________ SAP UI5 PANEL : ____________________________ Note : PANEL is like a container.ui. PANEL acts like a SECTION in OUTPUT SCREEN ____________________________________________________________________________ var panel = new sap.addContent(radiobuttongroup). -----------------Roadmap can have : three types of Navigations a) Forward navigation b) backward navigation c) Select Navigation For Example : Roadmap can be used for .commons.placeAt("content"). radiobuttongroup.addContent(dropdownbox).placeAt("content"). panel. key : "SINGAPORE" } ).Item({ text : "MALAYSIA" . panel. __________________________________________ SAP UI5 ROADMAP screen element _________________________________ Roadmap is used to display the "sequence of steps" on a SCREEN. itemm = new sap.placeAt("content").Item({ text : "SINGAPORE" .addItem(itemm).core. ____________________________________________________________________________ Class-29: SAP UI5 Check BOX : ____________________ var checkbox = new sap. checked : true } ).Item({ text : "NEPAL" .addItem(itemm). radiobuttongroup. radiobuttongroup. radiobuttongroup. checkbox. key : "MALAYSIA" } ). itemm = new sap.core.ui.ui.SAP-FIORI as itemm = new sap.commons. panel. which can contain screen elements PANEL content be minimized or maximized .

ui.RoadMapStep( { { { { id id id id : : : : "step1" "step2" "step3" "step4" .addStep(step4o). sap.addSubStep(substep1).RoadMap( ). .commons.RoadMapStep( { id : "substep2" . label : "HEADER SUB = new sap.RoadMapStep( sap.placeAt("content"). . ). label label label label : : : : "LOGIN" } "INPUT" } "HEADER" "ITEMS" } ).ui. roadmapo. . .ui.ui.addStep(step2o).setNumberOfVisibleSteps(8). step2o.commons.commons.RoadMapStep( sap.RoadMapStep( { id : "substep1" . var substep2 STEP2"}). ).RoadMapStep( sap. roadmapo. var var var var step1o step2o step3o step4o = = = = new new new new var substep1 STEP1"}).addStep(step3o).addSubStep(substep2). roadmapo. label : "HEADER SUB step2o.commons.commons. roadmapo. } ).ui.ui.addStep(step1o).commons. = new sap. roadmapo. roadmapo.ui. roadmapo.commons.SAP-FIORI as 1) ANY INTERACTIVE REPORT 2) Leave Request Approval/Rejection process 3) Timesheet Approval/Rejection Process 4) Ticket Reservation 5) ANY application which has more number of VIEWS/SCREENS( atleast more than 3 ) __________________________________________________________________________________ Procedure for displaying ROADMAP : ------------------------------------step1 : create object for ROADMAP step2 : create object for ROADMAP STEP ( depends on Number of STEPS ) step3 : create object for ROADMAP SUBSTEP( depends on Number of SUBSTEPS ) step4 : ADD substeps to STEP step5 : ADD STEPs to ROADMAP step6 : Place ROADMAP on CONTENT __________________________________________________________________________________ implement the below code : var roadmapo = new sap.setSelectedStep("step1").

splitter.setWidth("100%" ). splitter. splitter.ui.setSplitterOrientation(sap.addSecondPaneContent(radiobuttongroup).Orientation.DatePicker( ).ui.SAP-FIORI as ___________________________________________________________________________ SAP UI5 SPLITTER: SPLITTER can be used in two ways: 1) Vertical 2) Horizontal step1 : create Object for SPLITTER step2 : add content to FIRST PANE of SPLITTER step3 : add content to SECOND PANEL of SPLITTER step4 : place the SPLITTER on CONTENT of OUTPUT SCREEN ____________________________________________________________________ var splitter = new sap. splitter.setHeight("400px"). splitter. splitter. datepickero.commons.addFirstPaneContent(roadmapo).Vertical). splitter.setMinSizeFirstPane("30%"). splitter. splitter.setMinSizeSecondPane("30%").commons. _____________________________________________________________ Class-30: SAP UI5 DATE PICKER: _______________________ var datepickero = new sap.setYyyymmdd("20100101" ). .placeAt("content").ui.Splitter( ).setSplitterPosition("50%").commons.

ui. listboxo. var listitemo = new sap.core. listitemo = new sap.fr datepickero.placeAt("content").addItem(listitemo).ListItem( { text : 'SAP UI5' } ). listboxo.ui.based on Number of VALUES step4 : place Listbox on content _______________________________________________________________ Implement the code for LIST BOX var listboxo = new sap.setLocale("fr"). listboxo.ui.placeAt("content").ListItem( { text : 'SAP HR' } ).addItem(listitemo). listboxo.ui.ui. SAP UI5 LIST BOX : ___________________ step1: create object for LIST Box step2 : create object for LISTITEM and provide text property step3 : add List item to List Box Repeat step2 and step3 . //ar.SAP-FIORI as datepickero.de.commons.ListItem( { text : 'SAP ABAP' } ). //it will allow multiple selections on LISTBOX listboxo.ui.addItem(listitemo). ____________________________________________________________________________ SAP UI5 TABSTRIP: . listitemo = new sap.ListBox( ).core. listboxo.core.core.addItem(listitemo).setAllowMultiSelect(true).addItem(listitemo).core.ListItem( { text : 'SAP ODATA' } ). listitemo = new sap.core. listboxo. listboxo.en.ListItem( { text : 'SAP FIORI' } ).ui. listitemo = new sap.addItem(listitemo). listitemo = new sap.ListItem( { text : 'SAP CRM' } ).

placeAt("content"). ). tab1o.Tab( new new new new sap. ).TabStrip( ). tabstrip.Title({ ). tab3o.addContent(radiobuttongroup). tab1o. var var var var var var var var tab1o tab2o tab3o tab4o = = = = tab1title tab2title tab3title tab4title new new new new = = = = sap. tab2o. "CONTRACT DATA" } ).Title({ sap.addTab(tab2o).core. tab3o. "ADDRESS DATA" } ).commons. tabstrip.addTab(tab1o).core.setTitle(tab1title).SAP-FIORI as ________________________ Step1 : create object for TABSTRIP if required setWidth and setHeight step2 : create object for TAB step3 : set TITLE for EACH TAB if required addContent to each TAB step4 : add TAB to TABSTRIP step5 : place Tabstrip on CONTENT __________________________________________________________ implement the below code: var tabstrip = new sap. tabstrip. tabstrip.setTitle(tab2title). ). tabstrip.Tab( sap.ui.ui.commons.Title({ sap. tab4o.ui.commons.ui.addTab(tab4o). tabstrip.ui.Title({ sap.setWidth("800px").commons.addContent(listboxo).commons.Tab( sap. ______________________________________________________________ .setTitle(tab3title). tabstrip.setHeight("300px"). "COMMUNICATION DATA" } ).addContent(roadmapo). text text text text : : : : "GENERAL DATA" } ).addTab(tab3o).core.Tab( sap.setTitle(tab4title). tab2o.ui.ui.ui.ui.core.

________________________________________________________________ SAP UI5 TABLE: _____________________ TABLE is a "Complex" Screen element. we can add other screen elements _________ ie.addContent(tableo). TABLE can contain 1) TEXT FIELD 2) TEXT AREA 3) TEXT VIEW 4) IMAGE 5) RATING INDICATOR 6) PRogress INDICATOR 7) CHECKBOX 8) COMBOBOX 9) LINK 10)Button __________________________________________________ Class-31: Consuming odata ABAP services in SAP UI5/FIORI application ___________________________________________________________ step1 : recognize the service which you want to consume copy the service URL step2 : Create project with default settings in ECLIPSE goto index file step3 : create object for oDATAMODEL CLASS and consume odata ABAP service by providing Service URL ____________ step4 : create object for TABLE class step5 : Add column with Label and add SCreen element Maintain "Data Binding" with odata ABAP service ENTITY TYPE fields -----------repeat this step5 for N number of columns step6 : set the model to table step7 : bindRows to TABLE with ENTITYSET of our odata ABAP service _________ . bcoz inside a TABLE .SAP-FIORI as Note : if required we can add table as content to tab of tabstrip tab1o.

commons. template: new sap. template: new sap.ui. tableo.TextField().bindProperty("value".Column({ label: new sap.bindProperty("value". false. "Airportto") })).commons.addColumn(new sap.ui.commons.table.commons. tableo. template: new sap.ODataModel( "proxy/sap/opu/odata/SAP/ZFLIGHTSPROJECT_SRV/".bindProperty("value". "Airlineid") })).Column({ label: new sap.ui.ui. "Cityfrom") })).Label({text: "Airline ID"}).ui.TextField(). tableo.Paginator.ui.table. template: new sap.SAP-FIORI as step8 : Place the table on content of Output screen _______________________________________________________________________ Implement the below code var modelo = new sap.TextField().addColumn(new sap.model.ui.commons.commons.table.ui.Column({ label: new sap.ui.TextField(). tableo.odata.commons.ui.bindProperty("value".ui. "userc24".commons.bindProperty("value".Column({ label: new sap.addColumn(new sap.Column({ label: new sap. tableo.ui.ui.ui.table. } ).commons.table.table.NavigationMode.ui.Label({text: "Airportto"}).commons.Column({ label: new sap.ui.ui.Label({text: "Airportfr"}).addColumn(new sap. template: new sap.addColumn(new sap. var tableo = new sap.TextField(). "Connectid") })). tableo.table. visibleRowCount : 7 . "Airportfr") })). "sap123" ).Label({text: "Airline"}).table. "Airline") })).addColumn(new sap.Label({text: "Connectid"}). template: new sap.Label({text: "City From"}). navigationMode: sap.TextField().commons.ui.ui.ui.commons. .bindProperty("value".Table( { title : "FLIGHT RECORDS" .ui.

bindRows("/FLIGHTSET").ui.table.. "Price") })). template: new sap.table.... ____________________________________________________________________________ Note : in Single application if required. we can consume multiple odata ABAP services for EXAMPLE: var modelo1 = ...commons.Label({text: "Price"}).ui. tableo..ui... tableo. Requirement : ------------- TextVIEW: inside a TABLE ...commons. tableo.setModel(modelo)..ui.TextField().bindProperty("value"../Zuserinfo_srv var modelo2 = . tableo.. "Cityto") })).TextField().addColumn(new sap.commons.Column({ label: new sap..SAP-FIORI as tableo.....Label({text: "Cityto"}).ui...ui.Column({ label: new sap../ZFLights_srv Class-32: Displaying different screen elements inside SAP UI5 table : TextVIew inside a TABLE Image inside a TABLE Button inside a TABLE PRogressINdicator inside a TABLE Rating Indicator inside a TABLE CheckBox etc.placeAt("content").bindProperty("value"..commons.. template: new sap.addColumn(new sap.

->display checked as De-selected checkbox Note : TO apply conditions. -> display Progress as 80% if price >= 500 -> display progress as 20% Rating INDicator: __________________ if price < 500 . ->display checked as SELECTED checkbox if price >= 500 . ->display Rating as 2 star if price >= 500 .SAP-FIORI as _________ if price < 500.00 -> display text as "EXPENSIVE" Image : _________ if price < 500 -> display image as green color icon if price >= 500 -> display image as red color icon Progress INdicator : ___________________ if price < 500. ->display Rating as 4 star check box : _____________________ if price < 500. we can make use of "FORMATTER function" concept in SAP UI5/FIORI .00 -> display text as "REASONABLE" if price >= 500.

} } ) .00) { return "EXPENSIVE". and can display different values in a TABLE _______________________________________________________ Note : TExt field . } else{ return "REASONABLE".commons.table.commons.TextView(). function(pvalue) { if(pvalue > 500.Label({text: "STATUS"}).ui. value is EDITABLE Text vIew.Column({ label: new sap. template: new sap.SAP-FIORI as __________________ Formatter function : is used to apply conditions. value is NON-EDITABLE _________________________________________________________ Note : Every screen element has a separate CLASS in SAP UI5 and FIORI Every screen element has its own important properties _____________________________________________________________________________________ implement the below code tableo.bindProperty("text".addColumn(new sap.ui. "Price" .ui.

} else{ return "error.addColumn(new sap.Label({text: "IMAGE"}).bindProperty("src".table. "Price" .commons.RatingIndicator().ui.ui.commons.bindProperty("value".commons.table.addColumn(new sap. tableo. } } ) })).Label({text: "Rating"}). template: new sap.ui.gif" . template: new sap. function(pvalue) { if(pvalue > 500.00) .SAP-FIORI as })).gif" . "Price" .Column({ label: new sap.ui.00) { return "success. function(pvalue) { if(pvalue > 500. tableo.Column({ label: new sap.ui.ui.commons.Image().

SAP-FIORI as { return 4 .Label({text: "Checkstatus"}). } else { return 2 .Label({text: "Progress"}). tableo.Column({ label: new sap.addColumn(new sap.} }) })).ui.} else{ return 20 .ui.} }) })).commons.CheckBox(). template: new sap. tableo.bindProperty("percentValue".bindProperty("checked". "Price" .Column({ label: new sap.ProgressIndicator().commons. function(pvalue){ if(pvalue > 500.commons.addColumn(new sap.ui.ui. template: new sap.table.commons. "Price" .ui.00) { return 80 .table.ui. function(pvalue){ .

commons.00) { return true . template: new sap. "Airline") })).SAP-FIORI as if(pvalue > 500. } else { return false . tableo.} }) })).addColumn(new sap.Column({ label: new sap.ui.Label({text: "Airline"}).table.ui.commons. Class-33: Display odata ABAP service records into DROPDOWN BOX DISPLAY odata ABAP service records into RADIOBUTTON GROUP Display odata ABAP service records into GRAPH/CHART __________________________________________________________ Drop Down BOX : __________________ Step1 : create Model Object for Odata ABAP service and consume service step2 : create object for DropDown Box .Button().bindProperty("text".ui.

setModel(modelo2). "sap123" ).ui.core. key : "{Firstname}" } ). dropdownboxo.DropdownBox( ). .commons.ListItem( { text: "{Firstname}" . var dropdownboxo = new sap.model.ODataModel( "proxy/sap/opu/odata/SAP/ZUSERINFO123_SRV". "userc24".ui.ui. var listitemo = new sap. false.SAP-FIORI as step3 : create object for List Item and maintain Data Binding with odata Service Field step4 : set Model to DropDown box step5 : bindITEMs with ENTITYSET and LiST ITEMS step6 : place dropdown box on Content ____________________________________________________________ var modelo2 = new sap.odata.

_______________________________________________________ implement below code: var radiobuttongroupo = new sap. ______________________________________________ Radiobutton GROUP : ______________________ step1 : create Model object for odata ABAP service and consume the service ( if it is already consumed then ignore this step ) step2 : create object for Radiobutton Group step3 : Create object for ITEM and Maintain Data Binding with OData ABAP service field step4 : set model to Radiobutton GROUp step5 : binditems with ENTITYSET and ITEMS object step6 : pLACE radiobutton group on CONTENT.commons.ui.bindItems("/UserSet".RadioButtonGroup( { columns : 10 }). .SAP-FIORI as dropdownboxo. dropdownboxo. listitemo ).placeAt("content").

etc.bindItems("/UserSet" .. radiobuttongroupo.placeAt("content").SAP-FIORI as var itemo = new sap. radiobuttongroupo.. ___________________________________________________ step1 : create Model object for Odata ABAP service and consume the service ( if this already implemented then ignore this step ) .core.viz package ------SAP Ui5/FIORI supports various types of Charts: bar line column pie etc.setModel(modelo2).ui. radiobuttongroupo. itemo). ______________________________________________________ Graphs/Charts in SAP UI5 ____________________________ Graphs/Charts in SAP UI5 are part of sap.. key : "{Firstname}" })..Item({ text : "{Firstname}".

ui5.FlattenedDataset({ data : { path : "/UserSet" } . value . value : "{Firstname}" } ]. measures : "{Salary}" }]. name : 'FirstName'. dimensions : [ { axis : 1 . : [{ name : 'SALARY' .data.viz.SAP-FIORI as step2 : create object for FlattenedDataSet and provide your ODATA ABAP service "ENTITYSET" provide Data binding with Odata ABAP service field for X-AXIS provide Data binding with odata ABAP service field for Y-AXIS step3 : create object for GRAPH according requirement and provide dataset object step4 : set Model to Graph object step5 : place graph on CONTENT ___________________________________________________________ implement the below code var dataseto = new sap.

title : { visible : true .placeAt("content"). height : "600px" . dataset : } columno.viz. Class-34: Row Repeater SCreen element CSS( cascading Style sheet ) __________________________________ Row Repeater screen element : _____________________________ It is used to display collection of records similar to TABLE but the appearance is slightly is different. dataseto . columno.Column( { width : "80%" . plotArea : { } .setModel(modelo2). var columno = new sap.SAP-FIORI as }).ui5. step1 :create an object for Row Repeater step2 :create an object for Matrix Layout step3 :create an object for Matrix Layout Row step4 :create an object for appropriate screen element ). text : 'EMPLOYEE BY SALARY GRAPH'}.

commons.RowRepeater( ). //for FIRST COLUMN in ROW REPEATER .layout.e row repeater can display other screen elements like TextField -value TextArea -value TextView -text RatingIndicator -value Button -text ProgressIndicator -percentValue CheckBox -checked etc . matrixRow = new sap.etc..SAP-FIORI as and we maintain Data Binding with appropriate Property and odata ABAP FIELD ____________ step5 :create an object for MatrixLayout Cell step6 : Add screen element to MatrixLayout cell step7 : Add matrixlayout cell to Matrix Row step8 : Repeat the steps from step 4 to step 7 for N number of columns step9 : ADd MatrixRow to MatrixLayout step10: create object for Odata MODEL step11: set Model to RowREPEATER step12 : bindRows to Rowrepeater with "ENTITYSET" of ODATA ABAP service and rowtemplate step13 : Place RowRepeater on CONTENT _____________________________________________________________________________ Note : Row repeater is a "Complex" screen element .setWidth("70%"). oRowTemplate.commons.setNumberOfRows(5). var matrixRow. i.layout.ui. var oRowTemplate = new sap.ui. oRowRepeater. control.commons.setCurrentPage(1). ______________________________________________________________________ var oRowRepeater = new sap.MatrixLayoutRow()..ui. oRowRepeater.MatrixLayout("theMatrix"). matrixCell.

control. matrixCell.layout. matrixRow.addContent(control). matrixCell. control.addCell(matrixCell).commons. matrixRow. matrixCell = new sap.MatrixLayoutCell().TextView().addCell(matrixCell).addContent(control).commons. //for 4th column in row repeater control = new sap.ui.addContent(control).commons."Firstname").bindProperty("text".addCell(matrixCell).SAP-FIORI as control = new sap. matrixRow.commons.TextView().addContent(control).MatrixLayoutCell().bindProperty("text"."Address").ui.layout. matrixCell = new sap.MatrixLayoutCell().ui.MatrixLayoutCell(). control. matrixRow.commons.layout.ui.MatrixLayoutCell().addCell(matrixCell).ui. matrixCell = new sap.bindProperty("text".addCell(matrixCell).commons.addContent(control).TextView().ui.commons.commons.layout.MatrixLayoutCell().TextView(). matrixCell = new sap."Email").ui. . control. matrixCell. matrixCell = new sap. 3 ).ui.commons. control. matrixCell. //rating indicator control = new sap. control.MatrixLayoutCell().commons.addContent(control).commons.layout. control. matrixRow. matrixCell.layout.ui.bindProperty("text".Image().ui.bindProperty("text".addCell(matrixCell).TextView().RatingIndicator(). //for third column in row repeater control = new sap.addContent(control). matrixRow.gif"). matrixCell = new sap. matrixCell = new sap."Age").ui. //for second column in row repeater control = new sap."success. //image control = new sap.commons.ui.commons. matrixRow.setProperty("src". matrixCell.commons.addCell(matrixCell). //for 5th column in row repeater control = new sap."Lastname").setProperty("value". matrixCell.ui.layout.ui.

odata. false. matrixCell = new sap. __________________________________________________________ .addCell(matrixCell). "userc24". matrixRow.commons. oRowRepeater.ui. matrixCell.ui.commons. matrixCell = new sap.placeAt("content").addRow(matrixRow).MatrixLayoutCell().model.commons."Firstname").ODataModel( "proxy/sap/opu/odata /SAP/ZUSERS_PROJECT_SRV". "sap123" ).addContent(control). oRowTemplate. matrixCell.addContent(control).ui. oRowRepeater. //consume odata ABAP service by creating model object var modelo = new sap.layout.setProperty("checked". oRowRepeater.SAP-FIORI as //button control = new sap. oRowTemplate). control.Button().bindRows("/UserSet".ui. //checkbox control = new sap. matrixRow.setModel(modelo).addCell(matrixCell). control.bindProperty("text".commons.ui.CheckBox().layout. true ).MatrixLayoutCell().

} ___________________________________________________ step2 : load css file properties into program <link rel="stylesheet" type="text/css" href="mystyle. visibility: visible. _________________________________________________________________ For ex : i want to add style properties to GRAPH obargraph. margin: 50px.css file .mystyle:HOVER{ border: 5px solid green. _________________________________________________________________ . margin-left: 10px.jpg"). border-style: solid.addStyleClass("mystyle").addStyleClass("mystyle").SAP-FIORI as cascading style sheets : _______________________ CSS : is used to apply the properties for changing the appearance of SAP Ui5/FIORI screen Elements ____________________________________________________________ step1 : create one . font-size: 15px. font-style: italic. letter-spacing: 1px. padding: 15px. _______________________________________________________________ For ex : i want to add style properties to TABLE oTable. color: red . background-repeat: no-repeat. text-align: left. background: orange.css"> ________________________________________________________________ step3 : addStyleClass to the SAP UI5/FIORI screen element oRowRepeater.addStyleClass("mystyle"). background-image: url("sachin.css file under webContent folder and maintain the below properties under . font-weight: bold.

________________________________________________________ capture the Input value of TEXT FIELD -------------------------------------textfieldo.getText( ). _______________________________________________________ capture the Input value of Password Field ------------------------------------------ .getChecked( ).getValue( ). _______________________________________________________ capture the checkbox status : ----------------------------checkboxo. capture the selected value from Radiobutton Group radiobuttongroupo.getValue( ).SAP-FIORI as Note : addStyleClass( ) is the common method for SAP UI5/FIORI screen element _____________________________________________________________________________________ Requirement : I want to enable css properties only when user moves cursor on to ROWREPEATER otherwise css properties should be disabled. solution : just use HOVER option _________________________________________________________________________________ Class-35_36: Capturing the values from Different screen elements: _______________________________________________________ capture the selected value from DROPDOWNBOX dropdowno.getSelectedItem( ).

. tableo.getCurrentpage( ).getSelectedIndex( ).getSelectedStep( ). _________________________________________________________ capture the selected Lowervalue and selected Higher Value of Range SLider ------------------------------------------------------------------------rangeslidero.getValue( ).SAP-FIORI as passwordo. -->capture lower selected value rangeslidero. ________________________________________ capture the selected Step of ROADMAP : ---------------------------------------roadmapo.getValue( ). ___________________________________________ capture the selected record of TABLE : -----------------------------------------var index = var selectedrecord = tableo.getValue2( ).getValue( ).getValue( ). ________________________________________________________ capture the selected rating from Rating indicator ------------------------------------------------ratingindicatoro. -->capture higher selected value __________________________________________________________________________ capture the selected value of SLIDER : --------------------------------------slidero. _________________________________________ capture the selected page of paginator : -----------------------------------------paginator.getContextByIndex(index).

ui.ui.SAP-FIORI as var fname = selectedrecord. var userid = selectedrecord.PasswordField( { value : "KIRAN KUMAR" }).commons. function capturefunc() { var textfieldvalue = textfieldo. _____________________________________________________________________ Syntax : Attaching FUnction to EVENT of SCreen ELEMENT seo.placeAt("content"). sap.attachPress(capturefunc). var buttono = new sap.ui.getProperty("Salary"). buttono.MessageBox.getProperty("Firstname").getValue( ). textfieldo. ______________________________________________________________________ syntax : for Implementing a Function function <functionName>( ) { //implement the code/functionality according to requirement } ________________________________________________________________________ For EXAMPLE : var textfieldo = new sap. .attach<EVENTNAME>(<FunctionName>).placeAt("content").getProperty("Userid"). var salary = selectedrecord.Button( { text : "SUBMIT DATA" } ). buttono.alert(textfieldvalue).commons.commons.

SAP-FIORI as } ________________________________________________________________________ var dropdownbox = new sap. dropdownbox.addItem(item). dropdownbox.ui. item = new sap.core.ui.addItem(item).ui.core. item = new sap.ListItem( { text : "ABAP" }). dropdownbox. item = new sap.ListItem( { text : "SAP HCM"}).ListItem( { text : "SAP FIORI"}). item = new sap.core.core. // set default selected value in dropdown .addItem(item).ui.addItem(item).core. item = new sap.ui.addItem(item). dropdownbox.ui. dropdownbox.ui. var item = new sap.commons.core. dropdownbox. dropdownbox.addItem(item).ListItem( { text : "SAP oDATA "}).core.ListItem( { text : "SAP SD"}).ui.ListItem( { text : "SAP UI5"}).setValue("SAP FIORI"). dropdownbox.DropdownBox( ).addItem(item). item = new sap.ListItem( { text : "WEBDYNPRO"}).

itemm = new sap. key : "SINGAPORE" } ).addItem(itemm).core. radiobuttongroup. radiobuttongroup. radiobuttongroup.Item({ text : "USA" .Item({ text : "CHINA" . itemm = new sap.ui.placeAt("content").core.SAP-FIORI as dropdownbox.core. radiobuttongroup.ui. itemm = new sap. radiobuttongroup. itemm = new sap.ui.addItem(itemm). key : "CHINA" } ). radiobuttongroup.commons.RadioButtonGroup( { columns : 1 } ).placeAt("content"). key : "NEPAL" } ).ui. .Item({ text : "INDIA" . ///radiobutton group var radiobuttongroup = new sap.addItem(itemm). radiobuttongroup.ui.Item({ text : "NEPAL" .core. key : "MALAYSIA" } ).addItem(itemm).ui. key : "INDIA" } ). itemm = new sap.ui.core.core.addItem(itemm). var itemm = new sap. key : "USA" } ).Item({ text : "MALAYSIA" .addItem(itemm).Item({ text : "SINGAPORE" .

ui.placeAt("content"). value2 : 240 . . max : 300 .placeAt("content"). //Range Slider : var rangeslidero = new sap. stepLabels : true } ).commons.Paginator( { numberOfPages : 20 }) .placeAt("content2"). ratingo.RangeSlider({ width : '30%'. paginatoro.SAP-FIORI as //rating indicator var ratingo = new sap.commons. rangeslidero.commons. value : 150 . var paginatoro = new sap.RatingIndicator( { maxValue: 5}). totalUnits : 5. min : 100 .ui.ui.

getValue2( ). var ratingvalue var currentpage = ratingo. sap. var lowervalue = rangeslidero.getSelectedItem().getValue( ).SAP-FIORI as function capturefunc() { var textfieldvalue = textfieldo. = paginatoro.getValue( ).getCurrentPage( ). var radiobuttonvalue = radiobuttongroup.getValue( ). var highervalue = rangeslidero.ui.alert( lowervalue + " " + highervalue ).commons.getText().getValue(). var dropdownvalue = dropdownbox. } ________________________________________________________________________________ Capture the selected step of RoadMap .MessageBox.

SAP-FIORI as _______________________________________ roadmapo.getSelectedStep().MessageBox. then radiobuttongroup should be Visible submitbutton should be enabled . then radiobuttongroup should be Invisible submitbutton should be disabled password field should be disabled if user selects any other step . sap.ui.commons. -----------------------------------------------------function captureroadmapstepfun( ) { var selectedstep = roadmapo. } _________________________________________________________ Requirement : How to make screen elements VISIBLE-INVISIBLE dynamically How to make screen elements enabled-Disable dynamically __________________________________________________________________ if user selects step4 in roadmap .attachStepSelected(captureroadmapstepfun).alert("THE SELECTED STEP IS " + " " +selectedstep) .

setVisible(true).setEnabled(true).setEnabled(false).setVisible(false). } else{ radiobuttongroup.setEnabled(true).setEnabled(false). buttono. . if(selectedstep=="step4") { radiobuttongroup. buttono.getSelectedStep().SAP-FIORI as password field should be enabled __________________________________________________________________________________________ implement the below code: function captureroadmapstepfun( ) { var selectedstep = roadmapo. textfieldo. textfieldo.

var selectedrecord = tableo.getProperty("Cityto"). var airlineid = selectedrecord. var airline = selectedrecord.getProperty("Cityfrom"). var cityto = selectedrecord.getProperty("Airline").getContextByIndex(index).getProperty("Price"). . var price = selectedrecord.getProperty("Airlineid").getSelectedIndex( ).SAP-FIORI as } } __________________________________________________________________________ Note : setVisible( ) is the common method for every screen element in SAP UI5/FIORI setEnabled( ) is the common method for every screen element in SAP UI5/FIORI _____________________________________________________________________________ Capturing selected record from the Table : _______________________________________________ function capturefunc() { var index = tableo. var cityfrom = selectedrecord.

commons.attachRowSelectionChange(capturefunc).MessageBox.commons.ui.INformation -->Normal Icon for INformation Message . Class-37_38: SAP UI5 Messages ____________________________ Method summary : sap.Icon.ui.we can use different ICOns for Different Messages sap.SAP-FIORI as } _________________________________________________________ Note : if required we can use rowSelectionChange event for TABLE for ex : tableo.Icon.Icon.MessageBox.MessageBox.WARNING -->Yellow Icon for Warning MEssage sap.commons.MessageBox.show( ) ----> for Success Message for Error message for Warning Message for Information Message ________________________________________________________________________ In show method .ui.commons.ui.alert( ) ----> for Alert Message sap.commons.SUCCESS -->GREEN ICON for Success message sap.Icon.confirm( ) ----> for Confirmation Dialog Message sap.MessageBox.MessageBox.commons.MEssageBox.commons.ui.ERROR -->RED ICOn for Error MEssage sap.ui.ui.

MessageBox. "PLEASE CONFIRM" ).confirm("Do you want to Approve Leave REQUEST ? ?".MessageBox.commons. } .ui. } _______________________________________________________________ For Confirmation Message: ____________________________ function openalert( ) { sap.commons. } For Error Message_ ________________________ function fnCallbackMessageBox(sResult) { alert("Result returned to fnCallbackShow1: " + sResult).ui.SAP-FIORI as _____________________________________________________________________________ syntax : We can attach function to EVENT of a SCREEN ELEMENT <EventName> : <FunctionName> _______________________________________________________________ For Alert Message : ____________________ function openalert( ) { sap.alert("OASIS TECHNOLOGIES for Training").

NO].SAP-FIORI as function openmessage( ) { // this is required since there is no direct access to the box's icons like MessageBox. "This could be dangerous".commons.placeAt("content").INFORMATION.MessageBox. sap.commons.MessageBox").Icon.ui.ui.Action.commons. } var button = new sap.commons.Action.Icon.YES.commons.ui. fnCallbackMessageBox.MessageBox.commons. ________________________________________________ DIALOG BOX : .require("sap.show("PLEASE ENTER FIRSTNAME".ui. sap.ui. sap.YES). // open a fully configured message box sap.Action.commons.ui.ui.MessageBox. press : openmessage }).WARNING jQuery. button.MessageBox.MessageBox.sap.Button( { text : "OPEN MESSAGE" . [sap.

ui.placeAt("content").addContent(imageo). var imageo = new sap.commons. button. dialogo.open( ).ui.ui.commons.ui. dialogo. // dialogo.commons.setTitle("EMPLOYEE TABLE"). function opendialog( ) { var dialogo = new sap. press : opendialog }).Image( { src : "MS.TextView( { text: " OASIS TECHNOLOGIES " }).addContent(textviewo). dialogo. dialogo.commons.setModal(true) .GIF" }) . var textviewo = new sap.Button( { text : "OPEN MESSAGE" .Dialog( ).SAP-FIORI as _________________________ var button = new sap. .

.SAP-FIORI as } _________________________________________________ Procedure: ______________ step1 :create object for DIALOG step2 : generate content according to requirement ( like TABLE.. TEXTVIEW. Then The fields are arranged in Content in the form "ARRAY" with index 0 to index n . ) step3 :Assign Content to Dialog box using addContent( ) method step4 : Open dialog box ________________________________________________________ NOTE : dialog box can be of TWO TYPEs 1) Modal Dialog box ( primary view/window will be disabled on opening Dialog box ) 2) Non-Modal Dialog box ( primary view/window will be Normal even after opening Dialog box ) _________________________________________________ FORM in SAP UI5 __________________________________ Note : if we use SimpleForm class from SAP UI5 library . IMAGE etc. GRAPH..

getContent( ). content[1]. _____________________________________________ passwordfieldo. use below syntax : var content[] = oSimpleForm.attachChange(function). __________________________________________________________________ Doubts : LISTENER can be used to capture the action triggered by USER at RUNTIME __________________________________________________ textfieldo.getValue( ). content[1]. content[7].setValue("VALUE").getValue( ). content[5]. content[7]. content[5].SAP-FIORI as Note : To capture the values of text Fields of Simple Form then.getValue( ). content[3]. use below syntax : var content[] = oSimpleForm.setValue("VALUE").attachChange(function). __________________________________________________________ Note : To Set the values of TExt Fields of SimpleForm then . content[3]. .getValue( ).getContent( ).setValue("VALUE").setValue("VALUE").

_____________________________________________________ Note : We can place dropdown also inside SimpleForm : content[6].attachSelect(function).attachSelect(function).attachRowSelectionChange(function).SAP-FIORI as ______________________________________________ dropdownbox. _________________________________________________ tableo.getValue( ). . ________________________________________________ radiobuttongroup.

as SAP-FIORI .

as SAP-FIORI .

as SAP-FIORI .