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

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

2014-06-06T18:31:28Z

CustomWidget.js

← Older revision		Revision as of 18:31, 6 June 2014
Line 128:		Line 128:
	*CustomWidget.saveSessionVars() – 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.		*CustomWidget.saveSessionVars() – 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.

	An HTML form example that updates session variables and triggers the refresh data collection actions.		An HTML form example that updates session variables and triggers the refresh data collection actions. This will demonstrate adding a form that will be used to build expressions used to filter data displayed in other widgets.

	1) Access the AppBoard Builder.		1) Access the AppBoard Builder.

imported>David.moore: /* CustomWidget.js */

2014-06-06T17:32:40Z

CustomWidget.js

← Older revision		Revision as of 17:32, 6 June 2014
Line 154:		Line 154:
	}		}
	</nowiki>		</nowiki>



	~~Appendix A: HTML SOurce required at step 6:~~

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

	This JavaScript library is the reference to the AppBoard object. The HTML5 widget will not call the functions within this library.		This JavaScript library is the reference to the AppBoard object. The HTML5 widget will not call the functions within this library.

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

2014-06-06T17:19:44Z

CustomWidget.js

← Older revision		Revision as of 17:19, 6 June 2014
Line 128:		Line 128:
	*CustomWidget.saveSessionVars() – 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.		*CustomWidget.saveSessionVars() – 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.

	~~Scenario - Building a simple~~ HTML ~~Form to save a~~ session ~~variable~~ and ~~trigger~~ the refresh data ~~colleciton action configured on this widget~~.		An HTML form example that updates session variables and triggers the refresh data collection actions.

	1) Access the AppBoard Builder.		1) Access the AppBoard Builder.

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

2014-06-06T17:09:18Z

CustomWidget.js

← Older revision		Revision as of 17:09, 6 June 2014
Line 146:		Line 146:
	7) Make sure you custom widget HTML form has the following doApply code to apply the entered start date:		7) Make sure you custom widget HTML form has the following doApply code to apply the entered start date:

			<nowiki>
	function apply() {		function apply() {
	// Update the session variables: startDate dateRangeFilter		// Update the session variables: startDate dateRangeFilter
Line 152:		Line 153:
	CustomWidget.saveSessionVars();		CustomWidget.saveSessionVars();
	}		}
			</nowiki>

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

2014-06-06T17:08:21Z

CustomWidget.js

← Older revision		Revision as of 17:08, 6 June 2014
Line 146:		Line 146:
	7) Make sure you custom widget HTML form has the following doApply code to apply the entered start date:		7) Make sure you custom widget HTML form has the following doApply code to apply the entered start date:

	~~// Note: This is important as it will set the necessary Session Vars and call save Session Vars.~~
	function apply() {		function apply() {
	// Update the session variables: startDate dateRangeFilter		// Update the session variables: startDate dateRangeFilter

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

2014-06-06T17:07:36Z

CustomWidget.js

← Older revision		Revision as of 17:07, 6 June 2014
Line 144:		Line 144:
	6) Create actions on your custom HTML Widget so that on selection it will trigger Data Collection Refresh actions on the EventsAfterDate and EventsByDateRange data collections.		6) Create actions on your custom HTML Widget so that on selection it will trigger Data Collection Refresh actions on the EventsAfterDate and EventsByDateRange data collections.

	7) Make sure you custom widget HTML ~~looks like this~~:		7) Make sure you custom widget HTML form has the following doApply code to apply the entered start date:

			// Note: This is important as it will set the necessary Session Vars and call save Session Vars.
			function apply() {
			// Update the session variables: startDate dateRangeFilter
			CustomWidget.setSessionVar("startDate", $('#start').val());
			CustomWidget.setSessionVar("dateRangeFilter", "event_time >= '"+$('#start').val()+"'");
			CustomWidget.saveSessionVars();
			}

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

2014-06-06T17:06:01Z

CustomWidget.js

@@ Line 123: / Line 123: @@
      $("#coolTable tbody").html(tbl_body);
 } </nowiki>
 === Widget.js ===
 This JavaScript library is the reference to the AppBoard object. The HTML5 widget will not call the functions within this library.

imported>Mike.berman: fix formatting issues at bottom of page

2014-06-01T03:11:02Z

fix formatting issues at bottom of page

← Older revision		Revision as of 03:11, 1 June 2014
Line 87:		Line 87:
	*CustomWidget.setDataCollectionCallback(dataCollectionUpdated) – 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:		*CustomWidget.setDataCollectionCallback(dataCollectionUpdated) – 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:

	<~~code~~>{ data:[{},{}], columns:[{},{}] }</~~code~~>		<tt>{ data:[{},{}], columns:[{},{}] }</tt>


	A data processing example:		A data processing example:

imported>Joe.firebaugh: /* CustomWidget.js */

2014-05-30T20:51:21Z

CustomWidget.js

← Older revision		Revision as of 20:51, 30 May 2014
Line 85:		Line 85:


	*CustomWidget.setDataCollectionCallback(dataCollectionUpdated) – 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: <code>{ data:[{},{}], columns:[{},{}] }</code> A data processing example:		*CustomWidget.setDataCollectionCallback(dataCollectionUpdated) – 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:

			<code>{ data:[{},{}], columns:[{},{}] }</code>

			A data processing example:
	<nowiki>		<nowiki>
	function dataCollectionUpdated( data )		function dataCollectionUpdated( data )

imported>Joe.firebaugh: /* CustomWidget.js */

2014-05-30T20:50:42Z

CustomWidget.js

← Older revision		Revision as of 20:50, 30 May 2014
Line 85:		Line 85:


	*CustomWidget.setDataCollectionCallback(dataCollectionUpdated) – 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: { data:[{},{}], columns:[{},{}] } A data processing example:		*CustomWidget.setDataCollectionCallback(dataCollectionUpdated) – 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: <code>{ data:[{},{}], columns:[{},{}] }</code> A data processing example:
	<nowiki>		<nowiki>
	function dataCollectionUpdated( data )		function dataCollectionUpdated( data )