Difference between revisions of "AJAX - Start Here"

From All n One's bxp software Wixi

Jump to: navigation, search
(→‎Functions Available (Reference Information))
 
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
== Overview ==
+
= Overview =
  
  
−
''AJAX, short for Asynchronous JavaScript And XML, is a group of interrelated Web development techniques used on the client-side (in the browser) to create asynchronous Web applications.  
+
''AJAX, short for Asynchronous JavaScript And XML, is a group of interrelated Web development techniques used on the client-side (in the browser) to create asynchronous Web applications. ''
  
−
With Ajax, Web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required; JSON is often used instead (see AJAJ), and the requests do not need to be asynchronous.
+
''With Ajax, Web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required; JSON is often used instead (see AJAJ), and the requests do not need to be asynchronous.''
  
−
Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page''  
+
''Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page''  
  
 
http://en.wikipedia.org/wiki/Ajax_%28programming%29
 
http://en.wikipedia.org/wiki/Ajax_%28programming%29
Line 15: Line 15:
 
* It can be used to retrieve real time information for various uses
 
* It can be used to retrieve real time information for various uses
 
* It can be used to store data without having to leave the current page.
 
* It can be used to store data without having to leave the current page.
 +
  
 
Pure AJAX can be used in bxp software (bxp) however it can be long and complicated to build.  To speed things up bxp has a number of pre-built functions already integrated with the security of bxp to allow these functions to work.  These functions are only currently available in the bxp forms.
 
Pure AJAX can be used in bxp software (bxp) however it can be long and complicated to build.  To speed things up bxp has a number of pre-built functions already integrated with the security of bxp to allow these functions to work.  These functions are only currently available in the bxp forms.
Line 20: Line 21:
  
  
−
== How it works ==
+
= Functions Available (Reference Information) =
  
  
−
[[File:AJAXoperation001.png]]
+
As part of the functionality there are a number of predefined functions.  These are set in aryAjax_Settings[16]
  
  
−
# When you log into bxp and start a form, the page will draw based on the Form (Web Page is built on Form 1).
+
As the functions are detailed, please use the links where available for further details.
−
# As part of the code of the page you can include AJAX functionality into the form, done through the Advanced Settings > JavaScript onLoad. (AJAX is drawn into the page.)
 
−
# When the page is executed in the clients browser, the AJAX can be activated and it works through the BEAPI to access data in any number of forms.
 
  
  
  
−
== Array of Parameters ==
+
== Listing (Displays) ==
  
  
−
To save a lot of repeating code, the majority of the functionality use the same parameters.
+
{| class="wikitable"
 +
|-
 +
! style="width:20%" | Function
 +
! style="width:40%" | Link
 +
! style="width:40%" | Description
 +
|-
 +
| Table || [[AJAX_-_Function_-_Table]]                    || Draws a listing of records from another form facilitating passed parameters. e.g. List contacts in a table in company form.
 +
|-
 +
| LiveSearch  || [[AJAX_-_Function_-_LiveSearch]]              || The ability to put a single row of data with the ability to put a custom function on the button.
 +
|-
 +
| LiveSearchTable  || [[AJAX_-_Function_-_Live_Search_Table]]        || An extension of the LiveSearch function but displays the data in a table format, rather than one string.
 +
|-
 +
| LiveSearchKeyStatData || [[AJAX_-_Function_-_LiveSearchKeyStatData]]    || Return of data in a delimited string suitable for use in the KeyStats module.  
 +
|}
  
−
All of the functionality is coded into the publicly available library fn_javascript_ajax_campaign.js.  https://ww3.allnone.ie/library/javascript/fn_javascript_ajax_campaign.js
 
  
  
−
bxp creates an array to store the parameters.  Not all parameters are being used by all functions.
+
== Lookup functions ==
  
−
<source lang="javascript">
 
  
−
//================================================================
+
{| class="wikitable"
−
// Variable Initialisation
+
|-
−
//================================================================
+
! style="width:20%" | Function
−
//Initialising the settings array, and for clarity explaining the elements of the array.
+
! style="width:40%" | Link
−
//Simply copy this block of data into your code and replace the values with your system values
+
! style="width:40%" | Description
−
//Not that the automation user MUST have an IP Address set for the system to work
+
|-
−
//-----------------------------------------------------------------------------------------
+
| Append || [[AJAX_-_Function_-_Append]]                  || Lookup data from a form and append it to data in a field in the current form
−
aryAjax_Settings[0] = "client_demo"; //The system to use
+
|-
−
aryAjax_Settings[1] = "demo"; //The automation username
+
| Insert || [[AJAX_-_Function_-_Insert]]                  || Lookup data from a form and insert it into a field in the current form
−
aryAjax_Settings[2] = "password"; //The automation users password
+
|-
−
aryAjax_Settings[3] = "1"; //The Id of the campaign
+
| InsertCount  || [[AJAX_-_Function_-_InsertCount]]              || Lookup a summative count of records from a form and insert the counted amount into a field in the current form
−
aryAjax_Settings[4] = "strCDA_1_field_0_0"; //The search field
+
|-
−
aryAjax_Settings[5] = "1"; //The search value
+
| Populate  || [[AJAX_-_Function_-_Populate]]                 || Wipes a drop down list then populates the contents of the drop down list with values from another form.  Text and value of the drop down list will be the same.
−
aryAjax_Settings[13] = "-1"; //Id of the current record, used for delimiting and not repeating current case
+
|-
−
aryAjax_Settings[14] = "true"; //Click through to campaign?
+
| Populate_AltList  || [[AJAX_-_Function_-_Populate_AltList]]         || Wipes a drop down list then populates the contents of the drop down list with values from another form.  Text and value of the drop down list can be populated with different values.
−
aryAjax_Settings[15] = "divWarning"; //The id of the destination to which the table will be inserted
+
|-
−
aryAjax_Settings[16] = "Table"; //The default option is to create a table to display.  The other options is Insert. Which will insert the values into the relevant fields.
+
| PopulateNoClear || [[AJAX_-_Function_-_PopulateNoClear]]         || Adds to the contents of a drop down list with values from another form.  Text and value of the drop down list will be the same.
 +
|-
 +
| PopulateNoClear_AltList || [[AJAX_-_Function_-_PopulateNoClear_AltList]]  || Adds to the contents of a drop down list with values from another form.  Text and value of the drop down list can be populated with different values.
 +
|}
  
−
//The fields to be returned into the array
 
−
//The column names of those fields
 
−
//The first field must always be the ID of the campaign
 
−
aryAjax_Settings[6] = "intCDA_1_Id,strCDA_1_field_0_0,strCDA_1_field_0_1";
 
−
aryAjax_Settings[12] = "Id,Field 1,Field 2";
 
−
aryAjax_Settings[17] = "intCDA_1_Id,strCDA_1_field_0_0,strCDA_1_field_0_1"; //For insertion, what local campaign fields will the data be transferred into.
 
−
 
−
//-----------------------------------------------------------------------------------------
 
−
// Extra settings fields used by the function, but made available globally for testing
 
−
aryAjax_Settings[7] = ""; //Constructed URL for retrieveing data
 
−
aryAjax_Settings[8] = "-1"; //Error Status
 
−
aryAjax_Settings[9] = ""; //Error Translation
 
−
aryAjax_Settings[10] = "-1"; //Record count
 
−
aryAjax_Settings[11] = ""; //Alternate Destination if required. Constructed just before use
 
  
−
//-----------------------------------------------------------------------------------------
+
== Record Management ==
−
aryAjax_Settings[18] = "true"; //Show table if empty? By default always show something.
 
−
aryAjax_Settings[19] = ""; //Custom sort order if needed
 
−
aryAjax_Settings[33] = ""; //Custom sort orderDESC
 
−
aryAjax_Settings[20] = ""; //Custom group by if needed
 
−
aryAjax_Settings[21] = "false"; //Limit to My Records only
 
−
aryAjax_Settings[22] = ""; //Auto Login - System
 
−
aryAjax_Settings[23] = ""; //Auto Login - User
 
−
aryAjax_Settings[24] = ""; //Auto Login - SessionId
 
  
−
//--Live Search----------------------------------------------------------------------------
 
−
aryAjax_Settings[25] = ""; //Field to Update (Id Value)
 
−
aryAjax_Settings[26] = ""; //Function After Update
 
−
aryAjax_Settings[27] = ""; //Field to Update (Display Text)
 
  
−
//--Post Data Rerrieval Execution----------------------------------------------------------
+
{| class="wikitable"
−
aryAjax_Settings[28] = ""; //Generic function call
+
|-
 +
! style="width:20%" | Function
 +
! style="width:40%" | Link
 +
! style="width:40%" | Description
 +
|-
 +
| dbDeleteRecord || [[AJAX_-_Function_-_dbDeleteRecord]]          || To allow the deletion of a CDA record from another form.
 +
|-  
 +
| dbInsertRecord || [[AJAX_-_Function_-_dbInsertRecord]]          ||  To allow the insertion of a CDA record into another form.
 +
|-
 +
| dbUpdateRecord || [[AJAX_-_Function_-_dbUpdateRecord]]          ||  To allow the update of a CDA record in another form.
 +
|-
 +
|}
  
−
//--Live Search Format Options-------------------------------------------------------------
+
= How it works =
−
aryAjax_Settings[29] = ""; //Buttons in the first column or the last column --> First/Last
 
−
aryAjax_Settings[30] = ""; //Multi - button functionality --> Two colours
 
−
aryAjax_Settings[31] = ""; //Button Text (multi separated by ','  --> XXXXXXXX,XXXXXXX
 
−
aryAjax_Settings[32] = ""; //Value for matching to show button 2 --> XXXXXXX
 
  
−
//--Order Options----------------------------------------------------------------------------
 
−
aryAjax_Settings[33] = ""; //Sort decending
 
  
−
//--AJax Data Insert/Update/Delete Parameters----------------------------------------------------------------------------
+
[[File:AJAXoperation001.png]]
−
aryAjax_Settings[34] = ""; //Fields to insert to
 
−
aryAjax_Settings[35] = ""; //Values to insert
 
−
aryAjax_Settings[36] = ""; //Field to search on
 
−
aryAjax_Settings[37] = ""; //Value to search with
 
−
aryAjax_Settings[38] = ""; //Add a CCl
 
  
−
</source>
 
  
 +
# When you log into bxp and start a form, the page will draw based on the Form (Web Page is built on Form 1).
 +
# As part of the code of the page you can include AJAX functionality into the form, done through the Advanced Settings > JavaScript onLoad. (AJAX is drawn into the page.)
 +
# When the page is executed in the clients browser, the AJAX can be activated and it works through the BEAPI to access data in any number of forms.
  
−
== Functions Available ==
 
  
  
−
As part of the functionality there are a number of predefined functions.  There are set in aryAjax_Settings[16]
+
= Array of Parameters =
  
−
* Append
 
−
* dbDeleteRecord
 
−
* dbInsertRecord
 
−
* dbUpdateRecord
 
−
* Insert
 
−
* InsertCount
 
−
* LiveSearch
 
−
* LiveSearchTable
 
−
* Populate
 
−
* Populate_AltList
 
−
* PopulateNoClear
 
−
* PopulateNoClear_AltList
 
  
 +
A full listing is available here [[AJAX_-_Full_Array_of_Paramters]]
  
  
−
== Security ==
 
  
 +
== Solutions ==
 +
 +
 +
It is possible to build entire solutions using AJAX
 +
 +
* [[JavaScript_Self-Referencing_Campaigns]]
 +
 +
* [[JavaScript_-_Interactive_Record_Locking]]
  
−
Security is very important to bxp and BEAPI calls should be no less secure.  For this reason there are a number of security concepts to be considered.
+
* [[Java_Script_Hospital_Red_Green]]
  
  
−
The AJAX makes calls to the BEAPI, hereto referred to as "The Call".  When the Call is made, it requires a username and password.  That user must have access to the form.  In using the AJAX there are two possible options.
+
One useful concept that AJAX can facilitate is Centralised Listing [[Centralised_Listing]]
−
# Use a set username and password
 
−
# Use a dynamic username and password
 
  
  
−
The set username and password is more secure but must have specified white listed IP addresses it can be used from.  The user must be granted access to the form containing the data.  This also allows this user to have all functional access removed but still allow content access.  This is the more secure preferred option.
 
−
* aryAjax_Settings[0] = "client_demo";
 
−
* aryAjax_Settings[1] = "demo";
 
−
* aryAjax_Settings[2] = "password";
 
  
−
Set user location can be difficult to manage if users move location often or there is no static IP address available.  There is a dynamic security setting, which requires the current user to have access to the form, but the engine uses the current users login, to access the form.
+
== Security ==
  
−
* aryAjax_Settings[22] = document.getElementById('intSystemGenerated_CompanyId').value;
 
−
* aryAjax_Settings[23] = document.getElementById('intSystemGenerated_UserId').value;
 
−
* aryAjax_Settings[24] = document.getElementById('intSystemGenerated_LoginKey').value;
 
  
 +
This is further detailed here [[AJAX_-_Security_engine]]
  
  
Line 162: Line 138:
  
  
−
There is often error messages to display when using the engine for a variety of reasons including: incorrect username, password, IP address restricted, etc.
+
For a more indepth discussion on this area [[AJAX_-_Error_messages_and_troubleshooting]]
 +
 
 +
 
  
−
For this reason, it is possible to write back to screen the error messages into a user specified div.  You create the div on your form where you like it and put id="" in it.
 
  
−
If you set aryAjax_Settings[15] = 'divYourName'; then the error messages will write to the innerHTML of the div.
+
[[Category:Topic:JavaScript]]
 +
[[Category:Topic:Start Here]]

Latest revision as of 09:15, 31 August 2016

1 Overview

AJAX, short for Asynchronous JavaScript And XML, is a group of interrelated Web development techniques used on the client-side (in the browser) to create asynchronous Web applications.

With Ajax, Web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required; JSON is often used instead (see AJAJ), and the requests do not need to be asynchronous.

Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page

http://en.wikipedia.org/wiki/Ajax_%28programming%29


Basically AJAX allows a web page to retrieve information that was not supplied when the page was first drawn. There are many uses for this.

  • It can help pages remain a lot smaller as not all of the data has to be on the page, when it first loads.
  • It can be used to retrieve real time information for various uses
  • It can be used to store data without having to leave the current page.


Pure AJAX can be used in bxp software (bxp) however it can be long and complicated to build. To speed things up bxp has a number of pre-built functions already integrated with the security of bxp to allow these functions to work. These functions are only currently available in the bxp forms.


2 Functions Available (Reference Information)

As part of the functionality there are a number of predefined functions. These are set in aryAjax_Settings[16]


As the functions are detailed, please use the links where available for further details.


2.1 Listing (Displays)

Function Link Description
Table AJAX_-_Function_-_Table Draws a listing of records from another form facilitating passed parameters. e.g. List contacts in a table in company form.
LiveSearch AJAX_-_Function_-_LiveSearch The ability to put a single row of data with the ability to put a custom function on the button.
LiveSearchTable AJAX_-_Function_-_Live_Search_Table An extension of the LiveSearch function but displays the data in a table format, rather than one string.
LiveSearchKeyStatData AJAX_-_Function_-_LiveSearchKeyStatData Return of data in a delimited string suitable for use in the KeyStats module.


2.2 Lookup functions

Function Link Description
Append AJAX_-_Function_-_Append Lookup data from a form and append it to data in a field in the current form
Insert AJAX_-_Function_-_Insert Lookup data from a form and insert it into a field in the current form
InsertCount AJAX_-_Function_-_InsertCount Lookup a summative count of records from a form and insert the counted amount into a field in the current form
Populate AJAX_-_Function_-_Populate Wipes a drop down list then populates the contents of the drop down list with values from another form. Text and value of the drop down list will be the same.
Populate_AltList AJAX_-_Function_-_Populate_AltList Wipes a drop down list then populates the contents of the drop down list with values from another form. Text and value of the drop down list can be populated with different values.
PopulateNoClear AJAX_-_Function_-_PopulateNoClear Adds to the contents of a drop down list with values from another form. Text and value of the drop down list will be the same.
PopulateNoClear_AltList AJAX_-_Function_-_PopulateNoClear_AltList Adds to the contents of a drop down list with values from another form. Text and value of the drop down list can be populated with different values.


2.3 Record Management

Function Link Description
dbDeleteRecord AJAX_-_Function_-_dbDeleteRecord To allow the deletion of a CDA record from another form.
dbInsertRecord AJAX_-_Function_-_dbInsertRecord To allow the insertion of a CDA record into another form.
dbUpdateRecord AJAX_-_Function_-_dbUpdateRecord To allow the update of a CDA record in another form.

3 How it works

AJAXoperation001.png


  1. When you log into bxp and start a form, the page will draw based on the Form (Web Page is built on Form 1).
  2. As part of the code of the page you can include AJAX functionality into the form, done through the Advanced Settings > JavaScript onLoad. (AJAX is drawn into the page.)
  3. When the page is executed in the clients browser, the AJAX can be activated and it works through the BEAPI to access data in any number of forms.


4 Array of Parameters

A full listing is available here AJAX_-_Full_Array_of_Paramters


4.1 Solutions

It is possible to build entire solutions using AJAX


One useful concept that AJAX can facilitate is Centralised Listing Centralised_Listing


4.2 Security

This is further detailed here AJAX_-_Security_engine


4.3 Error messages and feedback

For a more indepth discussion on this area AJAX_-_Error_messages_and_troubleshooting

Retrieved from ‘https://www.bxpsoftware.com/wixi/index.php?title=AJAX_-_Start_Here&oldid=7011’