{"type":"doc","content":[{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"A derived widget is a widget descended directly from another base widget. It is created by altering default properties of the base widget using the pui.toolbox.add() API. For more details about this API, refer to the ","type":"text"},{"text":"Widgets Development API","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/PUI/pages/164496560"}}]},{"text":" section of the documentation.","type":"text"}]},{"type":"paragraph","content":[{"text":"For widgets with a complex custom HTML layout, you may use an \"html container\" as the base widget with ","type":"text"},{"text":"EJS Templating","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/PUI/pages/164495443"}}]},{"text":". Any dynamic data can be bound to the \"value\" or the \"user defined data\" properties of the widget.","type":"text"}]},{"type":"paragraph","content":[{"text":"Example:","type":"text","marks":[{"type":"em"},{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"The following is a custom variation of a List Box:","type":"text"}]},{"type":"codeBlock","content":[{"text":"pui.toolbox.add({\n category: \"Custom Widgets\",\n widget: \"select box\", \n text: \"Custom List Box\",\n icon: \"/profoundui/proddata/images/icons/list_box.png\",\n\n proxyHeight: 86,\n proxyWidth: 150,\n proxyHTML: '',\n \n // any property of a \"select box\" can be altered here\n defaults: {\n \"select box height\": \"5\",\n \"width\": \"150px\",\n \"color\": \"#666666\",\n \"background color\": \"#FAE4AA\",\n \"choices\": \"Choice 1,Choice 2,Choice 3,Choice 4,Choice 5\",\n \"font family\": \"Sans-Serif\",\n \"font size\": \"12px\"\n } \n});\n\n","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}],"version":1}