SAP FIORI

Topics

1. OData ABAP services

2. HTML/CSS/SCRIPTING
3. SAP UI5
4. SAP FIORI

About SAP FIORI:

1. SAP FIORI is package which contains of standards application ( developed by SAP

UI5)
2. SAP FIORI package internally uses sap UI5 frame work
3. SAP UI5: it like a frame work for developing web application that runs on BROWSER.
4. 500 standard applications are available under SAP FIORI package.
5. XML and JSON forms are avaliable in SAP FIORI.
Odata ABAP services

Steps to create OData ABAP services

Mapping entity set to data source

Drag and drop the fields to map source and destination

Devveloping a Odata ABAP services CRUD methods
We have to convert * to % to get the records from data table.
Function import config in OData ABAP services.
Its standard method to copy data from source to target.

Function import name is case sensitive

Class 15 -1
Classes -16 – uploaded and download a file.
File download form from end app.
Upload a file from front end server

Download a file from server

Class 17
Class 18
Class 19.
SAP UI5 / FIORI Architecture.

SAP UI5 = SAP HTML tags (5%) + SAP UI5 elements (95%).

HTMS tags are not case sensitive

Each HT<S tag contains below syntax:

<tag name> content </tag name>

1. Heading tags: H1 is higest size fort H6 is lowest font size

<H1> header 1 </H1>

<H2> header 2 </H1>
<H3> header 3 </H1>

<H4> header 4 </H1>

<H5> header 5 </H1>

<H6> header 6 </H1>

2. Paragraph tag: paragraph tag is used to display continues text, it

will suppress the N number of empty lines into single empty line.
<P>

Paragraph tag is used to display continues text

</P>

3. Pre tag: It won’t suppress the spaces whatever spaces will provide in
the middle of test it will consider the spaces.
4. HR tag
5. Break tag <BR> </BR> this tag will create line break.
6. Anker tag <a> to diplay the hyperlink for example google link.
<A href = ‘http://google.com’> googe website </A>
If you want display the search page directly

<A href = ‘http://google.com/search?q=crecket’> googe website </A>

<A href = ‘http://google.com/maps/place/bangalore’> google map
bangalore </A>

7. Image tag : to display the images

<IMG src = ‘ms.jef’>
 Style option we can use all HTML tags
 Style attribute is used to show
Back ground picture
Text colours
Borders
Width
Border-style
<h1 style = “color: red;”> text </h1>

<A style = “background-image: url(bg.jpg)”

8. Marquee tag: is used to scrolling text.

<Marquee style = “color: red;”> <b> scrolling text and bold </b></h1>
9. HTML formatting tags : is used to display special texts.
 <b> bold </b>
 <I> Italic </I>
 <em> emphasized text </em>
 <del> Deleted text </del>
 <ins> Inserted text <ins>
 _{subscript text}
 ^{superscript text}
10. HTML table format
Table is used to display records in rows and column FORMAT

<table border="1" style="width:100%">

<tr>
<td>FIrst Name</td>
<td>LAST Name</td>
<td>Percentage</td>
</tr>

<tr>
<td>SUMAN</td>
<td>KUMAR </td>
<td>50% </td>
</tr>
<tr>
<td>KIRAN</td>
<td>KUMAR </td>
<td>80% </td>
</tr>
<tr>
<td>AJAY</td>
<td>KUMAR </td>
<td>90% </td>
</tr>
<tr>
<td>SRINIVAS</td>
<td>RAO </td>
<td>90% </td>
</tr>

</table>
__________________________________________
here :
<table> ---for table
<tr> ---for table row
<td> ---for table data/record value

Note : AS SAP Ui5/FIORi developer, we don't use HTML table tag,

Instead we make use of SAP Ui5/FIORI specific TABLE screen
element

_____________________________________________________

HTML Iframe tag:

___________________
Iframe tag is generally used to display FILE on SCREEN
IFRAME can display text file
display PDF file
etc....

________________________________________________________
for Example:
 <iframe width="1020" height="520" src="UI5resumepoints.txt" >
</iframe>

<iframe width="1020" height="520" src="designer.pdf" >

</iframe>

__________________________________________________________________

HTML5 supports AUDIO and VIDEO integrations

with <video>
<audio>

NOte :
IN SAP Ui5/FIORI, we can have audio/video integration with HTML 5
itself

_________________________________________________

For example :

<video width="520" height="340" controls>

<source src="ddlsong.mp4" type="video/mp4" > </source>
</video>

<audio controls>
<source src="audiosong.mp3" type="audio/mpeg" > </source>
</audio>

SAP UI5 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");
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...
_______________________________________________________