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)
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 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)
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());
},
viewtest is bound to a JSONModel. View2 is bound to the same JSONModel by creating a reference to viewtest and setting the model to viewtest.getModel().
What I'm trying to do is modify the shared model data in View3 by clicking a button so that the texts in textfield and textview will change automatically. However, the texts in textfield and textview remain "This is a text". What's the problem?
The index.html file:
and the viewtest.view.js file:
sap.ui.jsview("viewtest.viewtest", {
getControllerName : function() {
return "viewtest.viewtest";
},
createContent : function(oController) {
this.setModel(new sap.ui.model.json.JSONModel());
var oData = {
text: "this is a text"
};
this.getModel().setData(oData);
var oTextField = new sap.ui.commons.TextField({value: "{/text}"});
return [oTextField];
}
});
View2.view.js file:
sap.ui.jsview("viewtest.View2", {
getControllerName : function() {
return "viewtest.View2";
},
createContent : function(oController) {
var viewtest = sap.ui.view({viewName: "viewtest.viewtest", type:sap.ui.core.mvc.ViewType.JS});
this.setModel(viewtest.getModel());
this.getModel().setData(viewtest.getModel().getData());
var oTextView = new sap.ui.commons.TextView({text: "{/text}"});
return [oTextView];
}
});
View3.view.js file:
sap.ui.jsview("viewtest.View3", {
getControllerName : function() {
return "viewtest.View3";
},
createContent : function(oController) {
var oButton = new sap.ui.commons.Button({text:"click", press: func});
function func() {
var oView = new sap.ui.view({viewName:"viewtest.viewtest", type:sap.ui.core.mvc.ViewType.JS});
oView.getModel().setData({text:"hello world"}, true);
}
return [oButton];
}
});
Just a suggestion. Maybe it is worth to give in your .html file id to every view, and then in view3 update and set model to each one of the views by calling them by id?
Like,
in index.html:
var view1 = new sap.ui.view({id:"view1", viewName:"viewtest.View1", type:sap.ui.core.mvc.ViewType.JS});
and then in view3:
function func() {
var oView = sap.ui.getCore().byId("view1");
oView.getModel().setData({text:"hello world"}, true);
oView.getModel().refresh(); //if setting new model won't update the views
}
Or, if you use the same model in all your views, set model not to each view separately, but to the core:
viewtest.view.js file:
sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel());
thus, you don't need to set model in view2.
I am ashamed to say I have spent most of today on this. I am trying to build a form based on the contents of an data store. I am using Ext.js and the MVC architecture. Here's what I have:
var myitems = Ext.create('Ext.data.Store', {
fields: ['name', 'prompt', 'type'],
data :
[
{"name":"name", "prompt":"Your name" , "type":"textfield"},
{"name":"addr", "prompt":"Your street address", "type":"textfield"},
{"name":"city", "prompt":"Your city" , "type":"textfield"}
]
});
function genwidget(name, prompt, type)
{
console.log("In genwidget with name=" + name + ", prompt=" + prompt + ", type=" + type + ".");
var widget = null;
if (type == "textfield")
{
// widget = Ext.create('Ext.form.field.Text',
widget = Ext.create('Ext.form.TextField',
{
xtype : 'textfield',
name : name,
fieldLabel: prompt,
labelWidth: 150,
width : 400, // includes labelWidth
allowBlank: false
});
}
else
{
// will code others later
console.log("Unrecongized type [" + type + '] in function mywidget');
}
return widget;
};
function genItems(myitems)
{
console.log("Begin genItems.");
var items = new Ext.util.MixedCollection();
var howMany = myitems.count();
console.log("There are " + howMany + " items.");
for (var i = 0; i < myitems.count(); i++)
{
var name = myitems.getAt(i).get('name');
var prompt = myitems.getAt(i).get('prompt');
var type = myitems.getAt(i).get('type');
var widget = genwidget(name, prompt, type) ;
items.add(widget);
console.log("items.toString(): " + items.toString());
}
return items;
};
Ext.define('MyApp.view.dynamicform.Form' ,{
extend: 'Ext.form.Panel',
alias : 'widget.dynamicformform',
// no store
title: 'Dynamic Form',
id: 'dynamicform.Form',
bodyPadding: 5,
autoScroll: true,
layout: 'auto',
defaults:
{
anchor: '100%'
},
dockedItems: [ ],
items: genItems(myitems),
// Reset and Submit buttons
buttons: [
{
text: 'Reset',
handler: function()
{
this.up('form').getForm().reset();
console.log('Reset not coded yet');
}
},
{
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function()
{
var form = this.up('form').getForm();
if (form.isValid())
{
form.submit({
success: function(form, action)
{
console.log('Success not coded yet');
}
});
}
}
} // end submit
], // end buttons
initComponent: function()
{
console.log("--> in dynamicform init");
this.callParent(arguments);
console.log("--> leaving dynamicform init");
}
}); // Ext.define
The error I am getting (I've had many throughout the day) is "my.items.push is not a function".
Thanks in advance for any help you can offer!
items is expected to be an array not MixedCollection. It is changed to MixedCollection later on if I remember good. So to fix your issue change:
var items = new Ext.util.MixedCollection();
// ...
items.add(widget);
to
var items = [];
// ...
items.push(widget);
Consider as well defining items of form as an empty array and then in initComponent make use of Ext.apply:
var me = this,
items = genItems(myitems);
Ext.apply(me, {
items:items
});