i have a control as below
i need to fire the event closed when i click on the close icon press
sap.ui.define(["sap/ui/core/Control",
"sap/m/Carousel",
"sap/m/Panel",
"sap/m/Toolbar",
"sap/ui/core/Icon",
"sap/m/Label",
"sap/m/Button",
"sap/m/ToolbarSpacer"], function (Control,Carousel,Panel,Toolbar,Icon,Label,Button,ToolbarSpacer) {
"use strict";
return Control.extend("com.example.Control", {
metadata : {
aggregations : {
_panel : {
type : "sap.m.Panel",
multiple: false,
visibility:'hiddden'
}
},
events : {
closed : {
}
}
},
renderer : function (oRM, oControl) {
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.addClass("sapUiSizeCompact");
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_panel"));
oRM.write("</div>");
},
init : function () {
var that = this;
var _carousel = new Carousel({
pages : [new Label({
text : "Test"
}),
new Label({
text : "Test"
})]
});
var _closeIcon = new Icon({
src : "sap-icon://decline",
press :jQuery.proxy(this.onCloseInfoWindow,this)
});
var _toolBar = new Toolbar({
content : [
new Label({
text :"Information"
}),
new ToolbarSpacer(),
_closeIcon,
]
});
var _panel = new Panel({
headerToolbar : _toolBar
});
_panel.addContent(_carousel);
this.setAggregation('_panel',_panel);
},
onCloseInfoWindow : function(oEvent){
}
});
});
The onCloseInfoWindow is not triggering the press event when click on close icon
do i need to do some add the icon also as aggregation and need to render?
Do you want to fire the closed event that you have created in your custom control ?
Use the below code for calling the closed event from your custom control:
onCloseInfoWindow : function(oEvent){
//console.log('Called');
this.fireClosed(oEvent);
}
View XML: here, Control is my name for your control.
<c:Control closed='onClose'/>
Controller:
onClose:function(oEvent) {
console.log('Closed Called!');
}
Why are you using press :jQuery.proxy(this.onCloseInfoWindow,this) ? I've never used that jQuery.proxy in ui5.
For triggering the close function, you could do
var _closeIcon = new Icon({
src : "sap-icon://decline",
press : function(oEvent){
this.fireClosed(oEvent);
}.bind(this)
});
Related
I'm trying to add a button to a javaScript view dialog.
unfortunately, the button is not shown (the Header button)
Actually, I want the dialog to have another button in the corner , that closes the dialog
this.oWarningMessageDialog = new Dialog({
type: DialogType.Message,
title: this._oBundle.getText("PaymentPostponement"),
state: ValueState.Warning,
Header: new Button({
type: ButtonType.Reject,
icon: "sap-icon://decline",
press: function (oEvent) {
this.oWarningMessageDialog.close()
this.oWarningMessageDialog = null
Core.byId("ApproveMessageText").destroy()
}.bind(this)
}),
beginButton: new Button({
type: ButtonType.Reject,
text: this._oBundle.getText("Postpone"),
icon: "sap-icon://decline",
If you need the exact look as specified in the image, you need to use a 'customHeader' aggregation. Code is as follows :-
this.oWarningMessageDialog = new Dialog({
type: DialogType.Message,
state: ValueState.Warning,
customHeader: [
new sap.m.Bar({
/* either use an icon */
contentRight: new sap.ui.core.Icon({
src : "sap-icon://decline",
useIconTooltip : false,
color : "#f33334",
press : function (oEvent) {
this.oWarningMessageDialog.close();
this.oWarningMessageDialog = null;
Core.byId("ApproveMessageText").destroy()
}.bind(this)
}).addStyleClass("sapUiMediumMarginBottom"),
/* or you can even use a button */
// contentRight: new Button({
// type: ButtonType.Transparent,
// icon: "sap-icon://decline",
// width: "20px",
// press: function (oEvent) {
// this.oWarningMessageDialog.close();
// this.oWarningMessageDialog = null;
// }.bind(this)
// }).addStyleClass("sapUiSmallMarginBottom"),
contentMiddle : [
new sap.m.Title({
text :this._oBundle.getText("PaymentPostponement")
}),
new sap.ui.core.Icon({
src : "sap-icon://message-warning",
useIconTooltip : false,
color : "#E69A17"
})
]
})
],
beginButton: new Button({
type: ButtonType.Reject,
text: this._oBundle.getText("Postpone"),
icon: "sap-icon://decline"
})
});
or, the correct way of including the close button is by using "endButton" Aggregation. But this will display button in the footer of the dialog.
For some reason, the blur event doesn't get fired when the below floating panel loses focus. However, when I listen to the 'el' of the panel for the blur event, it gets registered as shown in the listeners config. What I want to do is hide the panel when the blur event occurs. How do I get access to the parent panel ?
Ext.define('NoteKeeper.view.tabs.AttachmentPanel',{
extend : 'Ext.panel.Panel',
alias : 'widget.attachmentPanel',
itemId : 'attachmentPanel',
floating : true,
focusable : true,
width : 200,
height : 150,
layout : {
type : 'vbox'
},
items : [
{
xtype : 'grid',
store : null,
columns : [
{
text : 'File Name',
dataIndex : 'fileName'
},
{
dataIndex : 'remove'
}
]
},
{
xtype : 'button',
text : '+'
}
],
listeners : {
el: {
blur: {
fn: function()
{
console.log( this );
//how do I access the 'attachmentPanel' from here
//so I can hide it ?
}
}
}
},
noteId : null,
initComponent : function()
{
this.callParent(arguments);
}
});
Please note that there can be multiple instances of these 'attachmentPanel's.
The following appears to work fine:
listeners : {
el: {
blur: {
fn: function()
{
console.log(this);
var elId = this.id;
var attachmentPanels = Ext.ComponentQuery.query('#attachmentPanel');
Ext.Array.forEach( attachmentPanels, function(cmp){
if(cmp.id == elId)
{
cmp.hide();
return false;
}
});
}
}
}
Please let me know if there is better/more efficient solution. Thanks!
There is a reference from the element to the owning component, in form of the component property, so from the scope of the element, you can access the panel like so:
var attachmentPanel = this.component;
I need help with OpenUI5. I created button in View and by clicking on button it creates Dialog window and throws an error so I cant proceed to functionality of the Dialog.
Button in view:
<m:Button text="{i18n>RESULTS_CHANCES_SEND_EMAIL}"
class="sapUiMediumMarginBegin results-button"
tap="sendToEmail"
press="sendToEmail"
icon="sap-icon://email">
Function in Controller:
sendToEmail: function() {
var email = new Dialog({
title: 'שליחת תוצאות לדוא"ל',
type: 'Message',
content: [
new Input('submitEmailInput', {
liveChange: function (oEvent) {
var sText = oEvent.getParameter('value');
var parent = oEvent.getSource().getParent();
parent.getBeginButton().setEnabled(sText.length > 0);
},
width: '100%',
placeholder: 'דואר אלקטרוני'
})
],
beginButton: new Button({
text: 'שליחה',
enabled: false,
icon: 'sap-icon://email',
press: function () {
//var sText = sap.ui.getCore().byId('submitEmailInput').getValue();
//MessageToast.show('Email is: ' + sText);
// here comes the API request
email.close();
}
}),
endButton: new Button({
text: 'סגירה',
icon: 'sap-icon://decline',
press: function () {
email.close();
}
}),
afterClose: function () {
email.destroy();
}
});
email.open();}
The error: duplicate id
Many thanks!
you have attached the same event handler to "tap" and "press" events so sendToEmail is being called twice (and the second time the control with the same ID already exists)... remove "tap" as this is depreciated, so you should end up with:
<m:Button text="{i18n>RESULTS_CHANCES_SEND_EMAIL}"
class="sapUiMediumMarginBegin results-button"
press="sendToEmail"
icon="sap-icon://email">
I'm using durandal/requirejs/knockout here.
I'm also using the coderenaissance plugin for mapping (ko.viewmodel.updateFromModel(zitem, data).)
I'm getting the following data from my ajax call which I'm mapping into my zitem observable.
{
"itemNumber" : "ABATAH000",
"effectiveDate" : "2015-11-03T15:30:05.7118023-05:00",
"expiryDate" : "2015-05-03T15:30:05.7118023-04:00",
"minimumPremium" : 25,
"zSubItems" : [{
"zSubItemName" : "Mine",
"unitDistance" : 100000,
"zSubSubItems" : [{
"zSubSubItemName" : "CoverageA",
"zSubSubItemPremium" : 100.0,
"id" : 0
}
],
"id" : 1
}
],
"id" : 0
}
And here is the viewmodel I'm using:
define(['plugins/http', 'durandal/app', 'knockout', 'services/datacontext'],
function (http, app, ko, datacontext) {
var zitem = ko.observable();
var activate = function () {
//This is just a wrapper around an ajax call.
return datacontext.getPolicy("value")
.then(function(data) {
ko.viewmodel.updateFromModel(zitem, data);
});
};
var updateMinimumPremium = function (thisItem) {
//This doesn't work
zitem.minimumPremium(thisItem.minimumPremium + 1);
};
return {
displayName: 'zitem example',
zitem: zitem,
updateMinimumPremium: updateMinimumPremium,
activate: activate
};
});
I'm binding the updateMinimumPremium to a click on a button at the same level as the minimumPremium element.
<button data-bind="click: $parent.updateMinimumPremium">Add 1</button>
How can I update [minimumPremium] or [zSubSubItemPremium] programatically?
"minimumPremium" would be observable
zitem.minimumPremium(thisItem.minimumPremium() + 1);
Your zitem is observable as well, so try this:
zitem().minimumPremium(thisItem.minimumPremium + 1);
In real application don't forget to check the value of zitem() call - it can be uninitialized.
I am able to access the onclick properties function for the printButton property at the end of the block. Although I am unable to initiate the onclick functions under the exportButton property.I have the following code.
B.exporting = {
type : "image/png",
url : "http://export.highcharts.com/",
width : 800,
enableImages : false,
buttons : {
exportButton : {
symbol : "exportIcon",
x : -10,
symbolFill : "#A8BF77",
hoverSymbolFill : "#768F3E",
_titleKey : "exportButtonTitle",
menuItems : [{
textKey : "downloadPNG",
onclick : function() {
this.exportChart()
}
}, {
textKey : "downloadJPEG",
**onclick : function() {
this.exportChart({
type : "image/jpeg"
})**
}
}, {
textKey : "downloadPDF",
onclick : function() {
this.exportChart({
type : "application/pdf"
})
}
}, {
textKey : "downloadSVG",
onclick : function() {
this.exportChart({
type : "image/svg+xml"
})
}
}
}]
},
printButton : {
symbol : "printIcon",
x : -36,
symbolFill : "#B5C9DF",
hoverSymbolFill : "#779ABF",
_titleKey : "printButtonTitle",
onclick : function() {
this.print()
}
}
}
};
I am binding keyboard controls to the click events using the jquery plugin this is what I used to print. This Works!:
Mousetrap.bind('ctrl+s', function(e) { B.exporting.buttons.printButton.onclick(this.print());
});
This code is what I tried to access an individual onclick function under the exportButton property in the json above
Mousetrap.bind('*', function(e) {B.exporting.buttons.exportButton.menuItems[0].onclick;});
The result i get is the value but i want to run the function as the onclick property does.Does anyone know how to run a function under a json property?I Appreciate any help here thanks folks.
Mousetrap.bind('click', B.exporting.buttons.exportButton.menuItems[0].onclick);
Your ctrl-s binding also looks wrong, it should be:
Mousetrap.bind('ctrl+s', B.exporting.buttons.printButton.onclick);
The printButton.onclick function doesn't take an argument. Your binding calls this.print before calling the printButton.onclick function, and then the printButton.onclick function
does it again.