I have a modal dialog that should get filled automatically with values.
It looks like this:
As you can see in the console, listCategory has the value Social (Comment), but it doesn't appear in the modal dialog and I don't know why.
It only has a value if I write this:
return {
commentData: {
comment: "",
customDate: ""
},
selectedCategory: "Social (Comment)",
lang: {
default: "en"
}
};
I'm not too familiar with Vue.js which is why I want to know how one can assign listCategory to selectedCategory.
This doesn't work:
selectedCategory: listCategory,
Nor does this:
selectedCategory: this.listCategory,
Here is the code:
export default {
props: ["text"],
components: { DatePicker },
data: function() {
var listCategory;
var listComment;
var listDate;
let siteUrl = 'https://thesite.sharepoint.com/sites/Playercard/';
let clientContext = new SP.ClientContext(siteUrl);
let oList = clientContext.get_web().get_lists().getByTitle('Comment');
let camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/>' +
'<Value Type=\'Number\'>100</Value></Eq></Where></Query></View>');
var collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
console.log("clientContext loaded!");
// First we much execute the query to retrieve the items
clientContext.executeQueryAsync(()=> {
// Now colListItem is a collection, we must iterate through it
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listDate = oListItem.get_item('Date');
listCategory = oListItem.get_item('Category');
listComment = oListItem.get_item('Comment');
}
console.log("listDate: " + listDate);
console.log("listCategory " + listCategory);
console.log("listComment: " + listComment);
this.commentData.customDate = listDate;
this.commentData.selectedCategory = listCategory;
this.commentData.comment = listComment;
clientContext.executeQueryAsync(
() => console.log('Item(s) edited')),
() => console.log('Failed to edit item(s)');
},
()=>console.log('Failed to retrieve items'));
return {
commentData: {
comment: "",
customDate: ""
},
selectedCategory: "",
lang: {
default: "en"
}
};
},
Here's the relevant part of the template:
<div class="row">
<div class="d-inline col-lg-4 col-md-4 col-sm-4" padding="0px">
Category
<font color="red">*</font>
</div>
<div class="d-inline col-lg-8 col-md-8 col-sm-8" padding="0px">
<select v-model="selectedCategory">
<option>Social (Comment)</option>
<option>Sport (Comment)</option>
<option>School (Comment)</option>
<option>Others (Comment)</option>
</select>
</div>
</div>
error is in line
this.commentData.selectedCategory = listCategory;
replace it with
this.selectedCategory = listCategory;
You have an issue here :
console.log("listCategory " + listCategory);
console.log("listComment: " + listComment);
this.commentData.customDate = listDate;
this.commentData.selectedCategory = listCategory; -----------> Your commentData dict does not have selectCategory as a key
this.commentData.comment = listComment;
Change it to this :
console.log("listCategory " + listCategory);
console.log("listComment: " + listComment);
this.commentData.customDate = listDate;
this.selectedCategory = listCategory;
this.commentData.comment = listComment;
I recently have a project to be working with Babylon.js and instead of using Colorpicker GUI, I must use an external color picker. In this case I'm using http://jscolor.com/. Here's my partial code (I'm only showing my small code, because of a strict post rule. Tell me if you still need more detailed code).
<!-- This is the external color picker -->
<input class="jscolor {onFineChange:'updateColor(this)'}" value="ffcc00" style="position: absolute;z-index: 999;">
<!-- end of external color picker -->
<script type="text/javascript">
var divcvs = document.getElementById("cvs");
var loader = document.getElementById("load");
if (loader && loader.parentElement)
loader.parentElement.removeChild(loader);
var engine = new BABYLON.Engine(divcvs, antialias, null, adaptive);
engine.enableOfflineSupport = offline;
engine.clear(new BABYLON.Color3(0, 0, 0), true, true);
engine.displayLoadingUI();
engine.loadingUIText = "Loading Content Assets";
var updateStatus = (status) => {
engine.loadingUIText = status;
};
var showSceneLoader = () => {
divcvs.style.opacity = "0";
engine.clear(new BABYLON.Color3(0, 0, 0), true, true);
engine.displayLoadingUI();
updateStatus("Loading Content Assets");
};
var removeSceneLoader = () => {
engine.hideLoadingUI();
divcvs.style.opacity = "1";
updateStatus("");
};
var progressSceneLoader = () => {
if (loaded === false && TimerPlugin && TimerPlugin.requestAnimFrame) {
if (scene != null) {
var waiting = 0 + scene.getWaitingItemsCount();
var content = (waiting > 1) ? " Content Assets" : " Content Asset";
updateStatus((waiting > 0) ? "Streaming " + waiting.toString() + content : ("Starting " + title));
}
TimerPlugin.requestAnimFrame(progressSceneLoader);
}
};
// Only works on this part for the scene
var executeSceneLoader = (root, name) => {
progressSceneLoader();
BABYLON.SceneLoader.Load(root, name, engine, (newscene) => {
scene = newscene;
// Access the Babylon Mesh and create a default scene
var pbr = new BABYLON.PBRMaterial("cube", scene);
var cube = scene.getMeshByName("sample_Cube");
cube.material = pbr;
pbr.albedoTexture = new BABYLON.Texture("scenes/KnittedMetal_AlbedoTransparency.png", scene);
pbr.useRoughnessFromMetallicTextureGreen = true;
// GUI and Controls
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
var panel = new BABYLON.GUI.StackPanel();
panel.width = "200px";
panel.isVertical = true;
panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
advancedTexture.addControl(panel);
// Babylon Color Picker, but I'm not using this. It's
// only for testing.
var textBlock = new BABYLON.GUI.TextBlock();
textBlock.text = "Choose color:";
textBlock.color = "#ffffff";
textBlock.height = "30px";
panel.addControl(textBlock);
var picker = new BABYLON.GUI.ColorPicker();
picker.value = pbr.albedoColor;
picker.height = "150px";
picker.width = "150px";
picker.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
picker.onValueChangedObservable.add(function(value) {
pbr.albedoColor.copyFrom(value);
});
panel.addControl(picker);
// End Babylon Color Picker
// End GUI and Controls
if (!scene.manager) {
if (BABYLON.SceneManager && BABYLON.SceneManager.CreateManagerSession) {
BABYLON.SceneManager.CreateManagerSession(root, scene);
BABYLON.Tools.Warn("Babylon.js created default scene manager session");
}
}
scene.executeWhenReady(() => {
loaded = true;
if (scene.manager && scene.manager.start) {
scene.manager.start();
} else {
engine.runRenderLoop(function() {
scene.render();
});
BABYLON.Tools.Warn("Babylon.js running default scene render loop");
}
removeSceneLoader();
});
});
};
// Default babylon scene loader
var defaultSceneLoader = (root, name) => {
scene = null;
loaded = false;
showSceneLoader();
executeSceneLoader(root, name);
};
if (engine) window.addEventListener("resize", () => {
engine.resize();
});
</script>
Where do I put this code below inside Babylon.js code?
function updateColor(custPicker) {
// This is only to show you the return value when the color picker is the trigger.
// This returns a hexadecimal string ex: #FFCC00
var colorval = custPicker.toHEXString();
console.log(colorval);
}
You can put it anywhere inside your script tag like this:
<!-- this is the external color picker -->
<input class="jscolor {onFineChange:'updateColor(this)'}" value="ffcc00" style="position: absolute;z-index: 999;">
<!-- end of external color picker -->
<script type="text/javascript">
function updateColor(custPicker) {
// this only to show you return value when color picker is trigger
// this return hex string ex: #FFCC00
var colorval = custPicker.toHEXString();
console.log(colorval);
}
// Your other code goes here:
// ...
</script>
I have the following code which the cancel button is not working. I cannot figure out why, when the cancel button is hit, it does not render properly. The expected behavior is when the user hit cancel it would just rollback and hide the admin window. See the jsfiddle below.
Thanks for all the help
https://jsfiddle.net/launeric/y188v9bg/#&togetherjs=HrxmjAojcq
<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2017 by AH0HA (http://jsbin.com/hoqerih/6/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html lang="en">
<head>
<meta name="description" content="udacity_catclicker_ben_admin_mod">
<meta charset="UTF-8">
<title>Cat Clicker</title>
<style id="jsbin-css">
img {
max-width:256px;
max-height:256px;;
width:auto;
height:auto;
}
</style>
</head>
<body>
<ul id="cat-list"></ul>
<div id="cat">
<h2 id="cat-name"></h2>
<div id="cat-count"></div>
<img id="cat-img" src="" alt="cute cat">
<br><button id="cat-admin-button-init" type="button">admin</button></br>
</div>
<div id="CatAdminDiv" style="display:none;">
<br>catName<input type="text" id="adminCatName" value="XXXXXX"></br>
<br>catURL<input type="text" id="adminCatURL" value="zzzzzz"></br>
<br>catCnt<input type="text" id="adminCatCnt" value="999"></br>
<br><button id="cat-admin-button-save" type="button">save</button></br>
<br><button id="cat-admin-button-cancel" type="button">cancel</button></br>
</div>
<script src="js/app.js"></script>
<script id="jsbin-javascript">
/* ======= Model ======= */
var model = {
currentCat: null,
cats: [
{
clickCount : 0,
name : 'Tabby',
imgSrc : 'https://static.pexels.com/photos/33358/cat-fold-view-grey-fur.jpg'
},
{
clickCount : 0,
name : 'Tiger',
imgSrc : 'https://static.pexels.com/photos/54632/cat-animal-eyes-grey-54632.jpeg',
},
{
clickCount : 0,
name : 'Scaredy',
imgSrc : 'http://1.bp.blogspot.com/-zAWnDj_hEeE/UjWq6heqF-I/AAAAAAAAB_8/iThTIziz7VA/s1600/cat.jpg',
},
{
clickCount : 0,
name : 'Shadow',
imgSrc : 'http://ravenclan.yolasite.com/resources/Dawnfleck.jpg',
},
{
clickCount : 0,
name : 'Sleepy',
imgSrc : 'https://i.ytimg.com/vi/aBSzB6qxisQ/0.jpg',
//imgSrc : 'img/9648464288_2516b35537_z.jpg',
//imgAttribution : 'https://www.flickr.com/photos/onesharp/9648464288'
}
]
};
/* ======= Octopus ======= */
var octopus = {
init: function() {
// set our current cat to the first one in the list
model.currentCat = model.cats[0];
// tell our views to initialize
catListView.init();
catView.init();
},
adminInit: function() {
var x = document.getElementById('CatAdminDiv');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
},
adminCancel: function(){
this.adminInit();
catView.render();
},
adminSave: function() {
var x = document.getElementById('cat-name');
var y = document.getElementById("adminCatName");
x.textContent = y.value;
},
getCurrentCat: function() {
return model.currentCat;
},
getCats: function() {
return model.cats;
},
// set the currently-selected cat to the object passed in
setCurrentCat: function(cat) {
model.currentCat = cat;
},
// increments the counter for the currently-selected cat
incrementCounter: function() {
model.currentCat.clickCount++;
catView.render();
}
};
/* ======= View ======= */
var catView = {
init: function() {
// store pointers to our DOM elements for easy access later
this.catElem = document.getElementById('cat');
this.catNameElem = document.getElementById('cat-name');
this.catImageElem = document.getElementById('cat-img');
this.countElem = document.getElementById('cat-count');
// on click, increment the current cat's counter
this.catImageElem.addEventListener('click', function(){
octopus.incrementCounter();
});
//admin begin
this.catAdminButtonInit = document.getElementById('cat-admin-button-init');
this.catAdminButtonCancel = document.getElementById('cat-admin-button-cancel');
this.catAdminButtonSave = document.getElementById('cat-admin-button-save');
this.AdminCatName = document.getElementById('AdminCatName');
this.AdminCatURL = document.getElementById('AdminCatURL');
this.AdminCatCnt = document.getElementById('AdminCatCnt');
this.AdminCatDiv = document.getElementById('CatAdminDiv');
this.catAdminButtonInit.addEventListener('click', function(){
octopus.adminInit();
});
this.catAdminButtonSave.addEventListener('click', function(){
octopus.adminSave();
});
this.catAdminButtonCancel.addEventListener('click', function(){
octopus.adminCancel();
});
//this.catAdminButtonCancel.addEventListener('click', function(){
// octopus.adminCancel();
//});
//admin end
// render this view (update the DOM elements with the right values)
this.render();
},
render: function() {
// update the DOM elements with values from the current cat
var currentCat = octopus.getCurrentCat();
this.countElem.textContent = currentCat.clickCount;
this.catNameElem.textContent = currentCat.name;
this.catImageElem.src = currentCat.imgSrc;
this.catNameElem.textContent = currentCat.name;
this.admincatName = document.getElementById("adminCatName");
this.admincatName.setAttribute("value", currentCat.name);
//document.getElementById("adminCatURL").setAttribute("value", currentCat.imgSrc);
//document.getElementById("adminCatCnt").setAttribute("value", currentCat.clickCount);
//var x = document.getElementById('AdminCatName');
// x.setAttribute("value",currentCat.name );
//x.value = 'xxx';//currentCat.name;
//var x2 = document.getElementById('adminCatName');
//x2.value=model.currentCat.name;
},
/*
renderAdmin: function(){
var currentCat = octopus.getCurrentCat();
//this.AdminCatName.value = currentCat.name;
var x = document.getElementById('AdminCatName')
x.setAttribute("value",currentCat.name );
}
*/
}
var catListView = {
init: function() {
// store the DOM element for easy access later
this.catListElem = document.getElementById('cat-list');
// render this view (update the DOM elements with the right values)
this.render();
},
render: function() {
var cat, elem, i;
// get the cats we'll be rendering from the octopus
var cats = octopus.getCats();
// empty the cat list
this.catListElem.innerHTML = '';
// loop over the cats
for (i = 0; i < cats.length; i++) {
// this is the cat we're currently looping over
cat = cats[i];
// make a new cat list item and set its text
elem = document.createElement('li');
elem.textContent = cat.name;
// on click, setCurrentCat and render the catView
// (this uses our closure-in-a-loop trick to connect the value
// of the cat variable to the click event function)
elem.addEventListener('click', (function(catCopy) {
return function() {
octopus.setCurrentCat(catCopy);
catView.render();
};
})(cat));
// finally, add the element to the list
this.catListElem.appendChild(elem);
}
}
};
// make it go!
octopus.init();
</script>
</body>
</html>
Hey i wanna lazy load the images on my page, so i created a data-src tag on my images tags and then i load it.
I know there ar many libs etc. but i have to learn js and css so i tired to to it whitout any help.
Now the problem is, the images hav no initial height so when the load the whole page is "jumping around"
here my js code:
var smuLazyLoad = (function (self) {
var body = document.getElementsByTagName('body')[0];
var defaultSetup = {
classSelector: "lazy",
loadDelay: 100,
fadeTime: 0.5
};
self.setup = {};
self.init = function (options) {
options = options || {};
self.setup.loadDelay = options.loadDelay || defaultSetup.loadDelay;
self.setup.classSelector = options.classSelector || defaultSetup.classSelector;
self.setup.fadeTime = options.fadeTime || defaultSetup.fadeTime;
self.appendHelperStyles();
self.addEvent('load',window,self.selectImages)
};
self.selectImages = function () {
var tags = document.getElementsByClassName(self.setup.classSelector);
for (var i = 0; i < tags.length; i++) {
self.loadImage(tags[i]);
}
self.appendShowCss();
};
self.appendShowCss = function () {
setTimeout(function () {
var style = document.createElement('style');
style.innerText = "." + self.setup.classSelector + "{opacity:1 !important;}";
body.appendChild(style);
}, self.setup.loadDelay);
};
self.loadImage = function (tag) {
var imageUrl = tag.getAttribute('data-src');
tag.setAttribute('src', imageUrl);
};
self.appendHelperStyles = function () {
var style = document.createElement('style');
style.innerText = "." + self.setup.classSelector + "{transition:all ease-in " + self.setup.fadeTime + "s;}";
body.appendChild(style);
};
self.addEvent = function (ev,ele,func) {
if (ele.addEventListener)
ele.addEventListener(ev,func,false);
else if (elem.attachEvent) {
ele.attachEvent("on"+ev, func);
}
else {
ele[ev] = func;
}
};
return self;
}(smuLazyLoad || {}));
and my image tags ... (twig/craftcms)
<img src="/onePxImage.jpg"
alt="{{ image.title }}"
data-src="/{{ image.getUrl('teaserImage') }}"
style="opacity: 0;"
class="lazy"
width="{{ image.getHeight('teaserImage') }}"
height="{{ image.getWidth('teaserImage') }}"
>
I am trying to add a DropDown list to a custom sharepoint ribbon bar tab using javascript, I know that this is not the recommended way and that I should use the declarative approach. I have managed to create Tabs, Groups and add buttons to them, but for some reason createing a dropdown does nothing and gives no errors.
here are the functions that I use to create the tab elements
function CreateCustomTab(tabName, tabTitle, tabGroup, tabToolTip) {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
var tab;
if (ribbon !== null) {
tab = new CUI.Tab(ribbon, tabName + ".Tab", tabTitle, tabToolTip, tabName + ".Tab.Command", false, '', null);
ribbon.addChild(tab);
}
return tab
}
function CreateTabGroup(tab, tabName, groupTitle, groupToolTip) {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
var group = new CUI.Group(ribbon, tabName + ".Tab.Group", groupTitle, groupToolTip, tabName + ".Group.Command", "test");
tab.addChild(group);
return group;
}
function CreateLayout(group, tabName, LayoutTitle) {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
var layout = new CUI.Layout(ribbon, tabName + ".Tab.Layout", LayoutTitle);
group.addChild(layout);
return layout;
}
function CreateDropDownList(tabName, layout, layoutTitle, listName, toolTip, listLabel, ToolTipTitle) {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
var section = new CUI.Section(ribbon, tabName + ".Tab.Section", 2, "Top"); //2==One Row
layout.addChild(section);
var controlProperties = new CUI.ControlProperties();
controlProperties.Command = listName + ".DropDown.Command";
controlProperties.Id = listName + ".ControlProperties";
controlProperties.TemplateAlias = "o1";
controlProperties.ToolTipDescription = toolTip;
// controlProperties.Image32by32 = (Image32by32RelativePath ? Image32by32RelativePath : '_layouts/15/images/placeholder32x32.png');
controlProperties.ToolTipTitle = ToolTipTitle;
controlProperties.LabelText = listLabel;
var dropDown = new CUI.Controls.DropDown(ribbon, listName + ".DropDown", controlProperties, ["Test1","Test2","Test3"]);
var controlComponent = dropDown.createComponentForDisplayMode('Large');
var row1 = section.getRow(1);
row1.addChild(controlComponent);
}
function CreateButton(tabName, layout, layoutTitle, buttonName, toolTip, buttonText, ToolTipTitle, Image32by32RelativePath) {
var ribbon = SP.Ribbon.PageManager.get_instance().get_ribbon();
var section = new CUI.Section(ribbon, tabName + ".Tab.Section", 2, "Top"); //2==One Row
layout.addChild(section);
var controlProperties = new CUI.ControlProperties();
controlProperties.Command = buttonName + ".Button.Command";
controlProperties.Id = buttonName + ".ControlProperties";
controlProperties.TemplateAlias = "o1";
controlProperties.ToolTipDescription = toolTip;
controlProperties.Image32by32 = (Image32by32RelativePath ? Image32by32RelativePath : '_layouts/15/images/placeholder32x32.png');
controlProperties.ToolTipTitle = ToolTipTitle;
controlProperties.LabelText = buttonText;
var button = new CUI.Controls.Button(ribbon, buttonName + ".Button", controlProperties);
//var controlComponent = new CUI.ControlComponent(ribbon, buttonName + ".MenuItem.Button", "Large",button)
var controlComponent = button.createComponentForDisplayMode('Large');
var row1 = section.getRow(1);
row1.addChild(controlComponent);
}
and here is how these are called
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
var pm = SP.Ribbon.PageManager.get_instance();
pm.add_ribbonInited(function () {
var tab = CreateCustomTab("SomeTab", "Some Tab", "View Format", "Use this tab");
var group = CreateTabGroup(tab, "SomeTab", "View Format", "Switch between");
var layout = CreateLayout(group, "SomeTab", "SomeTabLayout");
CreateButton("SomeTab", layout, "SomeTabLayout", "ListViewButton", "Switch to list view, this displays a grid with the items ungrouped in an editable table!", "List View", "Table List View");
CreateButton("SomeTab", layout, "SomeTabLayout", "HierarchyButton", "Switch to tree view, this displays a grid with the items grouped in a parent child relationship!", "Tree View","Hierarchy view");
var hierarchyEditGroup = CreateTabGroup(tab, "SomeTab", "Hierarchy Edit", "Edit hierarchy");
var hierarchyLayout = CreateLayout(hierarchyEditGroup, "SomeTab", "HierarchyLayout");
CreateButton("SomeTab", hierarchyLayout, "HierarchyLayout", "EditHierarchyButton", "Edit current hierarchy", "Edit Tree", "Edit current hierarchy");
var ViewsGroup = CreateTabGroup(tab, "ISSQeueuListTab", "Views", "Change data views");
var ViewsLayout = CreateLayout(ViewsGroup, "SomeTab", "ViewsLayOut");
CreateDropDownList("SomeTab", ViewsLayout, "Current View", "DataViewList", "Change the the current view from the available public and private views", "Current View", "View Selection");
group.selectLayout("SomeTabLayout");
hierarchyEditGroup.selectLayout("HierarchyLayout");
SelectRibbonTab("SomeTab.Tab", true);
SelectRibbonTab("Ribbon.Read", true);
$("#Ribbon\\.WebPartPage-title").hide();
var Commands = [];
Commands.push({ name: "SomeTab.Tab.Command", enabled: true, handler: function (a, b, c) { } });
Commands.push({ name: "SomeTab.Group.Command", enabled: true, handler: function (a, b, c) { } });
Commands.push({ name: "DataViewList.DropDown.Command", enabled: true, handler: function () { }});
Commands.push({
name: "HierarchyButton.Button.Command", enabled: true, handler: function (CommandID, properties, seq) {
AppFrame.contentWindow.postMessage("ShowTreeView()", "*");
var Ribbon = SOMESpAppSPPage.get_instance();
var button = Ribbon.GetCommand("EditHierarchyButton.Button.Command");
button.enabled = true;
RefreshCommandUI();
}
});
Commands.push({
name: "ListViewButton.Button.Command", enabled: true, handler: function (CommandID, properties, seq) {
AppFrame.contentWindow.postMessage("ShowListView()", "*")
var Ribbon = SOMESpAppSPPage.get_instance();
var button = Ribbon.GetCommand("EditHierarchyButton.Button.Command");
button.enabled = false;
RefreshCommandUI();
}
});
Commands.push({
name: "EditHierarchyButton.Button.Command", enabled: false, handler: function (CommandID, properties, seq) {
AppFrame.contentWindow.postMessage("ShowHierarchyEdit()", "*");
}
});
SOMESpAppSPPage.initializePageComponent(Commands);
});
var ribbon = null;
try {
ribbon = pm.get_ribbon();
}
catch (e) { }
if (!ribbon) {
if (typeof (_ribbonStartInit) == "function")
_ribbonStartInit(_ribbon.initialTabId, false, null);
}
else {
CreateCustomTab("SomeTab", "SOMESpApp List", "SOMESpAppTabGroup", "Use this tab to intertact with the ISS Queue");
}
}, "sp.ribbon.js");
I had to change some of the names of the variables, but this is exact code I am using. the buttons and tabs work but the Drop down will not any one have an idea.
Change the TemplateAlias for the control in "function CreateDropDownList" from "o1" to "o2" and I speculate this will start working:
controlProperties.TemplateAlias = "o2";