Hello there!
I made a settings Slide menu (custom control) on basis of the following blog entries: https://blogs.sap.com/2019/09/06/creating-a-sliding-panel-control-with-sapui5-part-1/ and https://blogs.sap.com/2019/09/09/creating-a-sliding-panel-control-with-sapui5-part-2/ .
I will also attach my already written code to this question.
My problem is, the fact that im not really able to change anything inside of this "slidemenu". For example I want to add two checkboxes (sap.m.CheckBox) into this SlidePanel and give the user the opportunity to select either both or one of them. But unfortunately I am not able to select anything. In fact both checkboxes are set as editable="true" by default, but still are not editable inside of the SlidePanel.
so to conclude my question: does anyone here have any ideas what I can do in order to fix this problem?
Thank you all in advance, I am looking forward to receive helpful answers.
Daniel
SlidePanel.js:
var oControlContent;
sap.ui.define([
"sap/m/Panel",
"sap/ui/Device",
"sap/ui/layout/VerticalLayout",
"sap/m/Toolbar"
], function (Panel, Device, VerticalLayout, Toolbar) {
"use strict";
return Panel.extend("custom.controls.SlidePanel", {
// Properties
metadata: {
properties: {
startVisible: {
type: "boolean",
defaultValue: false
},
autoWidth: {
type: "boolean",
defaultValue: true
},
toolbarTitle: {
type: "string",
defaultValue: ""
},
contrastStyle: {
type: "boolean",
defaultValue: false
},
backgroundColor: {
type: "string",
defaultValue: "white"
},
borderStyle: {
type: "string",
defaultValue: "solid" //works with all css border-style properties
},
borderColor: {
type: "string",
defaultValue: "silver" //works with all css color properties
},
borderWidth: {
type: "string",
defaultValue: "1px"
},
shadowOffsetX: {
type: "string",
defaultValue: "-1px"
},
shadowOffsetY: {
type: "string",
defaultValue: "1px"
},
shadowBlurRadius: {
type: "string",
defaultValue: "3px"
},
shadowColor: {
type: "string",
defaultValue: "grey"
}
}
},
// Initialization
init: function () {
this._test = "Ok";
// call standard initialisation
if (Panel.prototype.init) {
Panel.prototype.init.apply(this, arguments);
}
// add SlidePanel object local properties:
// width that needs to be slided: set after rendering, depending on rendered object
this._layoutWidth = 0;
// current panel status: whether it's slided away or not (used in button press handler)
this._slidedAway = this.getStartVisible() ? false : true;
},
// Before rendering
onBeforeRendering: function () {
if (Panel.prototype.onBeforeRendering) {
Panel.prototype.onBeforeRendering.apply(this, arguments);
}
// Force transparent style on the panel
this.setBackgroundDesign("Transparent");
// Set width of the Sidebar
if (this.getAutoWidth() || !this.getWidth()) {
if (Device.system.tablet && Device.orientation.portrait) {
this.setWidth("50%");
} else if (Device.system.tablet && Device.orientation.landscape) {
this.setWidth("40%");
} else if (Device.system.desktop) {
this.setWidth("25%");
} else {
this.setWidth("80%");
}
}
// Force header toolbar (optional title)
var oTB = new Toolbar({
design: "Solid",
style: "Clear"
});
if (this.getContrastStyle()) {
oTB.addStyleClass("sapContrast");
}
oTB.addContent(new sap.m.Text({
text: this.getToolbarTitle(), // set toolbar title
textAlign: "Center",
width: "90%"
}));
this.setHeaderToolbar(oTB);
},
// Rendering
renderer: function (oRM, oControl) {
if (!this._layoutWidth) {
// start slide panel div with id
oRM.openStart("div", oControl.getId());
// position and style slide panel
oRM.style("position", "absolute");
oRM.style("top", "0");
oRM.style("right", "0");
oRM.style("z-index", "999");
oRM.style("background-color", oControl.getBackgroundColor());
oRM.style("border-style", oControl.getBorderStyle());
oRM.style("border-color", oControl.getBorderColor());
oRM.style("border-width", oControl.getBorderWidth());
oRM.style("box-shadow", oControl.getShadowOffsetX() + " " + oControl.getShadowOffsetY() + " " + oControl.getShadowBlurRadius() + " " + oControl.getShadowColor());
if (oControl.getStartVisible()) {
oRM.style("visibility", "visible");
} else {
oRM.style("visibility", "hidden");
}
// set width
oRM.style("width", oControl.getWidth());
// PANEL CONTENT
oRM.openEnd();
// toolbars
var oTB = oControl.getHeaderToolbar();
if (!oTB) {
// N/A
} else {
oRM.renderControl(oTB);
}
oTB = null;
oTB = oControl.getInfoToolbar();
if (!oTB) {
// N/A
} else {
oRM.renderControl(oTB);
}
// content - add a wrapper around the content
var oLayout = new VerticalLayout({
width: "100%"
});
if (oControl.getContrastStyle()) {
oLayout.addStyleClass("sapContrast");
oLayout.addStyleClass("layoutContrastBG");
} else {
oLayout.addStyleClass("sapMPageBgStandard");
}
oLayout.addStyleClass("smallPadding");
// add the content from SlidePanel from the view, into the wrapper
if (oControlContent === undefined) {
oControlContent = oControl.getContent();
}
oControlContent.forEach(function (oCtrl) {
oLayout.addContent(oCtrl);
});
// render wrapper
oRM.renderControl(oLayout);
// close slide panel div
oRM.close("div");
}
},
// After rendering
onAfterRendering: function () {
if (this._layoutWidth === 0) {
var oLayout = this.$().find(".sapUiVlt");
if (oLayout.length === 1) {
var padding = parseInt(oLayout.css("padding-left").slice(0, -2), 10)
+ parseInt(oLayout.css("padding-right").slice(0, -2), 10),
shadow = parseInt(this.getShadowOffsetX().slice(0, this.getShadowOffsetX().length - 2));
if (shadow < 0) {
shadow = (shadow * -1) + parseInt(this.getShadowBlurRadius().slice(0, this.getShadowBlurRadius().length - 2));
}
else {
shadow = shadow + parseInt(this.getShadowBlurRadius().slice(0, this.getShadowBlurRadius().length - 2))
}
oLayout.width(oLayout.width() - padding);
// set sliding width (including padding and shadow effect)
this._layoutWidth = oLayout.width() + padding + shadow;
}
}
// check if the panel needs to be slided away at start
if (!this.getStartVisible()) {
var oSP = this.$(); // to use in animate callback
// slide away
this.$().animate({ right: "-" + this._layoutWidth, borderWidth: "0" }, 100, function () {
oSP.css("visibility", "visible"); // make it visible, now that it's slided away
});
}
},
/* slide button's press event */
_onSlidePanel: function () {
// slide the panel left/right using jQuery animate
if (this._slidedAway) {
this.$().animate({ right: "0", opacity: "1", borderWidth: this.getBorderWidth() }, 350, function () {
this._slidedAway = false;
}.bind(this));
} else {
this.$().animate({ right: "-" + this._layoutWidth, borderWidth: "0" }, 350, function () { //opacity:"0"
this._slidedAway = true;
}.bind(this));
}
}
});
});
homepage.view.xml (excerpt):
<custom:SlidePanel
id="slidemenu"
toolbarTitle="Settings">
<Label text="Example" class="sapUiSmallMarginTop"/>
<CheckBox
text="Option 1"
selected="true" />
<CheckBox
text="Option 2" />
</custom:SlidePanel>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.