How Do Custom UI Controls Work?

Custom UI controls use meta definition files, scripts, and CSS resources to implement a control that operates within a self-contained environment on the client side. The merchant uses the control in the Page Designer visual editor to configure a value for the attribute.

In the meta definition file for the component type, you define the type of an attribute for which you want to use a custom control as custom. If there is information to pass to the control, you can include an editor_definition element for the attribute. Just as for page types and component types, you must create a meta definition file and a script file for the control. The meta defintion file lists the CSS and JavaScript resources that the control requires. The script file optionally includes server-side logic or resources to initialize the control. You must include the meta definition file and script file, along with client-side JavaScript and CSS resources, in a custom cartridge assigned to the Business Manager site.

On the client side, each custom control is wrapped within a host component that contains an HTML <iframe> element. The <iframe> encapsulates the code and style of the control and represents a self-contained environment within which the control runs so that different custom controls on the same page don't interfere with each other.

Each host establishes a dedicated communication channel to its control. Page Designer adds some management code to the <iframe> that includes a subscribe method (with alias listen) and an emit method that send predefined events with serializable payloads back and forth between the host and the control.

For information about the messaging channel implemented for Page Designer custom UI controls, see Channel Messaging.