The easiest way to understand this is to go into the designer, bind the property and then use the "View Source" option (if using the current version) or else saving it to a local file and viewing the local file in something like Notepad.
For example, if I wanted the default for a "button" widget to be bound to an indicator named "Field0001", I would start by going into the designer, dragging a button onto the canvas, and binding field0001 to the response property. Then when I hit "View Source" or did save-as local file and looked at the file, I'd see this:
Code: Select all
{
"id": "Button1",
"field type": "button",
"css class": "button",
"value": "Scott's Button",
"left": "530px",
"top": "185px",
"width": "100px",
"response": { "fieldName": "Field0001", "customTrue": "", "customFalse": "", "dataType": "indicator", "formatting": "Indicator", "indFormat": "1 / 0" }
}
In my case, the parts that I want in my example "derived widget" are the bound response and the value (the other stuff is default, or is based on the dragging of the mouse in the designer.) So I would do the same thing in the "defaults" area of my pui.widget.add.
Code: Select all
pui.toolbox.add({
category: "Custom Widgets",
widget: "button",
text: "Scott's Button",
icon: "/profoundui/proddata/images/icons/button.png",
cls: "widget-node",
proxyHeight: 23,
proxyWidth: 100,
proxyHTML: '<input type="button" class="button" value="Scott\'s Button" style="width: 100px">',
defaults: {
"value": "Scott's Button",
"response": {
"fieldName": "Field0001",
"customTrue": "",
"customFalse": "",
"dataType": "indicator",
"formatting": "Indicator",
"indFormat": "1 / 0"
}
}
});
Notice the "value" and "response" in the defaults match what the designer had output for those properties. If I use this custom derived widget in the designer, it will set those properties to their defaults when I drag the widget onto the canvas.
This example is a button, obviously, but the same technique works for making bound properties in any widget.