Call function from controller from within event function of a responsivepopup - sapui5

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());
},

Related

SAP Fiori UI5 Capturing snapshot from video

I'm doing a small crud operation. I want to capture more than one image from the video. I am using a fixedDialog while doing this. But after taking a picture, I can't see the video while opening the fixedDialog again. I share my codes below.
First time opening video,
After capturing,
<Button text="Resim Ekle" width="100px" id="idCapture" press="takePhoto"/>
<Vbox id="wow">
<Vbox id="canvasContainer">
</Vbox>
</Vbox>
takePhoto: function(oEvent) {
// Create a popup object as a global variable
var that = this;
that.fixedDialog = new Dialog({
title: "Fotoğraf çekmek için tıklayınız",
beginButton: new sap.m.Button({
text: "Resim Çek",
press: function() {
that.imageVal = document.getElementById("player");
that.fixedDialog.close();
}
}),
content: [
new sap.ui.core.HTML({
content: "<video id='player' autoplay/>"
}),
new sap.m.Input({
placeholder: 'Lütfen resim adını giriniz',
required: false
})
],
endButton: new sap.m.Button({
text: "İptal",
press: function() {
that.fixedDialog.close();
}
})
});
that.getView().addDependent(this.fixedDialog);
this.fixedDialog.open();
that.fixedDialog.attachBeforeClose(this.setImage, this);
var handleSuccess = function(stream) {
player.srcObject = stream;
};
navigator.mediaDevices.getUserMedia({
video: true
}).then(handleSuccess);
},
setImage: function() {
var oVBox = this.getView().byId("wow");
var canvasContainer = this.getView().byId("canvasContainer");
var items = oVBox.getItems();
var snapId = 'canvas-' + items.length;
var textId = snapId + '-text';
var imageVal = this.imageVal;
var snapImg = null;
var snapCanvas = new sap.ui.core.HTML({
content: "<canvas display:none id='" + snapId + "' width='400' height='200' ></canvas>"
});
oVBox.addItem(snapCanvas);
snapCanvas.addEventDelegate({
onAfterRendering: function() {
var canvasElem = document.getElementById(snapId);
var snapCanvasContext = canvasElem.getContext('2d');
snapCanvasContext.drawImage(imageVal, 0, 0, canvasElem.width, canvasElem.height);
}
});
}
I suggest you to check if your this.fixedDialog exists before performing a new Dialog(): I suspect you are adding more than one <video id='player' autoplay/> when you are opening the Dialog again...
I suggest you to add only
that.fixedDialog.destroy();
in press event
my code is below
takePhoto: function (oEvent) {
debugger;
// Create a popup object as a global variable
var that = this;
that.fixedDialog = new sap.m.Dialog({
title: "Open Camera For Video",
beginButton: new sap.m.Button({
text: "Capture",
press: function () {
that.imageVal = document.getElementById("player");
that.fixedDialog.close(this);
that.fixedDialog.destroy();
}
}),
content: [
new sap.ui.core.HTML({
content: "<video id='player' autoplay/>",
}),
new sap.m.Input({
placeholder: 'Name',
required: false
})
],
endButton: new sap.m.Button({
text: "Close",
press: function () {
that.fixedDialog.destroy();
that.fixedDialog.close();
}
})
});
that.getView().addDependent(this.fixedDialog);
this.fixedDialog.open();
that.fixedDialog.attachBeforeClose(this.setImage, this);
var handleSuccess = function (stream) {
player.srcObject = stream;
};
navigator.mediaDevices.getUserMedia({
video: true
}).then(handleSuccess);
},
setImage: function () {
var oVBox = this.getView().byId("wow");
var canvasContainer = this.getView().byId("canvasContainer");
var items = oVBox.getItems();
var snapId = 'canvas-' + items.length;
var textId = snapId + '-text';
var imageVal = this.imageVal;
var snapImg = null;
var snapCanvas = new sap.ui.core.HTML({
content: "<canvas display:none id='" + snapId + "' width='400' height='200' ></canvas>"
});
oVBox.addItem(snapCanvas);
snapCanvas.addEventDelegate({
onAfterRendering: function () {
var canvasElem = document.getElementById(snapId);
var snapCanvasContext = canvasElem.getContext('2d');
snapCanvasContext.drawImage(imageVal, 0, 0, canvasElem.width, canvasElem.height);
}
});
}

Title and menu items of sap.ui.unified.Menu control

I am trying to add title to a sap.ui.unified.Menu control and it displays only the title; other menu items after this are not displayed.
How to bind the menu items to this, and how to get same view with other data without new menu element being created?
I want this :
I am getting :
My code:
sap.ui.define([], function () {
var dynamicMenu= new sap.ui.unified.Menu.extend("com.google.copa.common.CustomMenu", {
metadata: {
library: "com.google.copa.common",
properties: {
title: {
type: "string" } } },
init : function () { },
renderer:function(oRm,oControl){
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addClass("myCustTitle");
oRm.writeClasses();
oRm.write(">");
oRm.write("<h2>"+oControl.getTitle()+"</h2>");
oRm.write("</div>");
oRm.write(oControl); },
setTitle:function(val){
this.setProperty("title",val,true);
return this; } });
return dynamicMenu; })
This is how I am calling my custom Control:
var menu=new CustomMenu({ title:"MyCustom Title" });
var oItemTemplate = new sap.ui.unified.MenuItem({
text: "{description}",press:e=>alert("test") });
menu.bindAggregation("items", {
path: "/plants",
template: oItemTemplate });
thisOfBtn.getView().addDependent(menu);
menu.setModel(that.getModel());
// const eDock = sap.ui.core.Popup.Dock;
// unable to align position of popup
// menu.openBy(oButton.getFocusDomRef(),true, "EndTop", "EndBottom","0 -2");
menu.open(true,oButton.getFocusDomRef(),"BeginTop", "BeginBottom", oButton.getParent().getDomRef());
Try calling oRm.renderControl(oControl) instead of oRm.write(oControl)

The hunt for the missing dialog value ^^

Helloooo experts,
I have a dialog which I use both for creating and updating entries. Everything works fine, except a tiny (but still annoying) bit.
When I call the dialog for an existing entry, everything is smooth. Fields appear normally and update works alright.
When I call the dialog to create a new entry, I get a set of blank fields, I fill them all, press save and works OK. Where is the problem? One of these fields should have already a value since I have already assign a value with the oModel.createEntry method. I debug the app the properties for the entry look alright, everything seems alright (if not blind) but the value doesn't come with the field - rings any bells?
Code (quite short) attached below, field in doubt: iAgrId.
Thanks!
Greg
Debugger snapshot
onActionAdd: function() {
var oModel = this.getView().getModel();
//oModel.createEntry("/Agreement_ActionsSet");
var oActionEditDialog = new Dialog({title: "Create Action"});
this.createActionFormData(oActionEditDialog, oModel);
//get Agreement ID
var sAgreement = this.getView().getBindingContext().toString().slice(16,26);
var oNewObject = "{\"AgrId\": \"" + sAgreement + "\"}";
oNewObject = JSON.parse(oNewObject);
this.getView().addDependent(oActionEditDialog);
var oEntry = oModel.createEntry("/Agreement_ActionsSet", oNewObject);
oActionEditDialog.setBindingContext(oEntry);
//oActionEditDialog.bindElement(oEntry);
oActionEditDialog.open();
},
onActionEdit: function(oSourceEvent) {
var oModel = this.getView().getModel();
var oActionEditDialog = new Dialog({title: "Edit Action Details"});
this.createActionFormData(oActionEditDialog, oModel);
//to get access to the global model
var sPath = oSourceEvent.getSource().getParent().getBindingContext().toString();
this.getView().addDependent(oActionEditDialog);
oActionEditDialog.bindElement(sPath);
oActionEditDialog.open();
},
// populate form fields
createActionFormData: function(oActionEditDialog, oModel) {
var oActionTypeItemTemplate = new sap.ui.core.ListItem({ key:"{f4>AgrActtypeid}", text:"{f4>AgrActtypeid}", additionalText:"{f4>AgrActtypetxt}"});
var oActionStatusItemTemplate = new sap.ui.core.ListItem({ key:"{f4>AgrStatid}", text:"{f4>AgrStatid}", additionalText:"{f4>AgrStattxt}"});
var oActionAgentItemTemplate = new sap.ui.core.ListItem({ key:"{f4>AgrAgentid}", text:"{f4>AgrAgentid}", additionalText:"{f4>AgrAgenttxt}"});
var sAgrId = new sap.m.Label({text: "{i18n>actionAgrId}"});
var iAgrId = new sap.m.Input({value: "{AgrId}"});
var sAgrActionid = new sap.m.Label({text: "{i18n>actionLineItemTableIDColumn}"});
var iAgrActionid = new sap.m.Input({value: "{AgrActionid}", enabled: false});
var sCreatedBy = new sap.m.Label({text: "{i18n>actionCreatedBy}"});
var iCreatedBy = new sap.m.Input({value: "{CreatedBy}"});
var sCreatedOn = new sap.m.Label({text: "{i18n>actionCreatedOn}"});
var iCreatedOn = new sap.m.DatePicker({value: "{ path: 'CreatedOn', type:'sap.ui.model.type.Date', formatOptions: { style: 'medium', strictParsing: true} }"});
var sActionComment = new sap.m.Label({text: "{i18n>actionComment}"});
var iActionComment = new sap.m.Input({value: "{ActionComment}"});
var sAgrActionDate = new sap.m.Label({text: "{i18n>actionActionDate}"});
var iAgrActionDate = new sap.m.DatePicker({value: "{ path: 'AgrActionDate', type:'sap.ui.model.type.Date', formatOptions: { style: 'medium', strictParsing: true} }"});
var sAgrChaseDate = new sap.m.Label({text: "{i18n>actionChaseDate}"});
var iAgrChaseDate = new sap.m.DatePicker({value: "{ path: 'AgrChaseDate', type:'sap.ui.model.type.Date', formatOptions: { style: 'medium', strictParsing: true} }"});
var sAgrActtypeid = new sap.m.Label({text: "{i18n>actionActionType}"});
var iAgrActtypeid = new sap.m.ComboBox({
//id: "cbRoleType",
selectedKey: "{AgrActtypeid}",
//selectedItemId: "{AgrRoletptxt}",
showSecondaryValues : true,
items: {
path: "f4>/Action_TypesSet",
template: oActionTypeItemTemplate,
templateShareable: "false"}
}).bindProperty("value", "AgrActtypeid");
var sAgrStatidFrom = new sap.m.Label({text: "{i18n>actionStatusFrom}"});
var iAgrStatidFrom = new sap.m.ComboBox({
//id: "cbRoleType",
selectedKey: "{AgrStatidFrom}",
//selectedItemId: "{AgrRoletptxt}",
showSecondaryValues : true,
items: {
path: "f4>/Agreement_StatusesSet",
template: oActionStatusItemTemplate,
templateShareable: "false"}
}).bindProperty("value", "AgrStatidFrom");
var sAgrStatidTo = new sap.m.Label({text: "{i18n>actionStatusTo}"});
var iAgrStatidTo = new sap.m.ComboBox({
//id: "cbRoleType",
selectedKey: "{AgrStatidTo}",
//selectedItemId: "{AgrRoletptxt}",
showSecondaryValues : true,
items: {
path: "f4>/Agreement_StatusesSet",
template: oActionStatusItemTemplate,
templateShareable: "false"}
}).bindProperty("value", "AgrStatidTo");
var sAgrAgentidFrom = new sap.m.Label({text: "{i18n>actionAgentFrom}"});
var iAgrAgentidFrom = new sap.m.ComboBox({
//id: "cbRoleType",
selectedKey: "{AgrAgentidFrom}",
//selectedItemId: "{AgrRoletptxt}",
showSecondaryValues : true,
items: {
path: "f4>/Agreement_AgentsSet",
template: oActionAgentItemTemplate,
templateShareable: "false"}
}).bindProperty("value", "AgrAgentidFrom");
var sAgrAgentidTo = new sap.m.Label({text: "{i18n>actionAgentTo}"});
var iAgrAgentidTo = new sap.m.ComboBox({
//id: "cbRoleType",
selectedKey: "{AgrAgentidTo}",
//selectedItemId: "{AgrRoletptxt}",
showSecondaryValues : true,
items: {
path: "f4>/Agreement_AgentsSet",
template: oActionAgentItemTemplate,
templateShareable: "false"}
}).bindProperty("value", "AgrAgentidTo");
var oSaveButton = new sap.ui.commons.Button({
text: "Save",
press: function (oEvent) {
oModel.submitChanges({
success: function(oData, sResponse) {
},
error: function(oError) {
jQuery.sap.log.error("oData Failure", oError);
}
});
oEvent.getSource().getParent().close();
}
});
var oCancelButton = new sap.ui.commons.Button({
text: "Cancel",
press: function (oEvent) {
oModel.resetChanges();
oEvent.getSource().getParent().close();
}
});
oActionEditDialog.addContent(sAgrId);
oActionEditDialog.addContent(iAgrId);
oActionEditDialog.addContent(sAgrActionid);
oActionEditDialog.addContent(iAgrActionid);
oActionEditDialog.addContent(sCreatedBy);
oActionEditDialog.addContent(iCreatedBy);
oActionEditDialog.addContent(sCreatedOn);
oActionEditDialog.addContent(iCreatedOn);
oActionEditDialog.addContent(sActionComment);
oActionEditDialog.addContent(iActionComment);
oActionEditDialog.addContent(sAgrActionDate);
oActionEditDialog.addContent(iAgrActionDate);
oActionEditDialog.addContent(sAgrChaseDate);
oActionEditDialog.addContent(iAgrChaseDate);
oActionEditDialog.addContent(sAgrActtypeid);
oActionEditDialog.addContent(iAgrActtypeid);
oActionEditDialog.addContent(sAgrStatidFrom);
oActionEditDialog.addContent(iAgrStatidFrom);
oActionEditDialog.addContent(sAgrStatidTo);
oActionEditDialog.addContent(iAgrStatidTo);
oActionEditDialog.addContent(sAgrAgentidFrom);
oActionEditDialog.addContent(iAgrAgentidFrom);
oActionEditDialog.addContent(sAgrAgentidTo);
oActionEditDialog.addContent(iAgrAgentidTo);
oActionEditDialog.addContent(oSaveButton);
oActionEditDialog.addContent(oCancelButton);
},
Problem was in the parameter definition in the createEntry method, correct statement below:
var oEntry = oModel.createEntry("/Agreement_ActionsSet", {properties:oNewObject});

How can we create or set dynamic "Id" for button in SAPUI5?

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();
}

No views are displayed in ViewRepeater with activated respnsive

I've created this view. If I activate responsive, nothing is displayed. If I deactivate responsive I see the rows. What can be the reason?
createContent : function(oController) {
var oTileTemplate = new sap.ui.commons.layout.HorizontalLayout("tileTemplate");
var oEmployeeDetailsTemplate = new sap.ui.commons.layout.VerticalLayout("employeeDetailsTemplate");
//Name
var oEmployeeNameText = new sap.ui.commons.TextView( {
text: {
parts: [
{ path: "title" },
{ path: "firstname" },
{ path: "lastname" }
]
},
});
oEmployeeDetailsTemplate.addContent(oEmployeeNameText);
//Company
var oEmployeeCompanyText = new sap.ui.commons.TextView( {
text: "{company}",
});
oEmployeeDetailsTemplate.addContent(oEmployeeCompanyText);
//Plant
var oEmployeePlantText = new sap.ui.commons.TextView( {
text: "{plant}",
});
oEmployeeDetailsTemplate.addContent(oEmployeePlantText);
//Orgunit
var oEmployeeOrgunitText = new sap.ui.commons.TextView( {
text: "{orgunit}",
});
oEmployeeDetailsTemplate.addContent(oEmployeeOrgunitText);
oTileTemplate.addContent(oEmployeeDetailsTemplate);
var oViewRepeater = new sap.suite.ui.commons.ViewRepeater("tilesViewReapeater", {
title: new sap.ui.commons.Title({text: "Employee View", level: sap.ui.commons.TitleLevel.H1}),
noData: new sap.ui.commons.TextView({text: "Sorry, no data available!"}),
showViews: false, // disable view selector
showSearchField: false,
//set view properties directly to the repeater
responsive: true,
itemMinWidth: 210,
numberOfRows: 5, // view property NumberOfTiles has legacy name here
rows: {
path: "/employees",
template: oTileTemplate
}
});
return oViewRepeater;
In HTML-Output is nothing rendered in the ViewRepeaters body ul-element.
I don't understand why the element is only rendered correctly when responsive is true? Has anybody an idea?
Thanks!
I don't see any model-binding being done, probably this is missing. (or going wrong)