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 = ‘[Link] googe website </A>
If you want display the search page directly
<A href = ‘[Link] googe website </A>
<A href = ‘[Link] google map
bangalore </A>
7. Image tag : to display the images
<IMG src = ‘[Link]’>
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([Link])”
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>
<sub> subscript text </sub>
<sup> superscript text </sup>
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="[Link]" >
</iframe>
<iframe width="1020" height="520" src="[Link]" >
</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>( );
___________________________________________________________________
[Link]("content");
____________________________________________________________________
SAP Ui5/FIORI Application Header:
----------------------------------
It is used to display TITLE, welcome area, logo, logoff option, etc...
var aho = new [Link]("appheader");
[Link]("[Link]");
[Link]("OASIS TECHNOLOGIES Hyderabad");
[Link](true);
[Link]("VIJAYENDAR REDDY");
[Link]("content");
____________________________________________________________
SAP UI5 TEXT VIEW :
--------------------
it is used to display text on screen
var tvo = new [Link]( );
[Link]("WELCOME TO SAP UI5/FIORI TRAINING");
[Link]("WELCOME TEXT");
[Link]('700px');
[Link]([Link].H2);
[Link]([Link]);
[Link]("content");
________________________________________________________________________
Note :
[Link].H1 to H6
.Bold
.Italic
.Small
.Underline
[Link]
.Negative
.Critical
.Standard
______________________________________________________________________
SAP UI5 LINK :
________________
It is used to link to other applicatoin via URL address with href property
var linko = new [Link]({
text
: "GOOGLE SEARCH" ,
href :
'[Link] York'
});
[Link]("content");
_____________________________________________________________________________
Note :
[Link]
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
[Link]
[Link]
[Link]
[Link]
[Link]
sap.m
[Link]
etc....etc..etc...
_______________________________________________________
