General Concepts for Integrating 3rd-Party Components
The following general concepts can be used for integrating any 3rd party widget with Profound UI.
- If there are multiple files the widget depends on, or if some files should be conditionally loaded, then the files can be specified in the "dependencies" option to pui.widgets.add. When using dependencies, files are only loaded on-demand, when a widget first needs them and before Profound UI tries to render the widget.
- When using Profound UI releases including and newer than Version 6 Fix Pack 12.0, wrap the 3rd-party component in a pui.BasicWidget class, which gets automatically treated like a Profound UI native widget.
- For older versions of Profound UI:
- The next step is to place a Profound UI widget on screen that is rendering using the HTML element the 3rd party component needs to render into. For example, if a <div> element is required, you can use a ‘label’ or ‘output field’ widget which is exactly that. Just remove the ‘value’ property, size/position where you want on screen, and give a unique element id using the widget’s ‘id’ property.
- The code to render the 3rd party component to the editor can then be called from the record format’s “onload” event.
- Additional steps may be required to get the 3rd party component to submit data to the server properly. This may not apply to the component you are working with. This point applies to components that work by manipulating input controls. Profound UI will only submit data to the server for input controls it deems to have been modified by the user. This becomes a problem when the input control is modified by coding in the component, rather than the user typing into or clicking on the control. For example, imagine a date picker component. The user selects a date from a calendar pop-up and the component then writes it into a textbox. Profound UI won’t see the text box as having been changed, as the user didn’t type into it. For components that work in this way, it’s necessary to use Profound UI’s ‘pui.set’ API to set the input control value. Using the date picker example, you could call this from the date picker’s ‘onselect’ event.