Scribd
Upload
150 views

Class53 UI5

The document discusses how to populate dropdown boxes and radio button groups with data from an OData service in SAPUI5. It provides step-by-step instructions to create models, bind items, and place the controls on the screen. It also covers the basics of CSS and how to apply both internal and external style sheets to style SAPUI5 elements.

Uploaded by

Sumit Abhishek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
150 views

Class53 UI5

The document discusses how to populate dropdown boxes and radio button groups with data from an OData service in SAPUI5. It provides step-by-step instructions to create models, bind items, and place the controls on the screen. It also covers the basics of CSS and how to apply both internal and external style sheets to style SAPUI5 elements.

Uploaded by

Sumit Abhishek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

Faculty : A Vijayendar Reddy

OASIS Technologies
9+ years experience in various SAP WEB TECHNOLOGIES
______________________________________________________________
Today's Class:
________________________
consume odata GW service Model and display records in DROP DOWN BOX:
____________________________________________________________________
step1: create object for DROPDOWN BOX
step2 : create object for LISTITEMS
AND MAINTAIN "data Binding" between PROPERTY and FIELD of Odata SERVIC
E
----------step3 :create object for oDataModel ( by passing SERVICE URL, USERID , PASSWORD
)
step4: set odataModel to DROP DOWN BOX
step5: For dropDown ,Bind ITEMS with ENTITYSET of SERVICE
step6: place Dropdown box on CONTENT
__________________________________________________________________
implement below code ( assuming that MOdel is already created )
var dropdown = new sap.ui.commons.DropdownBox("myDropDown",{
searchHelpEnabled: true,
maxPopupItems: 20,
});
var itemTemplate = new sap.ui.core.ListItem("listitems",{
text: "{Emailid}",
key: "{Emailid}"
});
dropdown.setModel(oModel);
dropdown.bindItems("/UserCollection",itemTemplate);
dropdown.placeAt("content2");
__________________________________________________________________
populating records in Radiobutton GROUP (via odata GW service )
______________________________________________________________
step1 : Create object for RADIOBUTTON group
step2: create object for ITEM and
Maintain "DATA BINDING" between property and FIELD of odata Service
------------step3: create object for oDataModel( gw service )

and pass service URL, userid , password.


step4: set odataModel to RADIOBUTTON GROUP
step5: bindItems to RADIOBUTTON GROUP with ENTITYSET
step6: place RADIOBUTTON GROUP on CONTENT.
_________________________________________________________________
Implement below code for Radiobutton GROUp with odata record values
-------------------------------------------------------------------var oRBG3 = new sap.ui.commons.RadioButtonGroup({
columns : 1,
selectedIndex : 2 });

var oItems = new sap.ui.core.Item({


text : "{Userid}",
key : "{Userid}"
});

oRBG3.setModel(oModel);
oRBG3.bindItems("/UserCollection",oItems);
oRBG3.placeAt("content2");
______________________________________________________________
CSS : Cascading Style SHEETs
_________________________________________________________
CSS stands for --->cascading Style SHEET
CSS defines how SAP UI5 screen elements should appear/displayed.
CSS supports:
1)Inline STYLE
--> using Style option at HTML tag level
2)Internal Style sheet
--> stylesheet maintained with in same program using <
style> tag
3)External Style sheet
--> Stylesheet maintained in separate .CSS file
( Advantage : EXTERNAL style sheets are RE-USABLE )
_______________________________________________________________________________
Inline STYLE
_________________
for EXample :
<div id="content"

style="background-color: red" ></div>

<br>
<div id="content2" style="border: dashed;color: red;"></div>
___________________________________________________________________

Note: in the above case, style option is used at HTML tag level
so this technique is known as INLINE STYLE
___________________________________________________________________
Internal STYLE sheet :
______________________
Internal style sheet is defined and used inside same program.
note : define the style properties with values under
<style>
and </Style>
for ex :
______________________________________________________
<style >
body {
background-image: url("audi.jpeg");
background-repeat: no-repeat;
}
</style>
_______________________________________________________
EXTERNAL STYLE SHEET:
__________________________
step1 : right click webcontent folder, chose NEW->other
expand webfolder-->select CSS file
and provide FIle NAME = mystyle123.css
click on NEXT and CLICK on FINISH
step2: under CSS file implement below CSS options and save file
.mystyle123 {
border: 5px solid green;
border-style: solid;
color: red;
background: orange;
background-image: url("MS.GIF");
background-repeat: 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;
}
____________________________________________________
step3: implement the code to access EXTERNAL style sheet in program ( index.htm
l )
<link rel="stylesheet" type ="text/css"

href="mystyle123.css">

____________________________________________________________
step4: implement code to ADD STYLE SHEET CLASS TO SAP UI5 screen element
var oPanel = new sap.ui.commons.Panel();
oPanel.addContent(oRMap);
oPanel.addContent(oRBG2);
oPanel.addStyleClass("mystyle123");
//VVV IMPORTANT LINE for applying stylesheet TO SAP UI5 SCREEN ELEMENT
oPanel.placeAt("content2");
___________________________________________________________________________
step5 : save all files and test application:
____________________________________________________
Note : ALL most all SAP Ui5 screen elements contain common method
ie,
addStyleClass("mystyle123");
______________
CSS FILE NAME
___________________________________________________________________

You might also like