SAP-UI5 Fiori Apps

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
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;
__________________________________________________
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
Internal Table Operations
Workarea Operations
String Operations
-->Concatenate,Condense,Replace, Translate, Shift, Split
System Variables
-->Sy-Uname,Sy-Lang,Sy-Datum,Sy-Uzeit,Sy-Index,Sy-Subrc,Sy-Tabix Etc.
Data Dictionary(Se11)
-->Domains, Data Elements, Search Helps, Views, Tables, Table Types, Structures
Call Function 'Fm/Rfc/Bapi' ( Which Are Not Related Abap Screens )
If--Elseif.
Loop At Itab To Wa.
//
Endloop.
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.....
Etc......
________________________________________________________________________
Data Types In Odata Abap Services:
Note : Odata Datatypes Are Also Known As 'Edm" Data Types.
____
Entity Data Model
Edm.String
Edm.Boolean
Edm.Byte
Edm.Datetime
Edm.Decimal
Edm.Single
Edm.Double
Edm.Time
Edm.Float
Edm.Int16
Edm.Int32
Edm.Int64
Edm.Sbyte
Edm.Guid
Edm.Binary
SAP-FIORI
as
_________________________________________________________________________
Note : For Each Abap Data Type , We Have Equivalent Odata Edm Data Type
Refer The Field Abap ,,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,
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.
Note : Now, Entity Type, & 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, Fields Are Known As "Properties"
----------____________________________________________________________________
Note : Each Entityset Contains -> 5 Methods ( Crud Operations )
I,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
SAP-FIORI
as
___________________________________________________________________________
Note : Under Single Odata Abap Service, We Can Have Many Entity Types
We Can Have Many Entity Sets
___________________________________________________________________________
Note :
For Each Entity Set , Framework Will Generate Separate Crud Operations/Methods
_______________________________________________________________________________
Note :
When We Refer Abap Fields Inside Odata Services,
Framework Automatically Converts Abap Data Types Into Its Eqivalent Odata Edm Data Types
_________________________________________________________________________________________
Note :
Under Model Provider Class ( Mpc ):
___________________________________
As A Developer , 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
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, A Developer Need To Implement Your Functionalities In
"Data Provider Extension Class".
______________________________________________________________________________
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
*
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 ,
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, Automatically ,
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 ,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
SAP-FIORI
as
Data : Firstname Type Zcl_Mpc=>Tablestructure-Firstname

Data : Salary
Type Zcl_Mpc=>Tablestructure-Salary.
_______________________________________________________________
Data : Salary
Type I.
Data : Firstname
Type String.
Class-5:
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
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
___________________________________________________________________
Get_Stream Method
Er_Stream
Will Send Output
____________________________________________________________________
Create_Stream Method
Is_Media_Resource
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
Will Accept Input
___________________________________________________________________
Execute_Action Method
Will Accept Input
Er_Data
Will Send Output
___________________________________________________________________
Get_Expanded_Entity Method
SAP-FIORI
as
Er_Entity
Will Send Output
Et_Expanded_Tech_Clauses
Will Send Output
____________________________________________________________________
Get_Expanded_Entityset Method
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 , 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, 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 )
___________________________________________________________________________
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 .
It Is Responsible For Sending Output Records To Front End Apps( Ui5/Fiori/Php/ Etc. )
_____________________________________________________________________________
Step1 : Goto Segw Tcode, Create Zproject With All Default Settings.
Step2 : Right Click Data Model, Import Ddic Structure ,
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.
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.218.22.191:8000/Sap/Opu/Odata/Sap/Zonline_Project_111_Srv/
It Provides The Complete Uri Of The Service
Http
Protocal
117.218.22.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,Firstname,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.
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 , so we cannot apply conditions )
2) Without Mapping technique( code is implemented by Developer , 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 ,
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
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,Airline,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
__________________________________________________________________________________
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.
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
/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,Airline,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.
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.218.22.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.Extension under hosts file
117.218.22.191
stfiorisrvr.st.com
SAP-FIORI
as
_____________________________________________________________
Developing odata service with Multiple KEY fields for fetching record
_______________________________________________________________________
Step1 : create project
step2 : create ENTITY TYPE , ENTITY SET with DDIC structure
and chose required fields,
and make USERID and FIRSTNAME
as KEY FIELDs in ENTITY TYPE.
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.
data wa_Key_tab2 TYPE /IWBEP/S_MGW_NAME_VALUE_PAIR.
READ TABLE IT_KEY_TAB into wa_key_tab1 INDEX 1.
Read TABLE IT_KEY_TAB into WA_KEY_TAB2 index 2 .
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
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 , use
/sap/opu/odata/SAP/ZONLINE_PROJECT_117_SRV/EMPSet(Userid='1001',Firstname='VIJAY')
______ ____ _________ ______
KEY 1 value KEY 2
value
_____________________________________________________________________________________
Class-11:
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, "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.
IO_DATA_PROVIDER->READ_ENTRY_DATA( impORTING ES_DATA = WA ).
IF wA-USERID IS NOT INITIAL.
insert INTO ZUSERINFO VALUES wa.
ENDIF.
SAP-FIORI
as
______________________________________________________________________
ACTIVATE DPc_ext CLASS.
GOTO GATEWAY CLIENT AND TEST THE SERVICE
________________________________________________________
First GET THE RECORD , SO WE CAN GET THE FORMAT OF RECORD REPRESENTATION
AND USE THE SAME FORMAT FOR INSERTING 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
data wa TYPE ZCL_Z9PM_PROJECT1_MPC=>TS_EMP.
IO_DATA_PROVIDER->READ_ENTRY_DATA( IMPORTING ES_DATA = WA ).
if wa-userid is not initial.
UPDATE ZUSERinfo SET FIRSTNAME = wa-FIRSTNAME
LASTNAME = wa-LASTNAME
EMAILID = wa-EMAILID
Salary
= wa-SALARY
where USERID = wa-USERID .
endif.
_______________________________________________________
activate DPC_Ext class
open gateway client
test the service
________________________________
Get the record along format
and "use AS REQUEST " .
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
data wa_key_tab TYPE /IWBEP/S_MGW_NAME_VALUE_PAIR.
Read TABLE IT_KEY_TAB into wa_KEY_TAB index 1.
DELETE from ZUSERINFO
where USERID = wa_KEY_TAB-VALUE.
_______________________________________________________________
activate DPC_Ext class
and goto gateway client and test the service
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
------------------------------ -----------------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
data wa
TYPE ZCL_Z9PM_PROJECT_FILES_MPC=>TS_FILE.
Read TABLE IT_KEY_TAB into wa_key_tab index 1.
WA-SYDATE = sy-datum .
WA-SYTIME = sy-UZEIT .
WA-FILENAME = WA_KEY_TAB-VALUE.
Wa-MIMETYPE = IS_MEDIA_RESOURCE-MIME_TYPE.
"here mime tye is file type.
Wa-CONTENT = IS_MEDIA_RESOURCE-VALUE .
"here value is FILE CONTENT.
If wa-filename is not initial.
INSERT Into ZFILESTABLE values WA.
endif.
____________________________________________________
NOTE: IS_MEDIA_RESOURCE maintains file content and file TYPE
step5: activate that method
SAP-FIORI
as
Step6 : REDEFINE GET_STREAM method and implement the CODE
data wa_stream TYPE TY_S_MEDIA_RESOURCE.
data wa
TYPE ZCL_Z9PM_PROJECT_FILES_MPC=>TS_FILE.
Read TABLE IT_KEY_TAB into wa_key_tab index 1.
select single * from ZFILESTABLE into WA where Filename = wa_key_tab-VALUE.
WA_STREAM-VALUE
= wa-CONTENT.
WA_STREAM-MIME_TYPE = wa-MIMETYPE.
COPY_DATA_TO_REF( exporting IS_DATA = WA_stream
changing cr_data = ER_STREAM ).
_____________________________________________________________________
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 , attach File under HTTP request FOR "FILE UPLOAD"
and use Put operation
/sap/opu/odata/SAP/Z9PM_PROJECT_FILES_SRV/FileSet('fiori.pdf')/$value
and execute the service
__________________________________________________
while testing, For "FILE DOWNLOAD"
use GET operation
/sap/opu/odata/SAP/Z9PM_PROJECT_FILES_SRV/FileSet('fiori.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 *
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 , each statement ends with semicolon ( i,e ; )
From SAP UI5/FIORI scripting, 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 code is executed
}
____________________________________________
IF-ELSE condition statement
if(condition)
{
//if condition is true, then this block is executed
} else
SAP-FIORI
as
{
//if condition is false, then this block is executed
}
______________________________________________
If--ELSE IF---ELSE
If(condition1)
{
//if condition1 is true, 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, and condition2 is false
then this block is executed
}
Loop statement for Iteration :

for( i = 0 ; i < 10 ; i++ )
i-{
//implement code
}
______________________________________________
Switch statement :
_____________________
it is used to perform different actions based on different conditions.
switch( )
{
case value1:
//implement functionality;
break;
case value2:
break;
case value3:
break;
}
_____________________________________________________
Boolean statement :
_____________________
Boolean(10 > 9)
//returns true
Boolean(Condition)
//returns true if condition is true, else it returns false
(10 > 9 )
//returns true
10 > 9
//return true
______________________________________________________________
variables in SCRIPTING:
SAP-FIORI
as
----------------------To declare a variable , we use "var" KEYWORD
Variables are like containers to HOLD the data at RUNTIME.
For EX :
var x = 5 ;
var Y = 6 ;
var z = X + Y ;
var x = 4.5 ;
var name = "VIJAY" ;
or
var name = 'VIJAY' ;
var carname;
var carname = "HONDA" ;
var name = "VIJAY" , age = 30 , address = "HYDERABAD" ;
var X = 5 + 2 + 3 ;
var fullname = "AJAY" + " " + "KUMAR" ;
Note : if required, we can use "Arithematic Operators" in scripting

+
addition
Subtraction
*
Multiplication
/
Division
%
Modulus
++
Increment
-Decrement
_______________________________________________________________
Increment operator :
var x = 5 ;
x++ ;
var z = x ;
--> the value of z becomes 6
_______________________________________________________________
Decrement operator :
var x = 5 ;
x-- ;
var z = x ;
---> 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
SAP-FIORI
as
!
NOT
___________________________________________________________
Conditional TERNARY operator in scripting:
____________________________________________
syntax :
var <varname> = ( Condition) ?
value1 : value2 ;
For example :
var salary = (experience > 5 ) ?
8000000 : 400000 ;
var voteable = ( age > 18 )
? "eligible" : "Not eligible" ;
__________________________________________________________________________
if experience > 5 , THEN salary = 800000
else
salary = 400000
if age > 18 , then voteable = "ELIGIBLE"

else
Voteable = "NOTE ELIGIBLE"
____________________________________________________________
NOTE : In SCripting , Variables can Hold values of Different data types :
NUmbers
DECIMALS
Strings
ARRAYs
OBJECTS
BOOLEAN
_______________________________________________________________
For example :
var salary = 40000;
//NUmber
var experience = 3.5 ;
//NUmber with decimal
var firstname = "AJAY"
// String
var cars = [ "HONDA" ,"BMW" ,"VOLVO" ];
// Array
var x = { firstname :"VIJAY", age : 30 } ;
//OBJECT
______________________________________________________
var
var
var
var
fname = "VIJAY" ;
lname = "KUMAR" ;
age
= 30 ;
address = "HYDERABAD" ;
var person = [ fname , lname , age, address ];

//Array
______________________________________________________________________________
var x = { firstname :"VIJAY" , lastname : "KUMAR" , age : 30 } ;
//OBJECT
_____________________________________________________________________________
NOte : Array is used to hold more than one value at time.
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
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>.ClassName( ID, {
property1 : value,
property1 : value,
property3 : value
} );
___________________________________________________________________
seo.<method1>( );
seo.<method2>( );
seo.<method3>( );
___________________________________________________________________
seo.placeAt("content");
____________________________________________________________________
SAP Ui5/FIORI Application Header:
---------------------------------It is used to display TITLE, welcome area, logo, logoff option, etc...
var aho = new sap.ui.commons.ApplicationHeader("appheader");
aho.setLogoSrc("MS.GIF");
aho.setLogoText("OASIS TECHNOLOGIES Hyderabad");
aho.setDisplayWelcome(true);
aho.setUserName("VIJAYENDAR REDDY");
aho.placeAt("content");
____________________________________________________________
SAP UI5 TEXT VIEW :
-------------------it is used to display text on screen
var tvo = new sap.ui.commons.TextView( );
tvo.setText("WELCOME TO SAP UI5/FIORI TRAINING");
tvo.setTooltip("WELCOME TEXT");
SAP-FIORI
as
tvo.setWidth('700px');
tvo.setDesign(sap.ui.commons.TextViewDesign.H2);
tvo.setSemanticColor(sap.ui.commons.TextViewColor.Positive);
tvo.placeAt("content");
________________________________________________________________________
Note :
sap.ui.commons.TextViewDesign.H1 to H6
.Bold
.Italic
.Small
.Underline
sap.ui.commons.TextViewColor.Positive
.Negative
.Critical
.Standard
______________________________________________________________________
SAP UI5 LINK :
________________
It is used to link to other applicatoin via URL address with href property
var linko = new sap.ui.commons.Link({
text : "GOOGLE SEARCH" ,
href : 'http://www.google.co.in/maps/place/New York'
});
linko.placeAt("content");
_____________________________________________________________________________
Note :
https://sapui5.netweaver.ondemand.com/sdk
under that chose screen element according to requirement.
and GOTO API documentation
and Recognize 1) Properties
2) Methods
3) Events
___________________________________________________________
SAP Ui5/FIORI contains mainly below packages/libraries
sap.ui.commons
sap.ui.table
sap.ui.layout
sap.ui.unified
sap.viz
sap.m
sap.me
etc....etc..etc...
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.ui.commons.TextField({
id : 'textfield',
value : "OASIS " ,
width : '15em'
} );
tfo.placeAt("content");
__________________________________________________________________
SAP UI5 Password Field :
__________________________
use the same code :
But change the class name to PasswordField
___________________________________________________________________
var tfo = new sap.ui.commons.PasswordField({
id : 'textfield',
value : "OASIS " ,
width : '15em'
} );
tfo.placeAt("content");
_________________________________________________________________________
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.ui.commons.Label( );
labelo.setText("PLEASE ENTER your PASSWORD");
SAP-FIORI
as
labelo.setRequired(true);
labelo.setDesign(sap.ui.commons.Labeldesign.Bold);
labelo.setTooltip("ENTER PASSWORD VALUE" );
labelo.placeAt("content");
_________________________________________________________
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 , goto above file, 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.setTooltip("PLEASE ENTER PASSWORD FIELD");
similarly , we can use
seo.setTooltip("TOOLTIP TEXT" );
_________________________________________________________
Rich Tool Tip :
________________
In case of Rich Tool tip, we can provide TOOLTIP TEXT, 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.ui.commons.RichTooltip({
text: "PLEASE ENTER PASSWORD VALUE",
title : "PASSWORD TOOLTIP",
imageSrc : "MS.GIF"
});
tfo.setTooltip( richtooltipo );
_____________________________________________________
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
} );
_____________________________________________________________________________
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
} );
___________________________________________________
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
} );
___________________________________________________________
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");
_____________________________________________
SAP-FIORI
as
note : BarColor.CRITICAL
NEGATIVE
POSITIVE
STANDARD
______________________________________________
SAP UI5 Rating Indicator :
___________________________
This allows enduser to provide rating for various options
var ratingindicatoro = new sap.ui.commons.RatingIndicator({
maxvalue : 5,
value : 2
});
ratingindicatoro.placeAt("content4");
Class-28:
SAP UI5 CAROUSEL :
______________________
Carousel is a screen element that can display N of UI5 Screen elements
UNder CAROUSEL, NAVIGATION is done through the arrow buttons .
Carousel can be displayed either VERTICALL or HORIZONTAL.
var carousel = new sap.ui.commons.Carousel( );
carousel.setWidth("100%");
carousel.setOrientation("horizontal");
var img1 = new sap.ui.commons.Image({
"120%" });
"120%" });
"120%" });
"120%" });
"120%" });
"120%" });
"120%" });
carousel.addContent(img1);
src : "images/abc.jpg"
, width : "95%" , height :
src : "images/ajay.jpg"
src : "images/claudia.jpg" , width : "95%" , height :

src : "images/deepak.jpg"
src : "images/marie.jpg"
src : "images/ramesh.jpg"
src : "images/suman.jpg"
SAP-FIORI
as
carousel.placeAt("content");
_______________________________________________________________
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.ui.commons.DropdownBox( );
var item = new sap.ui.core.ListItem( { text : "ABAP" });
dropdownbox.addItem(item);
item = new sap.ui.core.ListItem( { text : "WEBDYNPRO"});
item = new sap.ui.core.ListItem( { text : "SAP UI5"});
item = new sap.ui.core.ListItem( { text : "SAP FIORI"});
item = new sap.ui.core.ListItem( { text : "SAP oDATA "});
item = new sap.ui.core.ListItem( { text : "SAP HCM"});
item = new sap.ui.core.ListItem( { text : "SAP SD"});
dropdownbox.setValue("SAP FIORI"); // set default selected value in dropdown
dropdownbox.placeAt("content");
_________________________________________
SAP UI5 COMBO BOX:
__________________________
var combobox = new sap.ui.commons.ComboBox( );
var item1 = new sap.ui.core.ListItem( { text : "ABAP" });
combobox.addItem(item1);
SAP-FIORI
as
item1 = new sap.ui.core.ListItem( { text : "WEBDYNPRO"});
item1 = new sap.ui.core.ListItem( { text : "SAP UI5"});
item1 = new sap.ui.core.ListItem( { text : "SAP FIORI"});
item1 = new sap.ui.core.ListItem( { text : "SAP oDATA "});
item1 = new sap.ui.core.ListItem( { text : "SAP HCM"});
item1 = new sap.ui.core.ListItem( { text : "SAP SD"});
combobox.setValue("SAP FIORI"); // set default selected value in dropdown
combobox.placeAt("content");
____________________________________________________
Difference between DROPDOWN BOX and COMBOBOX:
----------------------------------------------in dropdown box , user can select a value from existing list "only"
in Combobox , user can select a value from existing list
or
user can provide a new value which is not part of list also.
____________________________________________________________________________
SAP Ui5 RADIOBUTTON GROUP :
__________________________________
step1 : create an object for RADIOBUTTON GROUP CLASS
step2 : create object for ITEM and set TEXT, KEY properties
step3 : add Item to RADIOBUTTON GROUP
repeat step2 , step3 according to number of values in RADIOBUTTOn GROUP
step4 : place RADIOBUTTOn GROUP on content
________________________________________________
var radiobuttongroup = new sap.ui.commons.RadioButtonGroup( { columns : 1 } );
var itemm = new sap.ui.core.Item({ text : "INDIA" , key : "INDIA" } );
radiobuttongroup.addItem(itemm);
itemm = new sap.ui.core.Item({ text : "USA" , key : "USA" } );
itemm = new sap.ui.core.Item({ text : "CHINA" , key : "CHINA" } );
SAP-FIORI
as
itemm = new sap.ui.core.Item({ text : "SINGAPORE" , key : "SINGAPORE" } );

itemm = new sap.ui.core.Item({ text : "NEPAL" , key : "NEPAL" } );
itemm = new sap.ui.core.Item({ text : "MALAYSIA" , key : "MALAYSIA" } );
radiobuttongroup.placeAt("content");
_________________________________________________________________________
SAP UI5 PANEL :
____________________________
Note : PANEL is like a container, which can contain screen elements
PANEL content be minimized or maximized .
PANEL acts like a SECTION in OUTPUT SCREEN
____________________________________________________________________________
var panel = new sap.ui.commons.Panel( { text: "EMPLOYEE LIST" });
panel.addContent(dropdownbox);
panel.addContent(radiobuttongroup);
panel.placeAt("content");
____________________________________________________________________________
Class-29:
SAP UI5 Check BOX :
____________________
var checkbox = new sap.ui.commons.CheckBox( {
text : "I AM interested in SAP UI5",
checked : true
} );
checkbox.placeAt("content");
__________________________________________
SAP UI5 ROADMAP screen element
_________________________________
Roadmap is used to display the "sequence of steps" on a SCREEN.
-----------------Roadmap can have : three types of Navigations
a) Forward navigation
b) backward navigation
c) Select Navigation
For Example :
Roadmap can be used for
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.ui.commons.RoadMap( );
var
var
var
var
step1o
step2o
step3o
step4o
=
=
=
=
new
new
new
new
var substep1
STEP1"});
var substep2
STEP2"});
sap.ui.commons.RoadMapStep(
{
{
{
{
id
id
id
id
:
:
:
:
"step1"
"step2"
"step3"
"step4"
,
,
,
,
label
label
label
label
:
:
:
:
"LOGIN" }
"INPUT" }
"HEADER"
"ITEMS" }
);
);
} );
);
= new sap.ui.commons.RoadMapStep( { id
: "substep1" , label
: "HEADER SUB
= new sap.ui.commons.RoadMapStep( { id
: "substep2" , label
: "HEADER SUB
step2o.addSubStep(substep1);
step2o.addSubStep(substep2);
roadmapo.addStep(step1o);
roadmapo.setSelectedStep("step1");
roadmapo.setNumberOfVisibleSteps(8);
roadmapo.placeAt("content");
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.ui.commons.Splitter( );
splitter.setSplitterOrientation(sap.ui.commons.Orientation.Vertical);
splitter.setSplitterPosition("50%");
splitter.setMinSizeFirstPane("30%");
splitter.setMinSizeSecondPane("30%");
splitter.setWidth("100%" );
splitter.setHeight("400px");
splitter.addFirstPaneContent(roadmapo);
splitter.addSecondPaneContent(radiobuttongroup);
splitter.placeAt("content");
_____________________________________________________________
Class-30:
SAP UI5 DATE PICKER:

_______________________
var datepickero = new sap.ui.commons.DatePicker( );
datepickero.setYyyymmdd("20100101" );
SAP-FIORI
as
datepickero.setLocale("fr");
//ar,de,en,fr
datepickero.placeAt("content");
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 ,based on Number of VALUES
step4 : place Listbox on content
_______________________________________________________________
Implement the code for LIST BOX
var listboxo = new sap.ui.commons.ListBox( );
var listitemo = new sap.ui.core.ListItem( { text : 'SAP ABAP' } );
listboxo.addItem(listitemo);
listitemo = new sap.ui.core.ListItem( { text : 'SAP UI5' } );
listitemo = new sap.ui.core.ListItem( { text : 'SAP FIORI' } );
listitemo = new sap.ui.core.ListItem( { text : 'SAP ODATA' } );
listitemo = new sap.ui.core.ListItem( { text : 'SAP HR' } );
listitemo = new sap.ui.core.ListItem( { text : 'SAP CRM' } );
listboxo.setAllowMultiSelect(true); //it will allow multiple selections on LISTBOX
listboxo.placeAt("content");
____________________________________________________________________________
SAP UI5 TABSTRIP:
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.ui.commons.TabStrip( );
tabstrip.setWidth("800px");
tabstrip.setHeight("300px");
var
var
var
var
var
var
var
var
tab1o
tab2o
tab3o
tab4o
=
=
=
=
tab1title
tab2title
tab3title
tab4title
new
new
new
new
=
=
=
=
sap.ui.commons.Tab(
sap.ui.commons.Tab(
sap.ui.commons.Tab(
sap.ui.commons.Tab(
new
new
new
new
sap.ui.core.Title({
sap.ui.core.Title({
sap.ui.core.Title({
sap.ui.core.Title({
);
);
);
);
text
text
text
text
:
:
:
:
"GENERAL DATA" } );
"ADDRESS DATA" } );
"CONTRACT DATA" } );
"COMMUNICATION DATA" } );
tab1o.setTitle(tab1title);
tab1o.addContent(listboxo);
tab2o.addContent(roadmapo);
tab3o.addContent(radiobuttongroup);
tabstrip.addTab(tab1o);
tabstrip.placeAt("content");
______________________________________________________________
SAP-FIORI
as
Note : if required we can add table as content to tab of tabstrip
tab1o.addContent(tableo);
________________________________________________________________
SAP UI5 TABLE:
_____________________
TABLE is a "Complex" Screen element, bcoz inside a TABLE , we can add other screen elements
_________
ie, 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
_________
SAP-FIORI
as
step8 : Place the table on content of Output screen
_______________________________________________________________________
Implement the below code
var modelo = new sap.ui.model.odata.ODataModel(
"proxy/sap/opu/odata/SAP/ZFLIGHTSPROJECT_SRV/",
false,
"userc24",
"sap123"
);
var tableo = new sap.ui.table.Table( { title : "FLIGHT RECORDS" ,
visibleRowCount : 7 ,
navigationMode: sap.ui.table.NavigationMode.Paginator,
} );
tableo.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Airline ID"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Airlineid")
}));
label: new sap.ui.commons.Label({text: "Airline"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Airline")
}));
label: new sap.ui.commons.Label({text: "Connectid"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Connectid")
}));
label: new sap.ui.commons.Label({text: "Airportfr"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Airportfr")
}));
label: new sap.ui.commons.Label({text: "Airportto"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Airportto")
}));
label: new sap.ui.commons.Label({text: "City From"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Cityfrom")
}));
SAP-FIORI
as
label: new sap.ui.commons.Label({text: "Cityto"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Cityto")
}));
label: new sap.ui.commons.Label({text: "Price"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Price")
}));
tableo.setModel(modelo);
tableo.bindRows("/FLIGHTSET");
tableo.placeAt("content");
____________________________________________________________________________
Note : in Single application if required, we can consume multiple odata ABAP services
for EXAMPLE:
var modelo1 = .........../Zuserinfo_srv
var modelo2 = .........../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.....
Requirement :
-------------
TextVIEW:
inside a TABLE
SAP-FIORI
as
_________
if price < 500.00 -> display text as "REASONABLE"
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 Progress as 80%
if price >= 500
-> display progress as 20%
Rating INDicator:
__________________
if price < 500 . ->display Rating as 2 star
if price >= 500 . ->display Rating as 4 star
check box :
_____________________
if price < 500. ->display checked as SELECTED checkbox
if price >= 500 . ->display checked as De-selected checkbox
Note :
TO apply conditions,
we can make use of "FORMATTER function" concept in SAP UI5/FIORI
SAP-FIORI
as
__________________
Formatter function :
is used to apply conditions, and can display different values in a TABLE
_______________________________________________________
Note : TExt field , value is EDITABLE
Text vIew, 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
label: new sap.ui.commons.Label({text: "STATUS"}),
template: new sap.ui.commons.TextView().bindProperty("text", "Price" , function(pvalue)
{
if(pvalue > 500.00)
{ return "EXPENSIVE"; }
else{ return "REASONABLE"; }
SAP-FIORI
as
}));
label: new sap.ui.commons.Label({text: "IMAGE"}),
template: new sap.ui.commons.Image().bindProperty("src", "Price" , function(pvalue)
{
if(pvalue > 500.00)
{ return "success.gif" ; }
else{ return "error.gif" ; }
}));
label: new sap.ui.commons.Label({text: "Rating"}),
template: new sap.ui.commons.RatingIndicator().bindProperty("value", "Price" ,
function(pvalue)
{
if(pvalue > 500.00)
SAP-FIORI
as
{ return 4 ; }
else { return 2 ;}
})
}));
label: new sap.ui.commons.Label({text: "Progress"}),
template: new sap.ui.commons.ProgressIndicator().bindProperty("percentValue", "Price" ,
function(pvalue){
if(pvalue > 500.00)
{ return 80 ;}
else{ return 20 ;}
})
}));
label: new sap.ui.commons.Label({text: "Checkstatus"}),
template: new sap.ui.commons.CheckBox().bindProperty("checked", "Price" ,
function(pvalue){
SAP-FIORI
as
if(pvalue > 500.00)

{ return true ; }
else { return false ;}
})
}));
label: new sap.ui.commons.Label({text: "Airline"}),
template: new sap.ui.commons.Button().bindProperty("text", "Airline")
}));
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
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.ui.model.odata.ODataModel(

"proxy/sap/opu/odata/SAP/ZUSERINFO123_SRV",
false,
"userc24",
"sap123"
);
var dropdownboxo = new sap.ui.commons.DropdownBox( );
var listitemo = new sap.ui.core.ListItem( {
text: "{Firstname}" ,
key : "{Firstname}"
} );
dropdownboxo.setModel(modelo2);
SAP-FIORI
as
dropdownboxo.bindItems("/UserSet", listitemo );
dropdownboxo.placeAt("content");
______________________________________________
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.

_______________________________________________________
implement below code:
var radiobuttongroupo = new sap.ui.commons.RadioButtonGroup( { columns : 10 });
SAP-FIORI
as
var itemo = new sap.ui.core.Item({
text : "{Firstname}",
key : "{Firstname}"
});
radiobuttongroupo.setModel(modelo2);
radiobuttongroupo.bindItems("/UserSet" , itemo);
radiobuttongroupo.placeAt("content");
______________________________________________________
Graphs/Charts in SAP UI5

____________________________
Graphs/Charts in SAP UI5 are part of sap.viz package
------SAP Ui5/FIORI supports various types of Charts:
bar
line
column
pie
etc...etc...
___________________________________________________
step1 : create Model object for Odata ABAP service and consume the service
( if this already implemented then ignore this step )
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.viz.ui5.data.FlattenedDataset({
data
: { path : "/UserSet" } ,
dimensions : [ { axis : 1 , name : 'FirstName', value

: "{Firstname}" } ],
measures
: "{Salary}" }],
: [{
name : 'SALARY' , value
SAP-FIORI
as
});
var columno = new sap.viz.ui5.Column( { width : "80%" ,

height : "600px" ,
plotArea : { } ,
title : { visible : true , text :
'EMPLOYEE BY SALARY GRAPH'},
dataset :
}
columno.setModel(modelo2);
columno.placeAt("content");
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.
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
);
dataseto
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 ,
i,e row repeater can display other screen elements like
TextField
-value
TextArea
-value
TextView
-text
RatingIndicator
-value
Button
-text
ProgressIndicator -percentValue
CheckBox
-checked
etc ...etc.
______________________________________________________________________
var oRowRepeater = new sap.ui.commons.RowRepeater( );
oRowRepeater.setNumberOfRows(5);
oRowRepeater.setCurrentPage(1);
var oRowTemplate = new sap.ui.commons.layout.MatrixLayout("theMatrix");
var matrixRow, matrixCell, control;
oRowTemplate.setWidth("70%");
matrixRow = new sap.ui.commons.layout.MatrixLayoutRow();
//for FIRST COLUMN in ROW REPEATER
SAP-FIORI
as
control = new sap.ui.commons.TextView();
control.bindProperty("text","Email");
matrixCell = new sap.ui.commons.layout.MatrixLayoutCell();
matrixCell.addContent(control);
matrixRow.addCell(matrixCell);
//for second column in row repeater
control.bindProperty("text","Firstname");
//for third column in row repeater
control.bindProperty("text","Lastname");
//for 4th column in row repeater
control.bindProperty("text","Age");
//for 5th column in row repeater
control.bindProperty("text","Address");
//image
control = new sap.ui.commons.Image();
control.setProperty("src","success.gif");
//rating indicator
control = new sap.ui.commons.RatingIndicator();
control.setProperty("value", 3 );
SAP-FIORI
as
//button
control = new sap.ui.commons.Button();
control.bindProperty("text","Firstname");
//checkbox
control = new sap.ui.commons.CheckBox();
control.setProperty("checked", true );
oRowTemplate.addRow(matrixRow);
//consume odata ABAP service by creating model object
var modelo = new sap.ui.model.odata.ODataModel(
"proxy/sap/opu/odata
/SAP/ZUSERS_PROJECT_SRV",
false,
"userc24",
"sap123"
);
oRowRepeater.setModel(modelo);
oRowRepeater.bindRows("/UserSet", oRowTemplate);
oRowRepeater.placeAt("content");
__________________________________________________________
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 .css file under webContent folder
and maintain the below properties under .css file
.mystyle:HOVER{
border: 5px solid green;
border-style: solid;
color: red ;
background: orange;
background-image: url("sachin.jpg");
background-repeat: no-repeat;
padding: 15px;
visibility: visible;
font-weight: bold;
text-align: left;
font-size: 15px;
font-style: italic;
margin-left: 10px;
margin: 50px;
letter-spacing: 1px;
}
___________________________________________________
step2 : load css file properties into program
<link rel="stylesheet" type="text/css" href="mystyle.css">
________________________________________________________________
step3 : addStyleClass to the SAP UI5/FIORI screen element
oRowRepeater.addStyleClass("mystyle");
_______________________________________________________________
For ex : i want to add style properties to TABLE
oTable.addStyleClass("mystyle");
_________________________________________________________________
For ex : i want to add style properties to GRAPH
obargraph.addStyleClass("mystyle");
_________________________________________________________________
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.getValue( );
capture the selected value from Radiobutton Group
radiobuttongroupo.getSelectedItem( ).getText( );
_______________________________________________________
capture the checkbox status :
----------------------------checkboxo.getChecked( );
________________________________________________________
capture the Input value of TEXT FIELD
-------------------------------------textfieldo.getValue( );
_______________________________________________________
capture the Input value of Password Field
------------------------------------------
SAP-FIORI
as
passwordo.getValue( );
________________________________________________________
capture the selected rating from Rating indicator
------------------------------------------------ratingindicatoro.getValue( );
_________________________________________________________
capture the selected Lowervalue and selected Higher Value of Range SLider
------------------------------------------------------------------------rangeslidero.getValue( ); -->capture lower selected value
rangeslidero.getValue2( ); -->capture higher selected value
__________________________________________________________________________
capture the selected value of SLIDER :
--------------------------------------slidero.getValue( );
________________________________________
capture the selected Step of ROADMAP :
---------------------------------------roadmapo.getSelectedStep( );
_________________________________________
capture the selected page of paginator :
-----------------------------------------paginator.getCurrentpage( );
___________________________________________
capture the selected record of TABLE :
-----------------------------------------var index
var selectedrecord =
tableo.getSelectedIndex( );
tableo.getContextByIndex(index);
SAP-FIORI
as
var fname
selectedrecord.getProperty("Firstname");
var userid
selectedrecord.getProperty("Userid");
var salary
selectedrecord.getProperty("Salary");
_____________________________________________________________________
Syntax : Attaching FUnction to EVENT of SCreen ELEMENT

seo.attach<EVENTNAME>(<FunctionName>);
______________________________________________________________________
syntax : for Implementing a Function

function <functionName>( )
{
//implement the code/functionality according to requirement
}
________________________________________________________________________
For EXAMPLE :
var textfieldo = new sap.ui.commons.PasswordField( { value : "KIRAN KUMAR" });
var buttono
= new sap.ui.commons.Button( { text : "SUBMIT DATA" } );
buttono.attachPress(capturefunc);
textfieldo.placeAt("content");
buttono.placeAt("content");
function capturefunc()
{
var textfieldvalue = textfieldo.getValue( );
sap.ui.commons.MessageBox.alert(textfieldvalue);
SAP-FIORI
as
________________________________________________________________________
var dropdownbox = new sap.ui.commons.DropdownBox( );

var item = new sap.ui.core.ListItem( { text : "ABAP" });
item = new sap.ui.core.ListItem( { text : "WEBDYNPRO"});
item = new sap.ui.core.ListItem( { text : "SAP UI5"});
item = new sap.ui.core.ListItem( { text : "SAP FIORI"});
item = new sap.ui.core.ListItem( { text : "SAP oDATA "});

item = new sap.ui.core.ListItem( { text : "SAP HCM"});

item = new sap.ui.core.ListItem( { text : "SAP SD"});

dropdownbox.setValue("SAP FIORI"); // set default selected value in dropdown
SAP-FIORI
as
dropdownbox.placeAt("content");
///radiobutton group
var radiobuttongroup = new sap.ui.commons.RadioButtonGroup( { columns : 1 } );
var itemm = new sap.ui.core.Item({ text : "INDIA" , key : "INDIA" } );

itemm = new sap.ui.core.Item({ text : "USA" , key : "USA" } );

itemm = new sap.ui.core.Item({ text : "CHINA" , key : "CHINA" } );

itemm = new sap.ui.core.Item({ text : "SINGAPORE" , key : "SINGAPORE" } );

itemm = new sap.ui.core.Item({ text : "NEPAL" , key : "NEPAL" } );

itemm = new sap.ui.core.Item({ text : "MALAYSIA" , key : "MALAYSIA" } );

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

var dropdownvalue = dropdownbox.getValue();
var radiobuttonvalue = radiobuttongroup.getSelectedItem().getText();
var ratingvalue
var currentpage
= ratingo.getValue( );
= paginatoro.getCurrentPage( );
var lowervalue
= rangeslidero.getValue( );
var highervalue
= rangeslidero.getValue2( );
sap.ui.commons.MessageBox.alert( lowervalue + "
" + highervalue );
}
________________________________________________________________________________
Capture the selected step of RoadMap
SAP-FIORI
as
_______________________________________
roadmapo.attachStepSelected(captureroadmapstepfun);
-----------------------------------------------------function captureroadmapstepfun( )
{
var selectedstep = roadmapo.getSelectedStep();
sap.ui.commons.MessageBox.alert("THE SELECTED STEP IS " + " " +selectedstep) ;
}
_________________________________________________________
Requirement :
How to make screen elements VISIBLE-INVISIBLE dynamically
How to make screen elements enabled-Disable dynamically
__________________________________________________________________
if user selects step4 in roadmap , then radiobuttongroup should be Invisible
submitbutton should be disabled
password field should be disabled
if user selects any other step , then radiobuttongroup should be Visible

submitbutton should be enabled
SAP-FIORI
as
password field should be enabled
__________________________________________________________________________________________
implement the below code:

function captureroadmapstepfun( )
{
var selectedstep = roadmapo.getSelectedStep();

if(selectedstep=="step4")
{
radiobuttongroup.setVisible(false);
buttono.setEnabled(false);
textfieldo.setEnabled(false);
}
else{
radiobuttongroup.setVisible(true);
buttono.setEnabled(true);
textfieldo.setEnabled(true);
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 :

_______________________________________________
{
var index
= tableo.getSelectedIndex( );
var selectedrecord = tableo.getContextByIndex(index);
var airlineid
selectedrecord.getProperty("Airlineid");
var airline
selectedrecord.getProperty("Airline");
var cityfrom
selectedrecord.getProperty("Cityfrom");
var cityto
selectedrecord.getProperty("Cityto");
var price
selectedrecord.getProperty("Price");
SAP-FIORI
as
}
_________________________________________________________
Note : if required we can use rowSelectionChange event for TABLE
for ex :
tableo.attachRowSelectionChange(capturefunc);
Class-37_38:
SAP UI5 Messages
____________________________
Method summary :
sap.ui.commons.MessageBox.alert( )
----> for Alert Message
sap.ui.commons.MessageBox.confirm( )
----> for Confirmation Dialog Message
sap.ui.commons.MessageBox.show( ) ----> for Success Message

for Error message
for Warning Message
for Information Message
________________________________________________________________________
In show method ,we can use different ICOns for Different Messages
sap.ui.commons.MessageBox.Icon.SUCCESS
-->GREEN ICON for Success message
sap.ui.commons.MessageBox.Icon.ERROR
-->RED ICOn for Error MEssage
sap.ui.commons.MessageBox.Icon.WARNING
-->Yellow Icon for Warning MEssage
sap.ui.commons.MEssageBox.Icon.INformation
-->Normal Icon for INformation Message
SAP-FIORI
as
_____________________________________________________________________________
syntax :
We can attach function to EVENT of a SCREEN ELEMENT
<EventName> : <FunctionName>
_______________________________________________________________
For Alert Message :
____________________
function openalert( )
{
sap.ui.commons.MessageBox.alert("OASIS TECHNOLOGIES for Training");
}
_______________________________________________________________
For Confirmation Message:
____________________________
function openalert( )
{
sap.ui.commons.MessageBox.confirm("Do you want to Approve Leave REQUEST ? ?", "PLEASE
CONFIRM" );
}
For Error Message_
________________________
function fnCallbackMessageBox(sResult) {
alert("Result returned to fnCallbackShow1: " + sResult);
}
SAP-FIORI
as
function openmessage( )
{
// this is required since there is no direct access to the box's icons like
MessageBox.Icon.WARNING
jQuery.sap.require("sap.ui.commons.MessageBox");
// open a fully configured message box

sap.ui.commons.MessageBox.show("PLEASE ENTER FIRSTNAME",
sap.ui.commons.MessageBox.Icon.INFORMATION,
"This could be dangerous",
[sap.ui.commons.MessageBox.Action.YES,
sap.ui.commons.MessageBox.Action.NO],
fnCallbackMessageBox,
sap.ui.commons.MessageBox.Action.YES);
}
var button
= new sap.ui.commons.Button( { text : "OPEN MESSAGE" ,
press : openmessage
});
button.placeAt("content");
________________________________________________
DIALOG BOX :
SAP-FIORI
as
_________________________
var button
= new sap.ui.commons.Button( { text : "OPEN MESSAGE" ,

press : opendialog
});
button.placeAt("content");
function opendialog( )
{
var dialogo = new sap.ui.commons.Dialog( );

dialogo.setTitle("EMPLOYEE TABLE");
//
dialogo.setModal(true) ;
var textviewo = new sap.ui.commons.TextView( { text: " OASIS TECHNOLOGIES " });
var imageo
= new sap.ui.commons.Image( { src : "MS.GIF" }) ;
dialogo.addContent(textviewo);
dialogo.addContent(imageo);
dialogo.open( );
SAP-FIORI
as
_________________________________________________
Procedure:
______________
step1 :create object for DIALOG
step2 : generate content according to requirement
( like TABLE, GRAPH, TEXTVIEW, IMAGE etc.... )
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 ,

Then The fields are arranged in Content in the form "ARRAY"
with index 0 to index n
SAP-FIORI
as
Note : To capture the values of text Fields of Simple Form

then, use below syntax :
var content[] = oSimpleForm.getContent( );
content[1].getValue( );
__________________________________________________________
Note : To Set the values of TExt Fields of SimpleForm
then , use below syntax :
var content[] = oSimpleForm.getContent( );
content[1].setValue("VALUE");
__________________________________________________________________
Doubts :
LISTENER can be used to capture the action triggered by USER at RUNTIME
__________________________________________________
textfieldo.attachChange(function);
_____________________________________________
passwordfieldo.attachChange(function);
SAP-FIORI
as
______________________________________________
dropdownbox.attachSelect(function);
________________________________________________
radiobuttongroup.attachSelect(function);
_________________________________________________
tableo.attachRowSelectionChange(function);
_____________________________________________________
Note : We can place dropdown also inside SimpleForm :
as
SAP-FIORI
as
SAP-FIORI
as
SAP-FIORI

SAP-UI5 Fiori Apps

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SAP-UI5 Fiori Apps

Uploaded by

Copyright:

Available Formats

qwertyuiopasdfghjklzxcvb

Odata Netweaver Gateway Services:

= Eclipse( Under Eclipse Add Sap Ui5+Fiori Plugins)

Transaction Codes For Odata Service Developement:

Creating Entity Type ( Maintains The Required Fields )

Data Provider Extension Class Can Contain

Model Provider Class( Mpc ):

Data : Firstname Type Zcl_Mpc=>Tablestructure-Firstname

Behaviour Of Various Methods Available In Odata Abap Services

Developing Odata Abap Gateway Service :

Entity Type = Collection Of Fields

Step7 : Activate Entire Data Provider Extension Class

Developing odata ABAP service by accessing existing RFC/BAPI functionality

Developing odata ABAP service without MAPPING for accessing RFC/BAPI:

ER_ENTITY will transfer output record to FRONT END

what is the behaviour GET_ENTITYSET method

Developing odata ABAP service for Inserting data into SAP

UPloading File & Downloading File via odata Gateway service

Loop statement for Iteration :

Note : if required, we can use "Arithematic Operators" in scripting

if age > 18 , then voteable = "ELIGIBLE"

var person = [ fname , lname , age, address ];

SAP UI5 Paginator :

//at index 0 in htmltextstring

SAP Ui5 HTML screen element:

, width : "95%" , height :

, width : "95%" , height :

src : "images/claudia.jpg" , width : "95%" , height :

, width : "95%" , height :

, width : "95%" , height :

, width : "95%" , height :

, width : "95%" , height :

itemm = new sap.ui.core.Item({ text : "SINGAPORE" , key : "SINGAPORE" } );

SAP UI5 DATE PICKER:

SAP UI5 LIST BOX :

PRogressINdicator inside a TABLE

-> display image as green color icon

if price >= 500

-> display image as red color icon

-> display Progress as 80%

if price >= 500

-> display progress as 20%

implement the below code

if(pvalue > 500.00)

Display odata ABAP service records into DROPDOWN BOX

var modelo2 = new sap.ui.model.odata.ODataModel(

var dropdownboxo = new sap.ui.commons.DropdownBox( );

var listitemo = new sap.ui.core.ListItem( {

step2 : create object for Radiobutton Group

step4 : set model to Radiobutton GROUp

step5 : binditems with ENTITYSET and ITEMS object

step6 : pLACE radiobutton group on CONTENT.

implement below code:

var radiobuttongroupo = new sap.ui.commons.RadioButtonGroup( { columns : 10 });

Graphs/Charts in SAP UI5

step2 : create object for FlattenedDataSet

step3 : create object for GRAPH according requirement

step4 : set Model to Graph object

step5 : place graph on CONTENT

implement the below code

var dataseto = new sap.viz.ui5.data.FlattenedDataset({

dimensions : [ { axis : 1 , name : 'FirstName', value

name : 'SALARY' , value