Creating custom widgets

The custom widget is a component that a user can build from scratch using JavaScript, HTML template, and CSS. Several JavaScript APIs are available for use for a custom widget to interact with a search service. Once created, custom widgets can be placed in the widget palette to share with other users or projects.

You create a custom widget by dragging the Custom () icon onto a cell in a page. Click the top row of the widget and click Edit (). A sidebar opens with the properties for this widget. The following properties are available.

Show widget frame: Specify whether the widget frame, which has a title bar with minimize and maximize icons, should be displayed.
Show border: Specify whether the widget frame should have a visible border. Only available if Show widget frame is selected.
Title: Provide a widget title shown on the title bar. If empty, the widget's title bar is not displayed. Only available if Show widget frame is selected.

Click Edit code to add the code for this widget. The Edit Code view has three panes.

Preview

This pane previews the output of the widget.

Settings

This pane has the following settings.

Render HTML automatically: Specify whether the HTML template should be rendered automatically. You may want to deselect this option and use the startRender() method to control rendering.
Invisible: If selected, the widget is invisible in the user interface. It can be used when you want to apply CSS or run JavaScript code without showing the widget itself.
Send click events for ranking: Specify whether to send a click event every time a document is selected from a document list.
Listen to search results: Specify whether the widget should listen to a specific data source changes. If checked, onSearch(), onSelect(), and onDeselect() callback methods are called when the data source state changes.
Perform search on data source: Specify whether the widget should search on specific data sources. If selected, you can choose data sources to search. The search() API performs a search on the data sources specified by this option.

Code

This pane has five tabs.

JavaScript: You can edit JavaScript code here.
HTML: You can edit HTML code here.
CSS: You can edit CSS code here.
Data: You can edit sample data for previewing the widget here.
Samples: This tab contains sample code. Click one of the names at the top of the code to view the code for that sample. You can copy sample code into your own code. Select the code you want and click Apply.

JavaScript programming

For information on JavaScript widget programming and the JavaScript API, see JavaScript module and lifecycle methods for custom widgets and JavaScript API for custom widgets.