Appboard/2.6/builder/widgets/html widget/api - Revision history

imported>Jason.nicholls: 1 revision

2015-12-04T05:14:09Z

1 revision

← Older revision	Revision as of 05:14, 4 December 2015
(No difference)

imported>Doug yeager: /* CustomWidget.js */

2015-11-25T05:19:58Z

CustomWidget.js

← Older revision		Revision as of 05:19, 25 November 2015
Line 154:		Line 154:

	* <tt>CustomWidget.setMaximized()</tt> - Set to true to maximize the widget, or false to restore the widget to the non-maximized state.		* <tt>CustomWidget.setMaximized()</tt> - Set to true to maximize the widget, or false to restore the widget to the non-maximized state.

			* <tt>CustomWidget.getSessionVar(varName)</tt> – Your HTML5 form widget must call this function to get the current value of the named session variable.

			* <tt>CustomWidget.getSessionVars()</tt> – Your HTML5 form widget must call this function to get the client's current session variables in key/value pair format.

			* <tt>CustomWidget.sessionVarsUpdateAvailable()</tt> – Your HTML5 widget must register a function callback to handle the session variables changed notification from Flex side of AppBoard. The callback function should have one single argument, which is an object that contains all the session vars in key/value pair format.

	* <tt>CustomWidget.setSessionVar(varName, varValue)</tt> – Your HTML5 form widget must call this function to save updates to the client's custom context variables. Note: They will not be saved to the server until CustomWidget.saveSessionVars() is called.		* <tt>CustomWidget.setSessionVar(varName, varValue)</tt> – Your HTML5 form widget must call this function to save updates to the client's custom context variables. Note: They will not be saved to the server until CustomWidget.saveSessionVars() is called.
Line 161:		Line 167:
	* <tt>CustomWidget.getAvailableDataCollections()</tt> - When configuring a HTML Widget it is possible to expose additional Data Collections beyond the primary Data Collection. Calling this function returns a list of provisioned Data Collections. This is in the format of an array with <tt>name</tt> and <tt>uid</tt> pairs. The name is for display purposes only and if using the associated getDataCollectionByID API call then it expects the UID as a parameter.		* <tt>CustomWidget.getAvailableDataCollections()</tt> - When configuring a HTML Widget it is possible to expose additional Data Collections beyond the primary Data Collection. Calling this function returns a list of provisioned Data Collections. This is in the format of an array with <tt>name</tt> and <tt>uid</tt> pairs. The name is for display purposes only and if using the associated getDataCollectionByID API call then it expects the UID as a parameter.

	* <tt>CustomWidget.getDataCollectionByID(uid, callback)</tt> - This will request the Data Collection identified by <tt>uid</tt> to be fetched from the server and when complete the <tt>callback</tt> function is called with the resulting Data Collection in the same format as the primary Data Collection. Note this is a one-time action and not subject to subsequent callbacks based on poll period as is the case with the primary Data Collection. If the HTML Widget requires updates then it will need to handle this itself via timer or other triggering event.		* <tt>CustomWidget.getDataCollectionByID(uid, callback)</tt> - This will request the Data Collection identified by <tt>uid</tt> to be fetched from the server if it has never been fetched and when complete the <tt>callback</tt> function is called with the resulting Data Collection in the same format as the primary Data Collection. Note this is a one-time action and not subject to subsequent callbacks based on poll period as is the case with the primary Data Collection. If the HTML Widget requires updates then it will need to handle this itself via timer or other triggering event.

			* <tt>CustomWidget.getDataCollectionByID(uid, callback, true)</tt> - This will request the Data Collection identified by <tt>uid</tt> to be fetched from the server and when complete the <tt>callback</tt> function is called with the resulting Data Collection in the same format as the primary Data Collection. Note this is a one-time action and not subject to subsequent callbacks based on poll period as is the case with the primary Data Collection. If the HTML Widget requires updates then it will need to handle this itself via timer or other triggering event.

			* <tt>CustomWidget.getBaseIconRegistry()</tt> - This will request the system Icon Registry dataset; typically used in configuration pages.

			* <tt>CustomWidget.getTileRegistry()</tt> - This will request the system Tile Registry dataset; typically used in configuration pages.

			* <tt>CustomWidget.getDateFormats()</tt> - This will request the System Date Formats dataset; typically used in configuration pages.

	=== Widget.js ===		=== Widget.js ===

imported>Jason.nicholls: /* CustomWidget.js */

2015-08-04T13:19:22Z

CustomWidget.js

← Older revision		Revision as of 13:19, 4 August 2015
Line 161:		Line 161:
	* <tt>CustomWidget.getAvailableDataCollections()</tt> - When configuring a HTML Widget it is possible to expose additional Data Collections beyond the primary Data Collection. Calling this function returns a list of provisioned Data Collections. This is in the format of an array with <tt>name</tt> and <tt>uid</tt> pairs. The name is for display purposes only and if using the associated getDataCollectionByID API call then it expects the UID as a parameter.		* <tt>CustomWidget.getAvailableDataCollections()</tt> - When configuring a HTML Widget it is possible to expose additional Data Collections beyond the primary Data Collection. Calling this function returns a list of provisioned Data Collections. This is in the format of an array with <tt>name</tt> and <tt>uid</tt> pairs. The name is for display purposes only and if using the associated getDataCollectionByID API call then it expects the UID as a parameter.

	* <tt>CustomWidget.getDataCollectionByID(uid, callback)</tt> - This will request the Data Collection identified by <tt>uid</tt> to be fetched from the server and when complete the <tt>callback</tt> function is called with the resulting Data Collection in the same format as the primary Data Collection.		* <tt>CustomWidget.getDataCollectionByID(uid, callback)</tt> - This will request the Data Collection identified by <tt>uid</tt> to be fetched from the server and when complete the <tt>callback</tt> function is called with the resulting Data Collection in the same format as the primary Data Collection. Note this is a one-time action and not subject to subsequent callbacks based on poll period as is the case with the primary Data Collection. If the HTML Widget requires updates then it will need to handle this itself via timer or other triggering event.

	=== Widget.js ===		=== Widget.js ===

imported>Jason.nicholls: /* CustomWidget.js */

2015-08-04T13:17:22Z

CustomWidget.js

← Older revision		Revision as of 13:17, 4 August 2015
Line 158:		Line 158:

	* <tt>CustomWidget.saveSessionVars()</tt> – Your HTML5 form widget must call this function in the doApply() function if you have called setSessionVar(varName, varValue) one or more times and need the modifications saved in the client's custom context variables to be saved to the server and to have the actions configured on the widget to be triggered. When actions are triggered as this is done without the normal context of a specific row of data the special <tt>id</tt> of <tt>-1111</tt> is used. This allows regular action filtering to determine which actions to fire.		* <tt>CustomWidget.saveSessionVars()</tt> – Your HTML5 form widget must call this function in the doApply() function if you have called setSessionVar(varName, varValue) one or more times and need the modifications saved in the client's custom context variables to be saved to the server and to have the actions configured on the widget to be triggered. When actions are triggered as this is done without the normal context of a specific row of data the special <tt>id</tt> of <tt>-1111</tt> is used. This allows regular action filtering to determine which actions to fire.

			* <tt>CustomWidget.getAvailableDataCollections()</tt> - When configuring a HTML Widget it is possible to expose additional Data Collections beyond the primary Data Collection. Calling this function returns a list of provisioned Data Collections. This is in the format of an array with <tt>name</tt> and <tt>uid</tt> pairs. The name is for display purposes only and if using the associated getDataCollectionByID API call then it expects the UID as a parameter.

			* <tt>CustomWidget.getDataCollectionByID(uid, callback)</tt> - This will request the Data Collection identified by <tt>uid</tt> to be fetched from the server and when complete the <tt>callback</tt> function is called with the resulting Data Collection in the same format as the primary Data Collection.

	=== Widget.js ===		=== Widget.js ===

imported>Jason.nicholls: /* CustomWidget.js */

2015-07-21T12:28:25Z

CustomWidget.js

← Older revision		Revision as of 12:28, 21 July 2015
Line 150:		Line 150:

	* <tt>CustomWidget.getID()</tt> - Returns the ID for this widget instance. This value may change client-to-client and even between reloads. It is useful to identify the iframe the widget is loaded in which will have the iframe ID of <tt>iframe_appboard_''[getID]''0</tt>, for example <tt>iframe_appboard_A70</tt>.		* <tt>CustomWidget.getID()</tt> - Returns the ID for this widget instance. This value may change client-to-client and even between reloads. It is useful to identify the iframe the widget is loaded in which will have the iframe ID of <tt>iframe_appboard_''[getID]''0</tt>, for example <tt>iframe_appboard_A70</tt>.

			* <tt>CustomWidget.isMaximized()</tt> - Returns true if the widget is currently maximized, otherwise false.

			* <tt>CustomWidget.setMaximized()</tt> - Set to true to maximize the widget, or false to restore the widget to the non-maximized state.

	* <tt>CustomWidget.setSessionVar(varName, varValue)</tt> – Your HTML5 form widget must call this function to save updates to the client's custom context variables. Note: They will not be saved to the server until CustomWidget.saveSessionVars() is called.		* <tt>CustomWidget.setSessionVar(varName, varValue)</tt> – Your HTML5 form widget must call this function to save updates to the client's custom context variables. Note: They will not be saved to the server until CustomWidget.saveSessionVars() is called.

imported>Jason.nicholls: /* CustomWidget.js */

2015-07-17T06:55:55Z

CustomWidget.js

← Older revision		Revision as of 06:55, 17 July 2015
Line 90:		Line 90:
	}</code></div>		}</code></div>

	* <tt>CustomWidget.setDataCollectionCallback(dataCollectionUpdated)</tt> – Your HTML5 widget must register a function callback to handle the data collection from Flex side of AppBoard. AppBoard will pass the widget a simple JavaScript object that looks like: <tt>{ data:[{},{}], columns:[{},{}] }</tt>. The example callback function below builds a table from the data collection passed in.		* <tt>CustomWidget.setDataCollectionCallback(dataCollectionUpdated)</tt> – Your HTML5 widget must register a function callback to handle the data collection from Flex side of AppBoard. AppBoard will pass the widget a simple JavaScript object that looks like: <tt>{ data:[{},{}], columns:[{},{}] }</tt>. Please note that AppBoard <tt>Date</tt> objects are converted into strings in the format <tt>YYYY-MM-DD HH:MM:SS</tt> - this is due to the JSON encoding not supporting a date format. If Javascript Date objects are desired then it is necessary to post-process the output and convert the strings. The example callback function below builds a table from the data collection passed in.
	<div style='margin-left: 2.5em'>		<div style='margin-left: 2.5em'>
	<code>[javascript,N]		<code>[javascript,N]

imported>Jason.nicholls: /* Basic Control Flow */

2015-06-18T14:12:30Z

Basic Control Flow

← Older revision		Revision as of 14:12, 18 June 2015
Line 56:		Line 56:
	*** if some client interaction has modified the data collection such as text-search, quick filters, and client or server-side filters.		*** if some client interaction has modified the data collection such as text-search, quick filters, and client or server-side filters.
	** (html) resize events: can happen due to resizing widgets, or the browser, or in some cases just because the flex client is hiding and showing the HTML iframe. This is really a function of the browser but it may be necessary to setup a callback for resize events to deal with these correctly (e.g. re-render the widget with the new dimensions).		** (html) resize events: can happen due to resizing widgets, or the browser, or in some cases just because the flex client is hiding and showing the HTML iframe. This is really a function of the browser but it may be necessary to setup a callback for resize events to deal with these correctly (e.g. re-render the widget with the new dimensions).
			** (html) API calls depending on user interaction such as triggering actions, setting session variables, or in admin mode saving configuration.

	== JavaScript Wrappers ==		== JavaScript Wrappers ==

imported>Jason.nicholls: /* Basic Control Flow */

2015-06-18T14:11:10Z

Basic Control Flow

← Older revision		Revision as of 14:11, 18 June 2015
Line 53:		Line 53:
	* normal operations		* normal operations
	** (flex) call data collection callback based on:		** (flex) call data collection callback based on:
	# if there is a polling interval, then every poll		*** if there is a polling interval, then every poll
	# if some client interaction has modified the data collection such as text-search, quick filters, and client or server-side filters.		*** if some client interaction has modified the data collection such as text-search, quick filters, and client or server-side filters.
	** (html) resize events: can happen due to resizing widgets, or the browser, or in some cases just because the flex client is hiding and showing the HTML iframe. This is really a function of the browser but it may be necessary to setup a callback for resize events to deal with these correctly (e.g. re-render the widget with the new dimensions).		** (html) resize events: can happen due to resizing widgets, or the browser, or in some cases just because the flex client is hiding and showing the HTML iframe. This is really a function of the browser but it may be necessary to setup a callback for resize events to deal with these correctly (e.g. re-render the widget with the new dimensions).

imported>Jason.nicholls at 14:09, 18 June 2015

2015-06-18T14:09:59Z

@@ Line 39: / Line 39: @@
 **custom – this is the recommended location for all custom \ customer developed HTML5 widgets. A widget that features the same name ..\<widget name>\ as a widget deployed to the ..\htmlwidgets\system folder will take precedence over the system folder widget.
 **system – this location is used by Edge to deploy example HTML5 widgets or HTML5 widgets that support AppBoard capabilities as deemed by Edge.
 == JavaScript Wrappers ==

imported>Jason.nicholls: /* CustomWidget.js */

2015-06-18T13:55:12Z

CustomWidget.js

@@ Line 48: / Line 48: @@
 This JavaScript library is the harness between AppBoard and any HTML / JavaScript-based application (widget) that is added to AppBoard. The file contains callbacks and functions that are used for getting and setting configuration, determining a click action on an HTML element, and showing data updates when data changes in AppBoard. The following functions can be called / implemented within an HTML5 widget:
-* <tt>CustomWidget.saveConfiguration(config)</tt> - Saves the HTML5 widget configuration data in the form of a simple JavaScript object: {'someParameterName':aVariable, 'anotherParameterName':anotherVariable}
+* <tt>CustomWidget.widgetInitialized()</tt> – This function must be called when your HTML / JS / CSS has finished loading so that the Flex side of the HTML widget knows you are ready to receive data and configuration.  For instance, the following (using JQuery) would be a way to notify Appboard that your HTML Widget has initialized.
 <div style='margin-left: 2.5em'>
 <code>[javascript,N]
@@ Line 126: / Line 106: @@
      $("#coolTable tbody").html(tbl_body);
 }</code></div>
 * <tt>CustomWidget.getThemeName()</tt> - Returns a string with the currently selected AppBoard theme. This could be used to make style decisions based on the theme.