Bound content in Popover is not shown - sapui5

I created a popover which is called on mouseover via addEventDelegate.
The popover has a text element with binding to my Model.
The fragment:
<Popover xmlns="sap.m"
id="myCardPopover"
showHeader="false"
contentWidth="260px"
placement="Bottom">
<Text id="myCardPopoverText" text="{propertyModel>Tooltip}" />
</Popover>
Register the browser events:
attachCardPopoverOnMouseover: function () {
var rootHBox = this.byId("myReportCardContent");
rootHBox.addEventDelegate({
onmouseover: function () {
this.timeId = setTimeout(() => that.onOpenCardPopover(this), 600);
},
onmouseout: function () {
clearTimeout(this.timeId) || that.onCloseCardPopover(this);
}
}, rootHBox);
},
The event listener:
onOpenCardPopover: function (oControl) {
this.oCardTooltipPopover.then(function (oPopover) {
var oContext = oControl.getBindingContext("propertyModel");
oPopover.setBindingContext(oContext);
oPopover.openBy(oControl);
});
},
The Popover itself is a dependent of multiple controls created from an aggregation binding and is created in onAfterRendering.
// Fragment required from "sap/ui/core/Fragment"
createCardPopover: function () {
var oView = this.getView();
var oRootHBox = this.byId("myReportCardContent");
if (!this.oCardTooltipPopover) {
this.oCardTooltipPopover = Fragment.load({
id: oView.getId(),
name: "namespace.view.CardPopup"
}).then(function (oPopover) {
oRootHBox.addDependent(oPopover);
return oPopover;
});
}
},
When I hover over one of my controls, I only get an empty popover. The bound text isn't shown.
However, when I lookup the created popover in the UI5 debug tools, the binding seems correct and also the text is shown up there.
The text's <span> element in the DOM is also empty.

[...] multiple controls created from an aggregation binding
With this.byId("myReportCardContent"), you're accessing the template control rather than the actual rendered ones. A template in aggregation binding is usually a static control (i.e. without propagated models and contexts) that the ManagedObject will clone for each data object. After cloning, the parent models and contexts are propagated to those clones, and not to the internal template control.
So if you add the popover to the dependent aggregation of the template (oRootHBox), there is no context to propagate. The binding paths in the fragment definition stay unresolved.
How the issue can be circumvented is up to you. There are many approaches to show something on mouseover. Just avoid manipulating the template after rendering.

Related

The flexible column layout arrow does not work properly

I have created a flexible column layout and unfortunately it does not work properly.
When I want to expand the left part, I have to click on arrow twice instead once:
I am trying to figure out, but unfortunately could not find the error.
The view of Flexible Column Layout:
<mvc:View xmlns="sap.f" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m" displayBlock="true" controllerName="io.example.fclpoc.controller.App"
height="100%">
<FlexibleColumnLayout id="fcl" stateChange="onStateChanged" layout="{/layout}" backgroundDesign="Solid"></FlexibleColumnLayout>
</mvc:View>
and the controller:
sap.ui.define([
"sap/ui/model/json/JSONModel",
"sap/ui/core/ResizeHandler",
"sap/ui/core/mvc/Controller",
"sap/f/FlexibleColumnLayout"
], function (JSONModel, ResizeHandler, Controller, FlexibleColumnLayout) {
"use strict";
return Controller.extend("io.example.fclpoc.controller.App", {
onInit: function () {
this.oRouter = this.getOwnerComponent().getRouter();
this.oRouter.attachRouteMatched(this.onRouteMatched, this);
this.oRouter.attachBeforeRouteMatched(this.onBeforeRouteMatched, this);
},
onBeforeRouteMatched: function (oEvent) {
var oModel = this.getOwnerComponent().getModel();
var sLayout = oEvent.getParameters().arguments.layout;
// If there is no layout parameter, query for the default level 0 layout (normally OneColumn)
if (!sLayout) {
var oNextUIState = this.getOwnerComponent().getHelper().getNextUIState(0);
sLayout = oNextUIState.layout;
}
// Update the layout of the FlexibleColumnLayout
if (sLayout) {
oModel.setProperty("/layout", sLayout);
}
},
_updateLayout: function (sLayout) {
var oModel = this.getOwnerComponent().getModel();
// If there is no layout parameter, query for the default level 0 layout (normally OneColumn)
if (!sLayout) {
var oNextUIState = this.getOwnerComponent().getHelper().getNextUIState(0);
sLayout = oNextUIState.layout;
}
// Update the layout of the FlexibleColumnLayout
if (sLayout) {
oModel.setProperty("/layout", sLayout);
}
},
onRouteMatched: function (oEvent) {
var sRouteName = oEvent.getParameter("name"),
oArguments = oEvent.getParameter("arguments");
this._updateUIElements();
// Save the current route name
this.currentRouteName = sRouteName;
},
onStateChanged: function (oEvent) {
var bIsNavigationArrow = oEvent.getParameter("isNavigationArrow"),
sLayout = oEvent.getParameter("layout");
this._updateUIElements();
// Replace the URL with the new layout if a navigation arrow was used
if (bIsNavigationArrow) {
this.oRouter.navTo(this.currentRouteName, {
layout: sLayout
}, true);
}
},
// Update the close/fullscreen buttons visibility
_updateUIElements: function () {
var oModel = this.getOwnerComponent().getModel();
var oUIState = this.getOwnerComponent().getHelper().getCurrentUIState();
oModel.setData(oUIState);
},
onExit: function () {
this.oRouter.detachRouteMatched(this.onRouteMatched, this);
this.oRouter.detachBeforeRouteMatched(this.onBeforeRouteMatched, this);
}
});
});
I looked also in the debug console:
However no errors occur. I have also compare my code with https://sapui5.hana.ondemand.com/#/entity/sap.f.FlexibleColumnLayout/sample/sap.f.sample.FlexibleColumnLayoutWithTwoColumnStart/code/webapp/controller/FlexibleColumnLayout.controller.js and could not find differences.
What am I doing wrong?
The app can be found here https://github.com/softshipper/fclpoc
Update
I have run the app in my edge browser and it does not have any extension installed. The behavior is the same.
Here is the console output of edge:
This is less a direct answer to the question "why does my app do that". It's more of a help to self-help.
Basically, if you put a break point in each of the methods in your App controller, you will see that the layout is moving in the correct position first, then it is moving back in the incorrect position (it happens so fast that you dont see without debugger).
The layout is being set several times in the whole process. sometimes changing nothing, sometimes not. In the end, one of your methods sets the wrong layout.
PS: you have a semantic error, not a syntactic one (the app does what you asked it to do), so there are no errors in the console.

AG-Grid render Bootstrap-Select as a dropdwon

I have implemented editable AG-Grid. In the grid, one of the column displays country of the player as shown below:
Now in last column, when user click on the cell, I want to display list of available countries as a dropdown.
Here by default AG-Grid displays normal dropdown. Which I want to replace with Bootstrap-select.
To achieve this, I have implemented custom selector and using Bootstrap-select library.
But when cell is clicked, Dropdown is not being rendered. I am not getting any error though in console.
Here is the code of my custom cell-editor:
var selectCellEdior = function () { };
selectCellEdior.prototype = {
init: function (params) {
selector = document.createElement('select');
for(var i = 0; i < params.values.length; i++) {
var option = params.values[i];
$('<option />', { value: option, text: option }).appendTo(selector);
}
this.cellSelector = selector;
$(this.cellSelector).selectpicker({ size: 'auto' });
},
getValue: function () {
return $(this.cellSelector).find('.btn-text').text();
},
getGui: function () {
return this.cellSelector;
},
destroy: function () {
$(this.cellSelector).remove();
}
};
Here is the Sample Code
I dont understand what is the issue.
The problem is the selectpicker jQuery method seems to add a display: none to the select element. Ag-Grid is adding it to the DOM you just can't see it. Additionally the getValue function is not returning the selected option's text.
The following changes to getValue and getGui will make the grid work:
...
getValue: function () {
return $(this.cellSelector).val();
},
getGui: function () {
this.cellSelector.style.display = 'block';
return this.cellSelector;
},
...
Here is the modified Plunker
For anyone looking at this now.... Ag-grid has a method afterGuiAttached that is called after the GUI has been attached to the Grid's cell. If you're noticing that the bootstrap-select still isn't "quite right" after following the instructions above, put ALL of the calls to selectpicker in afterGuiAttached instead of init or getGui. This will place the bootstrap-select into a div with the right classes it needs (dropdown, bootstrap-select, etc), and create all of the bootstrap-select elements that are properly shown/hidden.

How to Set Width of sap.m.MessagePopover?

The control sap.m.MessagePopover has an attribute _oPopover (containing sap.m.Popover inside).
Using this attribute, I could set the popover width:
messagePopover._oPopover.setContentWidth("450px");
However, as SAP attributes starting from _ should not be used, does anybody know a cleaner way?
As of UI5 version 1.46, a more flexible control sap.m.MessageView can be used instead of the old sap.m.MessagePopover.
There is no need to access internal properties or apply custom CSS style classes to manipulate the width as you can put MessageView anywhere you want (Still, Fiori Guideline recommends to use it only within a responsive popover or a dialog).
const popover = new ResponsivePopover({
contentWidth: "450px",
contentHeight: "450px",
content: [
/*myMessageView*/
],
});
// ...
popover.openBy(...);
Compared to MessagePopover, MessageView can group items and more.
Internally, MessagePopover uses MessageView too.
Another solution would be to use CSS class. However, there is a catch. As you can see from below generated DOM of the message popover, inline styling has been used :( .
Only way to override inline-style is by using !important in CSS which is again not recommended approach. However, considering inline CSS has been used, I would go with using !important keyword. Below is the working code:
XML Code ( for adding Class):
<MessagePopover id='myMP' class='myPopoverClass'>
<items>
<MessagePopoverItem title='Title' subTitle='SubTitle'></MessagePopoverItem>
</items>
</MessagePopover>
CSS:
.myPopoverClass {
width:100rem;
}
.myPopoverClass .sapMPopoverCont {
width:100% !important;
}
You can play around with how much width you need for message Popover.
EDIT: This is from the source code:
MessagePopover.prototype.init = function () {
var that = this;
var oPopupControl;
this._oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");
this._oPopover = new ResponsivePopover(this.getId() + "-messagePopover", {
showHeader: false,
contentWidth: "440px",
placement: this.getPlacement(),
showCloseButton: false,
modal: false,
afterOpen: function (oEvent) {
that.fireAfterOpen({openBy: oEvent.getParameter("openBy")});
},
afterClose: function (oEvent) {
that._navContainer.backToTop();
that.fireAfterClose({openBy: oEvent.getParameter("openBy")});
},
beforeOpen: function (oEvent) {
that.fireBeforeOpen({openBy: oEvent.getParameter("openBy")});
},
beforeClose: function (oEvent) {
that.fireBeforeClose({openBy: oEvent.getParameter("openBy")});
}
}).addStyleClass(CSS_CLASS);

Kendo UI: How to set the value of a tooltip with a MVVM binding

In Kendo UI, I have a tooltip declaratively defined inside a view:
<span data-bind="events: { show: onShow }"
data-role="tooltip"
data-auto-hide="true"
data-position="top">?</span>
Normally the content of the tooltip would be attached via the title attribute, or when attaching the tooltip procedurally, via the content property. But here, the content should be fetched out of the model.
So I'm looking for the equivalent of data-bind="text: contents for the Kendo Tooltip.
Can be done by creating a small custom binder.
kendo.data.binders.widget.tooltip = {
value: kendo.data.Binder.extend({
refresh: function() {
var value = this.bindings["value"].get();
var tooltip = this.element;
tooltip.element.attr("title",value);
}
})
};
Here is a live demo.

ExtJS4: Add field to form panel but not want it to be rendered by panel

I have a static html form layout where i add extjs form fields using the "renderTo" config. In order to have form validation and simple submit methods i want to add the fields to a form panel. As the layout is managed by the html frame i don't want the form to be rendered by the panel (panel has html frame as contentEl and this should be used as is).
In extjs3 i could achieve this by adding the field not to the panel but to the BasicForm (formpanel.getForm().add(...)) but in extjs4 this method seems to be gone.
How can i do this using extjs4?
Thanks in advance.
Since you already have a Panel that uses the contentEl to render HTML into its body, I recommend to stick with this approach:
Replace the panel with an Ext.form.Panel instance - the configuration, particularly the contentEl config - can remain unchanged.
The code provided here will override a standard Ext class (Ext.layout.Layout) and introduce support for a 'renderItemTo' config property on child items of any Ext container or panel instance (including Ext.form.Panel).
The value of the config property should be the ID of an already rendered DOM node, e.g. a DIV element that is part of the HTML fragment used in as the contentEl of the parent container's body.
Ext.require(['Ext.layout.Layout'], function() {
Ext.override(Ext.layout.Layout, {
renderItem: function (item, target, position) {
if(item.renderItemTo) {
// render 'renderItemTo' components into the specified DOM element
item.render(item.renderItemTo, 1);
// don't allow container layout to seize the component
item.layoutManagedHeight = 2;
item.layoutManagedWidth = 2;
} else {
// just use standard Ext code for non-renderItemTo components
this.callOverridden(arguments);
}
},
isValidParent: function(item, target, position) {
// signal Ext that we are OK with were our 'renderItemTo' component is right now
// otherwise it would get moved during the layout process
return item.renderItemTo ? true : this.callOverridden(arguments);
}
});
});
Usage:
var panel = Ext.create('Ext.form.Panel', {
contentEl: 'form', // the DOM element ID that holds the HTML fragment for the body
title: 'My FormPanel with special FX',
items: [
{
xtype: 'textfield',
renderItemTo: 'text1', // the ID of a DOM element inside the HTML fragment
fieldLabel: 'Label 1',
},
{
xtype: 'textfield',
renderItemTo: 'text2', // the ID of a DOM element inside the HTML fragment
fieldLabel: 'Label 2'
}
]
});
I uploaded a working example to JSFiddle (note: resize the window if you experience a render problem - this is related to JSFiddle, not my override).
After digging through the layout system of ExtJS 4.1 i implemented a custom layout which moves the items after rendering to the desired position in the fixed markup. The result is the same as for the ExtJS 4.0.7 version from this thread. It seams to work for the ExtJS standard fields. I have some problems with my custom fields though.
Ext.define('Ext.ux.layout.Fixed', {
extend: 'Ext.layout.container.Auto',
alias: 'layout.uxfixed',
afterRenderItem: function(item) {
// move items with renderToFixedMarkup to desired position
if (item.renderToFixedMarkup) {
var target = Ext.getDom(item.renderToFixedMarkup);
this.moveItem(item, target);
}
},
isValidParent: function(item, target, position) {
// items with renderToFixedMarkup property are always positioned correctly
return (item.renderToFixedMarkup) ? true : this.callOverridden(arguments);
}
});
It can be used by setting "layout: 'uxfixed'" on the panel and the "renderToFixedMarkup" config on the items.