Custom Components
Description
Two types of reusable web components can be created by any developer with a good knowledge of Xbasic, HTML, and JavaScript. One type is the Custom Component, discussed in this article and those following. The other is the User-defined Component, which is both more flexible and harder to develop. We recommend starting by creating a Custom Component even if your ultimate goal is to develop a User-defined Component.
Uses and Benefits of a Custom Component
Just like you can with a Grid, Custom Components can be opened in a window, a DIV, or a Tabbed UI Pane, in a linked content section of another Grid, and in a row expander of another Grid. For example, here are the possible Action JavaScript actions:
When you pick the action to Open a Custom Component, you see a builder that lets you select the component and set its parameters:
A key benefit is that you can bind arguments in the Custom Component to the current row of a grid. In this case, we are binding a custom map component to a grid that has airport data including latitude and longitude:
At runtime, this lets us bring up a map for each airport:
Custom Component Videos
The Custom Component is for developers who want to generate the component using their own Xbasic code. These videos give a basic overview of the Custom Component. The explain what a custom component is, and show how the component can define arguments whose value can be passed in from the calling program.
The videos show how a custom component can be called from a Grid component and how the values of the arguments defined in the custom component can be passed in from data in the current Grid row.
Next the videos demonstrate a more realistic example where the Custom Component is used to define a pie chart displaying the breakdown of items on an order.
For More:
The articles that follow explain the JavaScript helpers for Custom components, how to create a Custom component, the function of the various parts of the Custom component builder, and how a Custom component can be shared and reused.
See Also