I have a column of links. I want each link to display different information in a popup box when clicked. How can I accomplish this?
Here is the column I have created:
oControl = new sap.m.Link({ text: "{userEmails}" });
oTable.addColumn(new sap.ui.table.Column("userEmails", {
label: new sap.m.Label({ text: "User Emails" }),
template: oControl,
sortProperty: "userEmails",
filterProperty: "userEmails"
}));
I want the users emails to be displayed based on what row the link was clicked.
EDIT: Here's what I tried:
onLinkPressed: function (oEvent) {
var obj = oEvent.getSource().getBindingContext().getObject();
var email = obj.email;
}
email is another column.
When I click the link nothing happens.
EDIT2: I have also tried this:
oControl = new sap.m.Link({text: "{userEmails}", press: function() {openDialog();}}); // edited from the first line of code I posted
function openDialog() {
var oDialog1 = new sap.ui.commons.Dialog();
oDialog1.setTitle("My first Dialog");
var oText = new sap.ui.commons.TextView({ text: "example#email.com" });
oDialog1.addContent(oText);
oDialog1.addButton(new sap.ui.commons.Button({ text: "OK", press: function () { oDialog1.close(); } }));
oDialog1.open();
}
This creates an open dialog but each link gives the same information and I want each link to give different information.
In general you can attach an event handler for press event to the link and open a popup in the in the event handler. The text of the link can be obtained as follows:
onLinkPressed : function(event) {
var link = event.getSource();
var email = link.getText();
}
I finally figured it out! Here's my working code:
oControl = new sap.m.Link({ text: "{userEmails}", press: function (oEvent) { openDialog(oEvent);}});
oTable.addColumn(new sap.ui.table.Column("userEmails", {
label: new sap.m.Label({ text: "User Emails" }),
template: oControl,
sortProperty: "userEmails",
filterProperty: "userEmails",
}));
function openDialog(oEvent) {
var oDialog1 = new sap.ui.commons.Dialog();
oDialog1.setTitle("Emails");
var obj = oEvent.getSource().getBindingContext().getObject();
var email = obj.email;
var oText = new sap.ui.commons.TextView({ text: email });
oDialog1.addContent(oText);
oDialog1.addButton(new sap.ui.commons.Button({ text: "OK", press: function () { oDialog1.close(); } }));
oDialog1.open();
}
Related
trying to attach "onmouseover" event handler to sap.m.MenuItem sapui5 using attachBrowserEvent but I get
Item.attachBrowserEvent is not a function error
here is the code I have tried - Not sure what I am doing wrong.
var item1 = new sap.m.MenuItem({
text: "item1",
press: ()=> {
//do somethign }
});
var item2 = new sap.m.MenuItem({
text: "item2",
enabled: false,
});
item2.attachBrowserEvent("mouseover", function(){
const oPopover = new sap.m.Popover({
showHeader: false,
placement: sap.m.PlacementType.HorizontalPreferredRight,
contentWidth: "500px",
content: [
new sap.m.Text({
text: "item2 is deactived"
})
]
});
item2.attachBrowserEvent("mouseover", function() {
oPopover.openBy(item2);
});
item2.attachBrowserEvent("mouseout", function() {
oPopover.close();
});
});
var oMenu = new sap.m.Menu({
items: [item1,item2]
})
Thats because the control sap.m.MenuItem has no such function. To look up all functions of the controll look in the API: https://sapui5.hana.ondemand.com/1.54.8/#/api/sap.m.MenuItem
BUT a sap.m.MenuItem inherits the function "attachEvent" from sap.ui.base.EventProvider:
https://sapui5.hana.ondemand.com/1.54.8/#/api/sap.ui.base.EventProvider/methods/attachEvent
I think that s what you are looking for.
Hope this is of help to you,
Eric
I saw in the UI5 "Explored" examples a press event with what looks to be an array:
press="[handleViewSettingsDialogFilterBarPressed, views.control.tableViewSettingsDialog]"
Example on line 25
I understand how normal press events work. What does using an array like this do? I couldn't find documentation on it, so any info on how it works or a link to where it's documented would be very helpful.
It is a just a shortcut. Maybe it is easier to see this in an example here. Both handlers call the same function in the Controller.
sap.ui.jsview("myView.Template", {
getControllerName: function() {
return "myView.Template";
},
createContent: function(oController) {
var oBox = new sap.m.HBox({
items: [
new sap.m.Button({
text: 'First',
press: function(oEvent) {
oController.press(oEvent);
}
}),
new sap.m.Button({
text: 'Second',
press: [oController.press, oController]
})
]
});
return oBox;
}
});
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
], function(jQuery, Controller) {
"use strict";
var TableController = Controller.extend("myView.Template", {
press: function(oEvent) {
alert('press');
}
});
return TableController;
});
//Instantiate View
var view = sap.ui.view({
type: sap.ui.core.mvc.ViewType.JS,
viewName: "myView.Template"
});
view.placeAt("content");
the first item in the array is function to call and the second item is the binding object.
Thanks
Check out the description of the press Event property under the sap.m.Toolbar Constructor:
Events press : fnListenerFunction or [fnListenerFunction,
oListenerObject] or [oData, fnListenerFunction, oListenerObject]
I have a responsivepopup containing a list in mode 'Delete'.
When I click to delete an item a function is called on press.
Withing this function 'this' is the oList and oEvent.oSource is also the oList.
From within the event function I need to call a function in my controller.
I can't find a way to reference my controller, not even using sap..core..byId("Detail") or even the full namespace.
I tried walking up the elemnt tree from oEvent.oSource.getParent().getParent() to then call .getController() but it's a dead end.
handlePressViewSelection: function(oEvent) {
var oResourceBundle = this.getResourceBundle();
//create the list
var oList = new sap.m.List({
mode: "Delete",
delete: this.handleDeleteSelectionItem
});
oList.setModel(this._oSelectedTrainingsModel);
var oItemTemplate = new sap.m.StandardListItem({
title : "{Title}",
description : "{=${Begda} ? ${Type} - { path: 'Begda', type: 'sap.ui.model.type.Date', formatOptions: { style: 'medium' }} : ${Type}}",
icon : "{icon}",
iconInset : false
});
oList.bindAggregation("items", {
path: "/",
template: oItemTemplate,
type: "Active"
});
var oBeginButton = new sap.m.Button({
text: "Action1",
type: sap.m.ButtonType.Reject,
press: function(){
oResponsivePopover.setShowCloseButton(false);
}
});
var oEndButton = new sap.m.Button({
text: "Action2",
type: sap.m.ButtonType.Accept,
press: function(){
oResponsivePopover.setShowCloseButton(true);
}
});
var oResponsivePopover = new sap.m.ResponsivePopover({
placement: sap.m.PlacementType.Bottom,
title: "",
showHeader: false,
beginButton: oBeginButton,
endButton: oEndButton,
horizontalScrolling: false,
content: [
oList
]
});
oResponsivePopover.openBy(oEvent.oSource);
},
handleDeleteSelectionItem: function(oEvent) {
var oListItem = oEvent.getParameter('listItem');
var oList = oListItem.getParent();
var path = oListItem.getBindingContext().sPath;
oList.getModel().getData().splice(parseInt(path.substring(1)), 1);
oList.removeItem(oEvent.getParameter('listItem'));
oList.getParent().getParent().getController()._updateViewSelectionButtonText(); //--> BROKEN
},
When you instantiate your popup from a fragment, you can specify "a Controller to be used for event handlers in the Fragment" (see https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.html#.xmlfragment)
For example:
onOpenResponsivePopover : function(oEvent) {
if (!this._oResponsivePopover) {
// adding 'this' makes sure you specify the current controller to be used for event handlers
this._oResponsivePopover = sap.ui.xmlfragment("namespace.to.your.popoverfragment", this);
this.getView().addDependent(this._oResponsivePopover);
}
this._oResponsivePopover.openBy(oEvent.getSource());
},
Here is my code, it's not working.
var that = this;
otable.bindItems("/", new sap.m.ColumnListItem({
cells: [new sap.m.Button({
text: "Hello",
id: "buttonid",
press: [that.handleButtonPress, this]
})]
}));
otable.setModel("data");
handleButtonPress: function () {
var Button_ = this.getView().byId("buttonid");
}
How to set a dynamic id?
To create a dynamic ID you will have to use a factory function on your aggregation binding:
oTable.bindItems("/", function(sId, oContext) {
return new sap.m.ColumnListItem({
cells: [
new sap.m.Button("yourDynamicID", {
text: "Hello",
press: [that.handleButtonPress, this]
})
]
};
});
Id is the first argument of Button constructor.
var oButton = new sap.m.Button("id", {
text: "myButton"
});
if you don't supply an id to a Controls constructor an id will automatically generated. You can then access the pressed button using the event argument:
var that = this;
otable.bindItems("/", new sap.m.ColumnListItem({
cells: [new sap.m.Button({
text: "Hello",
press: [that.handleButtonPress, this]
})]
}));
otable.setModel("data");
handleButtonPress: function (oEvent) {
var Button_ = oEvent.getSource();
}
experts,
I've just started to study sapui5, and right now the thing that bothers me is that I can't get a dropdown menu to be shown, while a button I create together with the drop down menu is displayed.
Here is my view:
createContent : function(oController) {
var aControls = [];
var oButton = new sap.ui.commons.Button({
id : this.createId("MyButton"),
text : "Get response from servlet"
});
oButton.attachPress(oController.getResponse);
aControls.push(oButton);
$.ajax({
url : "GetEmployees",
type : "post",
success : function(response) {
var oEmployeeSelection = new sap.ui.commons.DropdownBox("employee");
oEmployeeSelection.setTooltip("Employee");
oEmployeeSelection.setWidth("300px");
$.each(response, function(index, employee) {
alert("entered selection creation");
var oItem = new sap.ui.core.ListItem("Employee"+index);
oItem.setText(employee);
oEmployeeSelection.addItem(oItem);
alert("processed: "+oItem);
});
alert(oEmployeeSelection);
// Attach the DropdownBox to the page
aControls.push(oEmployeeSelection);
}, // end success call handler
error: function(){
alert("error while building employee select menu");
}
});// end Employee selection
return aControls;
}// end createContent
I do get data from the server, alerts inside the success function shoot, but I see only the button on screen.
What an I doing wrong?
Thanks.
The root cause is that you add the Dropdown box in the service callback method and the aControls is already returned with only oButton inserted before the service callback.
Adjust the code as following will do:
createContent: function(oController) {
var aControls = [];
var oButton = new sap.ui.commons.Button({
id: this.createId("MyButton"),
text: "Get response from servlet"
});
oButton.attachPress(oController.getResponse);
aControls.push(oButton);
//Add dropdown box before your service call
var oEmployeeSelection = new sap.ui.commons.DropdownBox("employee");
oEmployeeSelection.setTooltip("Employee");
oEmployeeSelection.setWidth("300px");
aControls.push(oEmployeeSelection);
$.ajax({
url: "GetEmployees",
type: "post",
success: function(response) {
$.each(response, function(index, employee) {
alert("entered selection creation");
var oItem = new sap.ui.core.ListItem("Employee" + index);
oItem.setText(employee);
oEmployeeSelection.addItem(oItem);
alert("processed: " + oItem);
});
alert(oEmployeeSelection);
}, // end success call handler
error: function() {
alert("error while building employee select menu");
}
}); // end Employee selection
return aControls;
} // end createContent