| AppliBuilder
User Documentation |
The Widget Library is an extensible library of components, that can be extended with new components. Users can add widget library components, of different types, directly in the builder. One of the types of components is a component generated by custom Javascript code, what we refer to as a Javascript component.
This may often be Javascript wrapper code for other third-party components.
The following describes the steps required to add a new Javascript component to the widget library. This is an overview of the steps required, with details below.
This file contains the code to generate the javascript component. Following two variabales are initalized by the platform before script is evaluated, and should be used to ensure the component works properly.
The following is an example of a component that allows configuration of properties. We first check if the jscontaner value is initialized before we render the component.
if (jscontainer) {
if (!jselement) {
alert("Unable to render component.");
} else {
// Initialize list of element properties in the quick properties form
if (!jselement.quickProperties) { // Quick properties need to be specified as an array
jselement.quickProperties = new Array("title","subtitle",
"xlabel", "ylabel", "width", "height", "query", "display" );
}
Next initialize element properties as needed. This is not really needed in cases where your component works off a default value. However, it is useful in such cases to show users the default values in the property form, which can also be done by setting an initial form value in the property form HTML in the next section.
// Initialize property values in forms as needed
if (!jselement.title) jselement.title = 'Sample Title';
if (!jselement.subtitle) jselement.subtitle = 'Sample Sub Title';
if (!jselement.xlabel) jselement.xlabel = 'X-Label';
if (!jselement.ylabel) jselement.ylabel = 'Y-Label';
if (!jselement.width) jselement.width = 400;
if (!jselement.height) jselement.height = 300;
Finally, render the component. In this case the component is an image url, with the properties supplied to the image as url paramaters. These parameters are picked up from the jselement variable as shown.
// Pick up property values as needed from the element
var req = "/DataCharts/barchartimageinput?";
if (jselement["title"]) req += "&title=" + jselement["title"];
if (jselement["subtitle"]) req += "&subtitle=" + jselement["subtitle"];
if (jselement["xlabel"]) req += "&xlabel=" + jselement["xlabel"];
if (jselement["ylabel"]) req += "&ylabel=" + jselement["ylabel"];
if (jselement["width"]) req += "&width=" + jselement["width"];
if (jselement["height"]) req += "&height=" + jselement["height"];
if (jselement["display"]) req += "&display=" + jselement["display"];
if (jselement["query"]) req += "&query=" + jselement["query"];
var img = document.createElement('img');
img.src=req;
jscontainer.appendChild(img);
}
} else alert("Unable to render component - container null.");
Tjhis component can be added to the Widget Library as described below.
In order to enable configuration of component properties, a HTML form should be provided for each component added to the library. The HTML is not really an HTML form, but has the fields typically found in a form. These fields display and allow configuration of component properties.
Each property should use the same id value patterns for the input fields, so that the properties can be displayed and picked up when modified. The following is an example of such a property form HTML. Your specific HTML can vary considerably, with the id names constraint being the only real requirement, i.e. setthe input field id to quickprop_<property name>
<table class="chartform">
<tbody>
<tr>
<td style="vertical-align: top;" align="right">Title: </td>
<td style="vertical-align: top;"><input id="quickprop_title" name="title" type="text" size="30"></td>
</tr>
<tr>
<td style="vertical-align: top;" align="right">Subtitle: </td>
<td style="vertical-align: top;"><input id="quickprop_subtitle" name="subtitle" type="text" size="30"></td>
</tr>
<tr>
<td style="vertical-align: top;" align="right"> Width: </td>
<td style="vertical-align: top;"><input id="quickprop_width" name="width" type="text" size="30"></td>
</tr>
<tr>
<td style="vertical-align: top;" align="right"> Height: </td>
<td style="vertical-align: top;"><input id="quickprop_height" name="height"type="text" size="30"></td>
</tr>
<tr>
<td style="vertical-align: top;" align="right"> x-axis label: </td>
<td style="vertical-align: top;"><input id="quickprop_xlabel" name="xlabel" type="text" size="30"></td>
</tr>
<tr>
<td style="vertical-align: top;" align="right"> y-axis label: </td>
<td style="vertical-align: top;"><input id="quickprop_ylabel" name="ylabel" type="text" size="30"></td>
</tr>
<tr>
<td style="vertical-align: top;" align="right"> Type: </td>
<td style="vertical-align: top;">
<select id="quickprop_charttype" name="charttype" STYLE="width: 75px">
<option value="regular">regular </option>
<option value="3D">3D </option>
</select>
</td>
</tr>
<tr>
<td style="vertical-align: top;" align="right"> Display Category Labels: </td>
<td style="vertical-align: top;">
<select id="quickprop_display" name="display" STYLE="width: 75px">
<option value="no">no </option>
<option value="yes">yes </option>
</select>
</td>
</tr>
<tr>
<td style="vertical-align: top;" align="right"> SQL Query: </td>
<td style="vertical-align: top;">
<textarea id="quickprop_query" name="query" rows="5" cols="30"></textarea>
</td>
</tr>
</tbody>
</table>
As shown above, each field has an id derived from the property value.
Use the Extend Library link in the Widget Library to add the new Javascript component to the library. A property form will come up, and fill in the details for the component as described below.
Once all these properties are provided, click Add to add the component to the widget library tree.
| ©
2006 Applibase, Inc. |