Skip to content

Instantly share code, notes, and snippets.

@scollenburg
Created May 8, 2014 05:44
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="SAPUI5 -- testbed for ListBox display defect" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script
src="https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js"
id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("ui5_listbox_visibility");
sap.ui
.controller(
"ui5_listbox_visibility.myview",
{
mdata : {
uistate : {
showshapes : true,
showcolors : true,
enableWorkaround : false,
},
viewdata : {
formname : "Visibility testbed",
shape_list : [ {
id : "0",
text : "Circle"
}, {
id : "1",
text : "Point"
}, {
id : "2",
text : "Line"
}, {
id : "3",
text : "Triange"
}, {
id : "4",
text : "Square"
} ],
color_list : [ {
id : "650",
text : "Red"
}, {
id : "590",
text : "Orange"
}, {
id : "589",
text : "Yellow"
}, {
id : "510",
text : "Green"
}, {
id : "475",
text : "Blue"
}, {
id : "445",
text : "Indigo"
}, {
id : "400",
text : "Violet"
} ]
}
},
oHidingHandler : false,
/**
* Called when a controller is instantiated and its View controls (if
* available) are already created. Can be used to modify the View before it
* is displayed, to bind event handlers and do other one-time
* initialization.
*
* @memberOf ui5_listbox_visibility.myview
*/
onInit : function() {
var view = this.getView();
this.oModel = new sap.ui.model.json.JSONModel(
this.mdata);
view.setModel(this.oModel);
},
/**
* Similar to onAfterRendering, but this hook is invoked before the
* controller's View is re-rendered (NOT before the first rendering!
* onInit() is used for that one!).
*
* @memberOf ui5_listbox_visibility.myview
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the
* document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
*
* @memberOf ui5_listbox_visibility.myview
*/
onAfterRendering : function() {
/*
* Nice in theory, however this does *not* get called during rerendering
*/
// for (var c in this.toBeHidden) {
// console.log(typeof(this.toBeHidden[c]));
// }
},
/**
* Called when the Controller is destroyed. Use this one to free resources
* and finalize activities.
*
* @memberOf ui5_listbox_visibility.myview
*/
// onExit: function() {
//
// }
toggleUIState : function(uiState) {
var f = this.oModel.getProperty("/uistate/"
+ uiState);
if (f) {
f = false;
} else {
f = true;
}
this.oModel.setProperty("/uistate/" + uiState, f);
this.oModel.refresh();
},
getHider : function() {
if (!this.oHidingHandler) {
var o = {
onAfterRendering : function(oEvent) {
var bFixIt = this
.getModel()
.getProperty(
"/uistate/enableWorkaround");
var oSAPDom = this.$();
/*
* We can't query using ID, since it will promptly be turned into
* a document.getElementById() call, which will only return the
* first element found (since ID's are not supposed to be duplicated)
*/
var oTooMany = $("[data-sap-ui="
+ this.getId() + "]");
if (bFixIt && oTooMany.length > 1) {
for (var j = 0; j < oTooMany.length; j++) {
if (oTooMany[j].parentElement != oSAPDom[0].parentElement)
oTooMany[j].remove();
}
}
}
};
this.oHidingHandler = o;
}
return this.oHidingHandler;
}
});
sap.ui.jsview("ui5_listbox_visibility.myview", {
oC : false,
thisView : false,
/**
* Specifies the Controller belonging to this View. In the case that it is
* not implemented, or that "null" is returned, this View does not have a
* Controller.
*
* @memberOf ui5_listbox_visibility.myview
*/
getControllerName : function() {
return "ui5_listbox_visibility.myview";
},
/**
* Is initially called once after the Controller has been instantiated. It
* is the place where the UI is constructed. Since the Controller is given
* to this method, its event handlers can be attached right away.
*
* @memberOf ui5_listbox_visibility.myview
*/
createContent : function(oController) {
this.oC = oController;
this.thisView = this;
var _self = this;
// Simple vertical Layout
var oVerticalLayout = new sap.ui.layout.VerticalLayout(oController
.createId("layoutRoot"));
// Buttons for toggling visibility
var oButton = new sap.ui.commons.Button(oController
.createId("bshowshapes"), {
text : "Toggle /uistate/showshapes",
press : function() {
oController.toggleUIState("showshapes");
}
});
oVerticalLayout.addContent(oButton);
var oButton = new sap.ui.commons.Button(oController
.createId("bshowcolors"), {
text : "Toggle /uistate/showcolors",
press : function() {
oController.toggleUIState("showcolors");
}
});
oVerticalLayout.addContent(oButton);
var oButton = new sap.ui.commons.Button(oController
.createId("benableWorkaround"), {
text : "Toggle /uistate/enableWorkaround",
buttonStyle : "Emph",
press : function() {
oController.toggleUIState("enableWorkaround");
}
});
oVerticalLayout.addContent(oButton);
// Horizontal for displaying the Workaround state
var oHorizontalLayout = new sap.ui.layout.HorizontalLayout();
oHorizontalLayout.addContent(new sap.ui.commons.Label({
text : "--> enableWorkaround: "
}));
oHorizontalLayout.addContent(new sap.ui.commons.Label({
text : "{/uistate/enableWorkaround}"
}));
oVerticalLayout.addContent(oHorizontalLayout);
// Give us a header
oVerticalLayout.addContent(new sap.ui.commons.TextView({
text : "{/viewdata/formname}",
design : sap.ui.commons.TextViewDesign.H3
}));
oVerticalLayout.addContent(new sap.ui.commons.HorizontalDivider());
// A matrix view for nice vertical column layout
var oMatrix = new sap.ui.commons.layout.MatrixLayout({
columns : 2,
layoutFixed : false
});
oVerticalLayout.addContent(oMatrix);
/*
* Shapes row
*/
var oRow = new sap.ui.commons.layout.MatrixLayoutRow();
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
hAlign : "End",
separation : "None"
});
oCell.addContent(new sap.ui.commons.Label({
text : "Shapes:",
visible : "{/uistate/showshapes}"
}));
oRow.addCell(oCell);
var oCell = new sap.ui.commons.layout.MatrixLayoutCell();
var olbShapes = new sap.ui.commons.ListBox(oController
.createId("lbshapes"));
olbShapes.bindAggregation("items", "/viewdata/shape_list",
new sap.ui.core.ListItem({
key : "{id}",
text : "{text}"
}));
var oddShapes = new sap.ui.commons.DropdownBox(oController
.createId("ddshapes"), {
"association:listBox" : olbShapes,
visible : "{/uistate/showshapes}"
});
/*
* If you comment out the next line, the drop-down will get no values.
*/
oCell.addContent(olbShapes);
// !!! Workaround !!!
olbShapes.addDelegate(this.oC.getHider(), false, olbShapes, false);
oCell.addContent(oddShapes);
oRow.addCell(oCell);
oMatrix.addRow(oRow); // Shapes
/*
* Colors row
*/
var oRow = new sap.ui.commons.layout.MatrixLayoutRow();
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
hAlign : "End",
separation : "None"
});
oCell.addContent(new sap.ui.commons.Label({
text : "Colors:",
visible : "{/uistate/showcolors}"
}));
oRow.addCell(oCell);
var oCell = new sap.ui.commons.layout.MatrixLayoutCell();
var olbColors = new sap.ui.commons.ListBox(oController
.createId("lbcolors"));
/*
* This next line keeps the ListBox from showing, but then
* the entire list is not shown in our DropdownBox
*/
// olbColors.setVisible(false);
olbColors.bindAggregation("items", "/viewdata/color_list",
new sap.ui.core.ListItem({
key : "{id}",
text : "{text}"
}));
var oddColors = new sap.ui.commons.DropdownBox(oController
.createId("ddcolors"), {
"association:listBox" : olbColors,
visible : "{/uistate/showcolors}"
});
oCell.addContent(olbColors);
oCell.addContent(oddColors);
// !!! Workaround !!!
olbColors.addDelegate(this.oC.getHider(), false, olbColors, false);
oRow.addCell(oCell);
oMatrix.addRow(oRow); // Colors
// * All done here *
return oVerticalLayout;
}
});
var view = sap.ui.view({
id : "idmyview1",
viewName : "ui5_listbox_visibility.myview",
type : sap.ui.core.mvc.ViewType.JS
});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
@scollenburg
Copy link
Author

Working example here:

http://jsbin.com/sidiq/1/edit?html,output

  1. Toggle showshapes or showcolors a few times. Note the ListBox shows up.
  2. Enable the workaround.
  3. Toggle showshapes or showcolros a few more times. No more extra ListBoxes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment