Custom Widget creation

[SeanTyree]

I am posting this question here since the answer will be helpful to others in the future.

I want to create a derived version of the Dynamic Output Field with padding set to our standards for use in a grid.
When I create the derived widget, it behaves like a label and does not create the bound value.
How can derived widgets be created that will default to create bound values like the behavior of the standard widget?

Thanks,
Sean

[Scott Klement]

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.

[SeanTyree]

Hi Scott,

Thanks for the answer. The one difference is that the field name doesn't auto-sequence, but we can work without that if it's not available on a derived widget.

Sean

[Scott Klement]

Right, the field name is not being generated by Profound UI, it is using the name you assign. So, it will always have that exact name.

That shouldn't matter too much, since everyone always changes the name, they never keep "Field0001" (at least, I hope not!)