- SAP Community
- Products and Technology
- Technology
- Technology Q&A
- Get data of a listitem after clicking on that part...
- Subscribe to RSS Feed
- Mark Question as New
- Mark Question as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
Get data of a listitem after clicking on that particular list item
- Subscribe to RSS Feed
- Mark Question as New
- Mark Question as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
on 04-17-2014 7:29 AM
Hi Experts,
How can I get the data of a listitem after clicking on that particular list item??
Thanks
Himadri
- SAP Managed Tags:
- SAPUI5
Accepted Solutions (1)
Accepted Solutions (1)
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
Hi,
We can get the clicked list item like below.
First of all call the function when click on list item.
tap : [ controller.OrderListTap, controller ].
In controller write the function like below.
OrderListTap : function(evt) {
var data = {};
data.context = evt.getSource().getBindingContext();
var selectedIndex = data.context.sPath.split("/")[2];
console.log(data.context);
}
Check the console then we will get the selected list item. We can use this item for further steps.
To know the path clearly use console from the event like
console.log(evt.getSource().getBindingContext());
Hope it will helpful to you.
Regards
Sridevi
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
Hi,
If you want to show the data in the same page directly you can save the data in one variable and set this value to the input filed by using that input id name like below.
var oInput1 = sap.ui.getCore().byId("input1");
oInput1.setValue(variable name);
If you want to show the data in another page we have to pass those values to he next page when we navigating to another page.
app.to("OrderList", data);
(or)
We can use
onBeforeShow : function(oEvent) {
this.getController().onBeforeShow(oEvent);
},
in next page view file to get the data from previous page.
Regards
Sridevi
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
Hi,
Write a code to get the popover when click on list item.
OrderListTap : function(evt) {
var data = {};
data.context = evt.getSource().getBindingContext();
var selectedIndex = data.context.sPath.split("/")[2];
//Open dialog when click on List item
var oDialog1 = new sap.ui.commons.Dialog();
oDialog1.setTitle("Order Number");
var oText = new sap.ui.commons.TextView({text: selectedIndex });
oDialog1.addContent(oText);
oDialog1.addButton(new sap.ui.commons.Button({text: "OK", press:function(){oDialog1.close();}}));
}
In this way we can get teh order Number in the popover dialog box when click on list item .
Regards
Sridevi
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
Hi.
This is my code. I want to show the data of the listitem in popover1.
createContent : function(oController) {
var list = new sap.m.List("list",{
headerText: "Contact List",
items: {
path: "/KEY",
//sorter : new sap.ui.model.Sorter("FIRSTNAME"),
template: new sap.m.ObjectListItem({
title: "{FIRSTNAME}",
number: "{PHONE}",
type: sap.m.ListType.Active,
press : function (evt) {
var data = {};
data.context = evt.getSource().getBindingContext();
var selectedIndex = data.context.sPath.split("/")[2];
var Odata = data.context.oModel.oData.KEY[selectedIndex];
console.log(Odata);
popover1.openBy(this);
},
firstStatus : new sap.m.ObjectStatus({
text : "{EMAIL}",
state : "Success"
}),
/*secondStatus : new sap.m.ObjectStatus({
text : ,
state : "Success"
}),*/
attributes : [
new sap.m.ObjectAttribute({
text : "{LASTNAME}"
}),
new sap.m.ObjectAttribute({
text : "{ADDRESS} {STATE}"
})
]
})
}
});
var popover = new sap.m.Popover({
title: "Add Contacts",
placement: sap.m.PlacementType.Top,
footer: new sap.m.Bar({
contentRight: [
new sap.m.Button({
text: "Save",
icon: "sap-icon://save",
press: function () {
var oParameters = ({
"Listid" : "List",
"First" : sap.ui.getCore().getElementById('First').getValue(),
"Phone" : sap.ui.getCore().getElementById('Phone').getValue(),
"Last" : sap.ui.getCore().getElementById('Last').getValue(),
"Email" : sap.ui.getCore().getElementById('Email').getValue(),
"Address" : sap.ui.getCore().getElementById('Address').getValue(),
"City" : sap.ui.getCore().getElementById('City').getValue(),
"State" : sap.ui.getCore().getElementById('State').getValue(),
"Zip" : sap.ui.getCore().getElementById('Zip').getValue(),
});
console.log(oParameters);
var url = "http://vikalp.webhop.net:8000/sap/bc/zrestateui5_lis?sap-client=800";
var model = new sap.ui.model.json.JSONModel();
$.ajax({
url : url ,
dataType : "jsonp",
type : "POST",
data: oParameters,
success: function(data,textStatus,jqXHR) {
data = JSON.parse(data);
console.log(data);
model.setData(data);
},
});
sap.ui.getCore().setModel(model);
popover.close();
}
})
],
contentLeft: [
new sap.m.Button({
text: "Close",
icon: "sap-icon://close",
press: function () {
popover.close();
}
})
],
}),
content: new sap.m.VBox({
//width:"300px",
items: [
new sap.m.Input("First",{
type: sap.m.InputType.Text,
placeholder: 'First Name',
width:"240px"
}),
new sap.m.Input('Phone',{
type: sap.m.InputType.Number,
placeholder: 'Phone No',
width:"240px"
}),
new sap.m.Input('Last',{
type: sap.m.InputType.Text,
placeholder: 'Last Name',
width:"240px"
}),
new sap.m.Input("Email",{
type: sap.m.InputType.Email,
placeholder: 'Email',
width:"240px"
}),
new sap.m.Input("Address",{
type: sap.m.InputType.Text,
placeholder: 'Address',
width:"240px"
}),
new sap.m.Input("City",{
type: sap.m.InputType.Text,
placeholder: 'City',
width:"240px"
}),
new sap.m.Input("State",{
type: sap.m.InputType.Text,
placeholder: 'State',
width:"240px"
}),
new sap.m.Input("Zip",{
type: sap.m.InputType.Text,
placeholder: 'Zipcode',
width:"240px"
}),
]
}),
}).addStyleClass("sapUiPopupWithPadding");
var popover1 = new sap.m.Popover({
title: "Contact Information",
placement: sap.m.PlacementType.Right,
footer: new sap.m.Bar({
contentLeft: [
new sap.m.Button({
text: "Close",
icon: "sap-icon://close",
press: function () {
popover1.close();
}
})
],
}),
content: new sap.m.VBox({
//width:"300px",
items: [
new sap.m.HBox({
items: [
new sap.m.Label({
text:"First Name",
width:"140px",
}),
new sap.m.Input("First2",{
type: sap.m.InputType.Text,
//value: sap.ui.getCore().getElementById('').setValue(Odata), //
width:"240px",
placeholder : "{KEY/0/FIRSTNAME}"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"Last Name",
width:"140px",
}),
new sap.m.Input('Last2',{
type: sap.m.InputType.Text,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"Phone No",
width:"140px",
}),
new sap.m.Input('Phone2',{
type: sap.m.InputType.Number,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"Email",
width:"140px",
}),
new sap.m.Input("Email2",{
type: sap.m.InputType.Email,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"Address",
width:"140px",
}),
new sap.m.Input("Address2",{
type: sap.m.InputType.Text,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"City",
width:"140px",
}),
new sap.m.Input("City2",{
type: sap.m.InputType.Text,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"State",
width:"140px",
}),
new sap.m.Input("State2",{
type: sap.m.InputType.Text,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"Zip Code",
width:"140px",
}),
new sap.m.Input("Zip2",{
type: sap.m.InputType.Text,
width:"240px"
}),
]
}),
]
}),
}).addStyleClass("sapUiPopupWithPadding");
return new sap.m.Page("page",{
title: "mEstate",
content: [list],
subHeader: new sap.m.Bar("searchBar",{
contentMiddle: [
new sap.m.SearchField( "searchField", {
placeholder: "Search",
showRefreshButton: true,
search: function onSearch(event) {
// alert(event.getParameter("query"));
jQuery.sap.log.debug("searchField: search for: " +
event.getParameter("query"));
if(event.getParameter("refreshButtonPressed")){
list.bindAggregation("items", {
path: "/KEY",
template : new sap.m.ObjectListItem({
title: "{FIRSTNAME}",
number: "{PHONE}",
type: sap.m.ListType.Active,
firstStatus : new sap.m.ObjectStatus({
text : "{EMAIL}",
state : "Success"
}),
/*secondStatus : new sap.m.ObjectStatus({
text : "{}",
state : "Success"
}),*/
attributes : [
new sap.m.ObjectAttribute({
text : "{LASTNAME}"
}),
new sap.m.ObjectAttribute({
text : "{ADDRESS},{CITY},{STATE,{ZIPCODE}"
})
]
})
});
}
var filters = [];
var searchString = event.getParameter("query");
if (searchString && searchString.length > 0) {
var filter = new sap.ui.model.Filter("FIRSTNAME",
sap.ui.model.FilterOperator.Contains, searchString);
filters.push(filter);
var binding = list.getBinding("items");
binding.filter(filters);
}
},
width: "100%",
tooltip: "Search for objects..",
refreshButtonTooltip: "Refresh"
})
]
}),
showNavButton: true,
navButtonTap:function(){
app = sap.ui.getCore().byId("myApp");
app.to("idfirst1");
},
footer: new sap.m.Bar({
contentLeft: [
new sap.m.Button({
text: "Add Contact",
icon: "sap-icon://add",
press: function () {
popover.openBy(this);
}
})
]
}),
});
}
});
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
Answers (3)
Answers (3)
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
Hi Himadri,
Its very simple.Say you are using StandardListItem then call following function on 'select' event of the list :
handleListSelect : function(oEvent){
var listItem = oEvent.getParameter("listItem");
var getTitle = listItem.getTitle();
var getInfo = listItem.getInfo();
},
EDIT : And if you are using ObjetListItem then as follows:
handleListSelect : function(oEvent){
var listItem = oEvent.getParameter("listItem");
var getTitle = listItem.getTitle();
var getObjectAttribute1 = listItem.mAggregations.attributes[0].mProperties.text;
var getObjectAttribute2 = listItem.mAggregations.attributes[1].mProperties.text;
var getFirstStatus = listItem.mAggregations.firstStatus.mProperties.text;
var getSecondStatus = listItem.mAggregations.secondStatus.mProperties.text;
},
Regards,
Rauf
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
Hi Himadri,
You can get like as follows:
onItemPress: function(oEvent){
var sItem = oEven.getParameter("listItem");/*you will get selected item here" */
/* Now, you call method for getting value. Here, I need description value */
var sDescription = sItem.getDescription(); /* you will get description */
}Regards,
Rupesh
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
Hi,
Whether it is any list we can apply that in the same way.
Sample code for object list item.
In view file:
var productList = new sap.m.GrowingList("list",{
threshold : 5,
visible: false
});
var objectTemplate = new sap.m.ObjectListItem({
type : "Active",
title : "{BusinessPartnerID}",
number : "{PhoneNumber}",
numberUnit :"{FaxNumber}",
press : function(oEvent){
oController.productListTap(oEvent);
},
attributes : [new sap.m.ObjectAttribute({
text : "{CompanyName}"
}), new sap.m.ObjectAttribute({
text : "{WebAddress}"
})],
firstStatus : new sap.m.ObjectStatus({
text : "{BpRole}"
})
});
In controller File :
productListTap : function(evt){
console.log(evt.getSource().getBindingContext().sPath.split("/")[2]);
},
Like this we can get the selected list item in the console.
Regards
Sridevi
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
- SAP Cloud ALM and Identity Authentication Service (IAS) in Technology Blogs by SAP
- Start page of SAP Signavio Process Insights, discovery edition, the 4 pillars and documentation in Technology Blogs by SAP
- Objects and attachments: WF USER DECISION STEP: Calling BDC on clicking the link in Technology Q&A
- Objects and attachments: WF USER DECISION STEP: Calling BDC on clicking the link in Technology Q&A
- Fiori Smart Table in Technology Q&A
| User | Count |
|---|---|
| 88 | |
| 10 | |
| 10 | |
| 9 | |
| 7 | |
| 7 | |
| 6 | |
| 5 | |
| 4 | |
| 4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.