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
Related
Good Morning.
To work with wfs layer is it better to use leaflet or openlayers?
I have a code with openlayers that returns WFS from the geoserver. But I'm not able to show the attributes in popup. can anybody help me?
Thanks
You can try ol-ext ol/Overlay/PopupFeature to display feature attributes in a popup.
See example: https://viglino.github.io/ol-ext/examples/popup/map.popup.feature.html
Following the example of https://viglino.github.io/ol-ext/examples/popup/map.popup.feature.html, I have this code where my WFS layer contains the id and name attributes, however, it doesn't show anything in the popup
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return 'http://localhost:8080/geoserver/teste/wfs?service=WFS&' +
version=1.1.0&request=GetFeature&typename=teste:MYLAYER&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',EPSG:4326';
},
strategy: ol.loadingstrategy.bbox
});
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 1.0)',
width: 2
})
})
});
var layers = [
new ol.layer.Tile({source: new ol.source.OSM()}),
vector,
];
var map = new ol.Map({
layers: layers,
interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false }),
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-46.444137, -23.713596]),
zoom: 12
})
});
var select = new ol.interaction.Select({
hitTolerance: 5,
multi: true,
condition: ol.events.condition.singleClick
});
map.addInteraction(select);
var popup = new ol.Overlay.PopupFeature({
popupClass: 'default anim',
select: select,
canFix: true,
template: {
title:
function(f) {
return f.get('nome')+' ('+f.get('id')+')';
},
attributes: // [ 'id', 'nome' ]
{
'nome': { title: 'Nome' },
'id': { title: 'Id' },
}
}
});
map.addOverlay (popup);
This is the popup code. I have 3 layers: layer1, layer2 and layer3.
For layer1, ID I want to show as ID. For layer2, I want to show ID as CODE and for other layers I don't want to show ID attribute.
How should I change the template? Thanks
var popup = new ol.Overlay.PopupFeature({
popupClass: 'default anim',
select: select_interaction,
canFix: true,
template: {
title:
function(f) {
return f.get('NAME')+' ('+f.get('ID')+')';
},
attributes:
{
'ID': { title: 'ID' },
// with prefix and suffix
'POP': {
title: 'População', // attribute's title
before: '', // something to add before
format: ol.Overlay.PopupFeature.localString(), // format as local string
after: ' hab.' // something to add after
},
}
}
});
#user12538529
You have to create a function and return the template for each case:
// Create templates
var templateID = { ... };
var templateCODE = { ... };
// Popup with a template function
var popup = new ol.Overlay.PopupFeature({
popupClass: 'default anim',
select: select_interaction,
canFix: true,
template: function(feature) {
var prop = feature.getProperties();
// Test if has property ID
if (prop.hasOwnProperty('ID')) return templateID;
// or property CODE
else if (prop.hasOwnProperty('CODE')) return templateCODE;
}
});
I have retrieved a JSON model from an ajax call in UI5 but I can't access its members. I have seen examples of people doing something similar but it isn't working for me. Here is my code:
onSumbmitFlowGAkQ: function () {
var oParameters = {
"value": this.getView().byId("flowInputGAK").getValue()
};
$.ajax({
url: "private url",
type: 'POST',
data: JSON.stringify(oParameters),
contentType: 'application/json',
success: function (data) {
this.getView().setModel(new JSONModel(data), "guidedAssistanceGAK");
this.setUpDialog();
}.bind(this),
error: function (e) {
MessageToast.show(e.status);
}
});
setUpDialog: function () {
var lst = new List({
items: {
path: "guidedAssistanceGAK>/flow",
template: new StandardListItem({
title: "{guidedAssistanceGAK>value}",
counter: "{guidedAssistanceGAK>ID}"
})
}
});
var dialog = new Dialog({
title: "choose one",
content: lst,
beginButton: new Button({
text: "OK",
press: function () {
dialog.close();
}
}),
afterClose: function () {
dialog.destroy();
}
});
dialog.open();
//this.oEditor.oRichTextEditor.setValue(this.getView().getModel("guidedAssistanceGAK").getProperty("/flow"));
},
I am using the syntax "guidedAssistanceGAK>/flow" to access the data but it isn't working. I think this is a binding error. I was wondering what would be the right way to do this.
The new dialog doesn't look to be part of the view, which is where your model lives. You could either do this.getView().addDependent(dialog), or you could attach the model to the dialog with dialog.setModel.
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();
}