Creating a composite custom widget

[jpmurtha]

It appears that most of the custom widget examples in profound documentation show how to essentially make a copy of an existing widget with different default property values. The attached file shows a wireframe diagram of a standard screen design that will have a uniform header and footer. I would like to create the header and footer sections as custom widgets. After looking at the Google maps widget in the documentation it appears that it may be possible to create a custom widget that has several widget components. For the header custom widget I would like to have properties for header and sub-header text, text and url for navigation link, an array of page names and a set of buttons for saving state of current page and exiting application.

It appears that a simple container widget can server as the parent control. I can add child widgets for the various parts. Labels can serve as header and sub-header. A link and buttons can handle navigation, save and close. It appears that the step by step page control can be accomplished by creating, sizing and laying out labels and then writing a function for drawing the appropriate lines to visually display the current page using a combination of left, top and right border line color, style and width and two horizontal lines, one for the left and the other for the right. I will have to create custom properties for heading, sub-heading, button text, navigation link url and text, a comma delimited text field for the page names, and a numeric property for the current page. In the onload handler I can size and position appropriately. What I am not sure how to handle are the event handlers for the navigation link and buttons. Has anyone gone through this process and be willing to offer suggestions to help me get this started? Any and all help will be very appreciated.

HeaderDataFooterLayout.pdf

Wireframe diagram

(331.83 KiB) Downloaded 87 times

[jwilliams]

Jim,
To create a complex composite custom widget requires knowledge of JavaScript and the DOM. The easiest solution to accomplish what you want is to create a record format in the designer, lay it out how you want and use it as a template. Next open the designer in a new browser tab and copy your template record format onto the second tab.