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)
Related
I am new in vuejs2 development. I am working in a modal development. I kept the modal body code in a component and displaying that modal in another component. I have below code in modal body component.
<script>
import SemanticModal from 'vue-ya-semantic-modal'
export default {
components: { SemanticModal: SemanticModal() },
name: 'ModalBody',
props: ['active1',],
data() {
return {
visible: false
}
},
methods: {
close() {
this.$emit('sendValue', false); //this is working
this.visible = false
},
open () {
this.visible = true
},
},
watch: {
active1 () {
if (this.active1 && !this.visible) this.open()
else if (!this.active1 && this.visible) this.close()
},
},
directives: {
'click-outside': {
bind: function(el, binding, vNode) {
el.onclick = function(e) {
var modal = document.getElementsByClassName("modal");
el.addEventListener('click', function (event) {
if (!modal[0].contains(event.target)) {
vNode.context.$emit('sendValue', false); //this is not working
this.visible = false
}
})
}
}
}
}
}
I am calling that model (child) component in parent component like below
<modal-body :active1="active1" #sendValue="active1 = $event"></modal-body>
I need to change the below props active1 value to false from child to parent component.
You are handling click event by using directives.
According to your requirement , clickoutside directive should emit sendValue event from child to parent. But i feel like your code has some complications.
The proper code to accomplish your scenario is below
directives: {
'clickoutside': {
bind: function(el, binding, vNode) {
el.onclick = function(e) {
console.log("binding clicked");
vNode.context.$emit('sendValue', false);
}
}
}
}
if your objective is to use click event you can use #click binding to accomplish the same
I am getting data from oModel, and it {msgData} object
var Buttons = [{text:"apple"},{text:"banana"}];
var sQuery = "some text...";
oModel.oData.msgData.push({
Type : "Information",
buttons:Buttons,
customIcon:"media/chat/b_small.png",
Text: sQuery
});
oModel.refresh();
(in xml file, you can see the code below)
XML:
<wt:MessageStrip
text="{msgData>Text}"
type="{msgData>Type}"
>
// ***** NEED TO ADD THESE LINES ****
<List items="{msgData>buttons}" class="fixFlexFixedSize BtnBox">
<Button press="BtnClick" text="{msgData>text}" class="sapUiTinyMarginEnd"/>
</List>
</wt:MessageStrip>
How can I add Button list to a control?
(Button list is in {msgData} object)
MessageStrip.js
sap.ui.define(["sap/m/MessageStrip"],
function (MessageStrip) {
"use strict";
return MessageStrip.extend("com.sap.it.cs.itsdpphome.controller
.fragments.MessageStrip", {
metadata: {
properties: {
},
aggregations: {
},
events: {
}
},
init: function () {
},
renderer:{}
});
});
First of all, you cannot add Button to a List. You have to use sap.m.CustomListItem to put a Button as content.
Let's get to the part about how to meet your current requirement for custom control.
you have define a aggregations for your MessageStrip to put your List
sap.ui.define(["sap/m/MessageStrip"],
function (MessageStrip) {
"use strict";
return MessageStrip.extend("com.sap.it.cs.itsdpphome.controller.fragments.MessageStrip", {
metadata: {
properties: {
},
aggregations: {
list: { type: "sap.m.ListBase", multiple: false }
},
events: {
}
},
init: function () {
MessageStrip.prototype.init.call(this);
},
renderer: {}
});
});
Then you define your own Renderer which extends sap/m/MessageStripRenderer for your MessageStrip. In order to render your list inside a MessageStrip, you have to copy some code from sap/m/MessageStripRenderer.
sap.ui.define(['sap/ui/core/Renderer', 'sap/m/MessageStripRenderer'],
function (Renderer, MessageStripRenderer) {
"use strict";
var MessageStripRenderer = Renderer.extend(MessageStripRenderer);
MessageStripRenderer.render = function (oRm, oControl) {
this.startMessageStrip(oRm, oControl);
this.renderAriaTypeText(oRm, oControl);
if (oControl.getShowIcon()) {
this.renderIcon(oRm, oControl);
}
this.renderTextAndLink(oRm, oControl);
//Render your list aggregation
oRm.renderControl(oControl.getAggregation("list"));
if (oControl.getShowCloseButton()) {
this.renderCloseButton(oRm);
}
this.endMessageStrip(oRm);
}
return MessageStripRenderer;
}, true);
I tried the below view XML and it renders like the following screenshot.
<wt:MessageStrip text="DUMMY">
<wt:list>
<List>
<items>
<CustomListItem><Button text="1" /></CustomListItem>
<CustomListItem><Button text="2" /></CustomListItem>
<CustomListItem><Button text="3" /></CustomListItem>
</items>
</List>
</wt:list>
</wt:MessageStrip>
Hope it helps. Thank you!
I'm following the docs here to add a context menu item to my grid. The issue is that from the scope of getContextMenuItems (in the example), I'm unable to access any other methods or variables in my component. Is this possible? Example below:
private varIWantToAccess: boolean = false;
function getContextMenuItems(params) {
var result = [
{ // custom item
name: 'Alert ' + params.value,
action: function ()
{
window.alert('Alerting about ' + params.value);
this.varIWantToAccess = true; // Builds fine, but throws a run time exception, since this "this" context is different than the one that has "varIWantToAccess"
}
},
....
return result;
}
Thanks!
You can add the reference to this in grid's context -
this.gridOptions.context = {
thisComponent : this
};
And then, thisComponent can be access as below -
private getContextMenuItems(params) {
console.log(params);
var result = [
{ // custom item
name: 'Sample',
action: function () {params.context.thisComponent.callMe(); },
icon: '<i class="fa fa-pencil" />'
}];
return result;
}
Same can be done for any other call backs like cellRenderer.
I assume that you are speaking of an Angular 2 or 4 component using TypeScript.
If so then use fat arrow to connect to your function.
Example:
gridOptions.getContextMenuItems = () => this.getContextMenuItems();
This should provide you the scope you need.
You need to provide parent context property to the item.
Sample context menu item:
{
name: 'BreakoutReport',
action: function () {
this.context.isDrillDownData = false;
this.context.isBreakOutReport = true;
this.context.populateBreakOutGrid();
},
cssClasses: ['redFont', 'bold'],
disabled: !params.value.drillDownReport,
context: params.context
}
Here, this.context has access to all the parent functions.
Remember, this context needs to be set in grid options first and then can be transferred to context menu items.
1st step: set context in gridOptions
getGridOption() {
return {
getContextMenuItems: this.getContextMenu,
context: this//pass parent context
};
}
2nd step: pass context to context menu subitems
getContextMenu(params) {
const result = [
{
name: 'Drilldown Report',
action: function () {
this.context.populateDrillDownReport();//access parent context using this.context inside the function.
},
cssClasses: ['redFont', 'bold'],
disabled: !params.value.drillDownReport,
context: params.context//pass parent context
},
'separator',
'copy',
'copyWithHeaders'];
return result;
}
you can just amend your getContextMenuItems
getContextMenuItems = (params) => {
var result = [
{
name: 'Activate ' + params.value,
action: function () {
window.alert('Activated Successfully ');
},
cssClasses: ['redFont', 'bold'],
},
{
name: 'Details',
action: () => {
this.router.navigate(['container-authorization/listing/distributor-container-store/details']);
},
cssClasses: ['redFont', 'bold']
},
}
method to fat arrow method like below.
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());
},
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)