I'm still struggling with custom widgets. (note to self - test thoroughly before posting dodgy code to the community).
In particular, adding a response property.
When I used addCustomProperty and added response just for my new controls, existing controls didn't save their response field to the DDS.
So I changed the custom property to responseInd, which saved the field to the DDS, but didn't set a value to the field returned to the RPG. It was always blank.
If I derive my widget from an existing button, I then can't declare the property setters to generate the required parms.dom.innerHTML = html, but I do get a response property. I can't seem to find a happy medium that will work.
Here's the code for my widget, without any kind of response property.
Code: Select all
//// Define Base widget
pui.widgets.add({
name: "css exit button",
newId: "cssExitButton",
menuName: "CSS Exit Button",
// additional default property values can be specified here
defaults: {
"width": "56px",
"height": "56px",
"background position": "center",
"background repeat": "no-repeat",
"z index": "99999",
"tool tip": "Exit",
"css class": "ankerCSSButton",
},
propertySetters: {
"field type": function(parms) {
if (parms.design) {
// design mode content creation code goes here
// add preview image
var img = document.createElement("img");
img.src = "/profoundui/userdata/images/icons/DesignerIcons/cssExitButton_DesignerIcon.png";
img.style.position = "absolute";
img.style.left = "0px";
img.style.top = "0px";
img.style.width = "100%";
img.style.height = "100%";
parms.dom.appendChild(img);
parms.dom.style.overflow = "hidden";
}
else
{
// code here will define how the widget appears at run-time
parms.dom.innerHTML = "";
var html = "";
var fontSize = parms.properties["font-size"];
var fontAwesomeFontSize = parms.properties["Font Awesome Size"];
var fontAwesomeFontScale = parms.properties["Font Awesome Scale"];
var html = addButtonMarkup("exit", fontSize, fontAwesomeFontSize, fontAwesomeFontScale);
parms.dom.innerHTML = html;
}
}
},
});
pui.toolbox.add({
category: "Anker Widgets",
widget: "css exit button",
text: "CSS Exit Button",
icon: "/profoundui/userdata/images/icons/DesignerIcons/cssExitButton_DesignerIcon.png",
// this determines the look of the drag/drop proxy as we drag the widget element off the toolbox
proxyHeight: 56,
proxyWidth: 56,
proxyHTML: '<img src="/profoundui/userdata/images/icons/DesignerIcons/cssExitButton_DesignerIcon.png" style="width: 56px; height: 56px;">',
// any property of a "select box" can be altered here
defaults: {
"width": "56px",
"height": "56px",
}
});
Any help will be gratefully received.
Regards,
Mark