The hunt for the missing dialog value ^^ - sapui5

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

Related

How to filter nested sap.m.Lists with a SearchField?

I created a list which has two more lists inside of it.
Here's the rough structure (working example at the end of the question):
// Data structure
results: [{
group: "1",
children: [{
group: "foo1",
children: [{
value1: "foo1.1",
value2: "bar1.1"
}, {
value1: "foo1.2",
value2: "bar1.2"
}],
}],
}]
// Element structure
List({
items: {
path: "/results",
template: CustomListItem({
content: List({
path: "children",
template: CustomListItem({
content: List({
path: "children",
template: StandardListItem({
title: "{value1}",
info: "{value2}",
})
})
})
})
})
}
})
Now I want to filter the items in the last lists and I don't understand how to do it.
For a single list I got it:
onSearch: function(oEvent) {
var sQuery = oEvent.getSource().getValue();
var oFilter = new sap.ui.model.Filter({
filters: [
new sap.ui.model.Filter("value1", sap.ui.model.FilterOperator.Contains, sQuery),
new sap.ui.model.Filter("value2", sap.ui.model.FilterOperator.Contains, sQuery)
],
and: false
});
var oBinding = this.byId("list-id").getBinding("items");
oBinding.filter(oFilter, sap.ui.model.FilterType.Application);
}
But in my case the value1 and value2 arent directly in the "list-id" list, but two levels below.
Here's a link to the minimal example:
https://jsfiddle.net/54xzbvsp/
It will not work with the standard filter on json model.
You should look into a tree if u have a 3 layer Hierarchie.
As the comment suggested as well, I couldn't find a solution using the Filter object, so I filtered the data manually and it worked like this:
onSearch: function(oEvent) {
let sQuery = oEvent.getSource().getValue();
let originalModel = this.getView().getModel();
let originalDataCopy = JSON.parse(JSON.stringify(originalModel.oData));
let filtered = originalDataCopy.results.filter(topGroup => {
// Filter second level groups
let filteredMidGroups = topGroup.children.filter(midGroup => {
// Filter last Level
let filteredSingleElements = midGroup.children.filter(singleElement => {
let search = sQuery.toLowerCase();
let valueFound = (
singleElement.value1.toLowerCase().includes(search) ||
singleElement.value2.toLowerCase().includes(search)
);
return valueFound;
});
midGroup.children = filteredSingleElements;
return (filteredSingleElements.length > 0);
});
topGroup.children = filteredMidGroups;
return (filteredMidGroups.length > 0);
});
let oModel = new sap.ui.model.json.JSONModel({
results: filtered
});
this.getView().setModel(oModel, "filtered");
}
Here the full minimal working example: https://jsfiddle.net/kh1fep3z/2/

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

Integrating WFS as gml in OL5

I try to visualize a WFS (from MapServer) in OL5.
The WFS works well (I can implement it without any problems in QGIS).
Also a request like:
http://blablabla/mapserv?service=WFS&version=1.1.0&request=GetFeature&typename=Flurstueckepunkt&srsname=EPSG:25832&bbox=411554,5791886,411677,5792008
gives me a nice gml-Output in epsg: 25832.
I try to implement it in OpenLayers like:
var vectorSource = new VectorSource({
format: new WFS(),
loader: function(extent, resolution, projection) {
var url = 'http://blablabla/mapserv?service=WFS&version=1.1.0&request=GetFeature&typename=ms:Flurstueckepunkt&srsname=EPSG:25832&bbox=412200,5791337,413600,5791800,EPSG:25832'
fetch(url).then(function(response) {
return response.text();
}).then(function(text) {
var features = vectorSource.getFormat().readFeatures(text);
// Add parsed features to vectorSource
vectorSource.addFeatures(features);
}).catch(function(error) {
alert(error.message);
})
}
});
var WFSLayer =new VectorLayer(
{
source: vectorSource,
projection: 'EPSG:25832',
style: new Style({ fill: new Fill({ color: 'yellow' })
})
});
var view = new View({
center: [rechtswert,hochwert],
zoom: mzoom,
projection: 'EPSG:25832'
});
var map = new Map({
layers: [osm,wmsLayer2,WFSLayer],
target: 'map',
view: view
});
...but the WFS-Layer is not shown at all.
Via the Mozialle-Debugger I can see, that the wfs-request workes, but nothing is visualized?
Has anybody an idea what is wrong here?
Allright, I got it. As the WFS ist delivering points the visualisation-style is important.
It workes now with:
var vectorSource = new Vector({
format: new GML3(),
loader: function(extent) {
var url = 'http://blablalbvlAn/cgi-bin/mapserv?service=WFS&version=1.1.0&request=GetFeature&typename=ms:Flurstueckepunkt&srsname=EPSG:25832&' +
'bbox='+ extent.join(',') +',EPSG:25832';
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
var onError = function() {
vectorSource.removeLoadedExtent(extent);
}
xhr.onerror = onError;
xhr.onload = function() {
if (xhr.status == 200) {
vectorSource.addFeatures(
vectorSource.getFormat().readFeatures(xhr.responseText));
var features3 = vectorSource.getFeatures();
} else {
onError();
}
}
xhr.send();
},
strategy: bbox
});
var WFSLayer =new VectorLayer(
{
source: vectorSource,
style: new Style({
image: new CircleStyle({
radius: 5,
fill: new Fill({
color: 'orange'
})
})
})
});

Suggestion popup doesnt appear for multi input control

I have dynamically attached live search event for my Multi Input control (please refer the below code). Even after attaching the .bindAggregation function for suggestionItems, the suggestion popup doesn't appear.
onAfterRendering: function(oEvent){
var that = this;
var oFacetFilters = sap.ui.getCore().byId
("xyzID").getContent()[0].getContent();
var oCapTreeFilter = oFacetFilters[6].getContent()[1];
oCapTreeFilter.attachLiveChange(function(oEvt){
//build filter array
var aFilter = [];
var sQuery = oEvt.getParameter("value");
if (sQuery) {
aFilter.push(new sap.ui.model.Filter("RootID",
sap.ui.model.FilterOperator.Contains, sQuery));
}
that.oModel.read("/RootName", {
async : false,
filters : aFilter,
success : function(oData, response){
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.setData(oData);
oCapTreeFilter.setModel(oJSONModel);
oCapTreeFilter.bindAggregation("suggestionItems",{
path: "/results",
template: new sap.ui.core.Item({text: "{RootID}"})
});
},
error : function(response){
sap.m.MessageBox.show("Error occurred");
}
});
});

Call function from controller from within event function of a responsivepopup

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