JavaScript in bxp

From All n One's bxp software Wixi

Jump to: navigation, search

bxp allows in numerous areas for JavaScript to implemented directly in a form's script.

This gives script builders huge power to be able to control and manipulate numerous parts of any script.

JavaScript is a scripting language and the links below will hopefully help you learn all you need to know about bxp and JavaScript.


1 JavaScript General Resources

Wikipedia : JavaScript

http://en.wikipedia.org/wiki/JavaScript

W3Schools

http://www.w3schools.com/js/default.asp


2 Hiding Major Elements

It is possible to easily hide major elements on the form with a single function call.

fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing );


  • blComments: The comments box
  • blOutcome: The outcome drop down list
  • blCallback: The callback date time line
  • blAssignedTo: The drop down list of people to reassign to
  • blViewAppointments: The calendar pop up button
  • blAppFrom: When setting an appointment, the time from
  • blAppUntil: When setting an appointment, the time to
  • blClosing: The closing script / prompt for agent notes.


Simply replace the blXXX word with true / false to show / hide the appropriate option.


For more info you can also read this JavaScript_Show_/_Hide_elements


3 Showing / Hiding Questions

All questions are contained in

<table class="cssMaster_Table100PC" width="100%" id="tableid_X">


Where X is a number corresponding to the question number.


So showing and hiding is a case of showing / hiding this table. For this reason the libraries included on the page have functions to do this for you:


function fn_Gen_Hide ( 'tableid_X' );
function fn_Gen_Show ( 'tableid_X' );
function fn_Gen_Toggle ( 'tableid_X' );


It is possible to manually show and hide a table e.g.


if (document.getElementById('tableid_X')) { document.getElementById('tableid_X').style.display = 'none'; }


The first challenge you have is that after hiding and then reshowing the background colours in some browsers are lost, so they need to be recoloured individually to put the colour back in.


There is a master, recolour all questions which is created automatically to save coding.


fn_Gen_ReColour ( 'tableid_X', '' );
function fn_RecolourAll ();


The next challenge is that when you reshow large area types, such as Section Headers, Section Groups and Generic Areas, it appears in some browsers crushed to the left hand side.


With these types you need to reset the width as well each time.


if ( document.getElementById('tableid_X') ) { document.getElementById('tableid_X').width = "100%"; }


fn_Gen_Hide is handy as it performs the resize and recolour saving a ton of extra coding lines.


For more info you can also read this JavaScript_Show_/_Hide_elements


4 Section Group Showing / Hiding

When you create a section group and allocate some questions to it, JavaScript functionality is automatically created and added to the page.


To find the function names:

  1. Open the script
  2. View Source
  3. Ctrl and F to find the section group
  4. Type in the title that appears on screen of the section group.
  5. Scroll up 20 / 30 lines and you will find the Section Group created Show / Hide function.


There should be three function

  • function fn_SectionGroup_strCDA_X_field_0_Y_Show(strObject)
  • function fn_SectionGroup_strCDA_X_field_0_Y_Hide(strObject)
  • function fn_SectionGroup_Toggle_strCDA_X_field_0_Y()


X is the campaign / form id. Y is the question id of the Section Group.


If you want to automatically close a Section Group when the script opens, find the line: fn_SectionGroup_strCDA_X_field_0_Y_Hide('imgToggle_strCDA_X_field_0_Y'); in the Toggle function.

Add this to the Main Menu > Form Management > Form - Primary Settings > Form - Advanced Settings > Choose your campaign > JavaScript onLoad > then go down the bottom to save it.


5 Extending Outcome Validation

It is possible to add mountains of validation to any outcome along with data manipulation.


The first part is to open your outcome and then add into the Javascript section.


If you want the page to NOT save, i.e. do not continue if this condition happens, then there is a global variable that needs to be changed.

if ( document.getElementById('strCDA_X_field_Y_Z').value == '' ){
	blError = 'True';
	strError_Message = strError_Message + 'You must fill field blah!.';
}


Setting blError to the string 'True' means that a flag is set to prevent the save button from logging the record.


The strError_Message is the collective message displayed to the user using a JavaScript alert.


If you wanted to colour the question as part of the validation then you could use the fn_Gen_Recolour function.


if ( document.getElementById('strCDA_X_field_Y_Z').value == '' ){
	blError = 'True';
	strError_Message = strError_Message + 'You must fill field blah!.';
	fn_Gen_ReColour ( 'tableid_XX', 'ff0000' );
}

6 Making fields Read Only

Setting an input field type to read only is a very simple line.

document.getElementById('strCDA_X_field_Y_Z').readOnly = true;

e.g. http://www.w3schools.com/jsref/prop_text_readonly.asp


Making a Select type readOnly is a bit more complicated but we have an article for that too.



For more info you can also read this JavaScript_Read_Only



7 JavaScript Custom Scripts

Self Referencing campaigns

http://www.allnone.ie/wiki/index.php?title=JavaScript_Self-Referencing_Campaigns


8 Automatic Variable Listing

bxp has the ability to automatically create a complete variable listing from the form, to do this simply add--Full_Listing-- to your JavaScript code in bxp. This replacement will only generate a full listing in both the JavaScript onLoad section and OnLookUp section of the forms advance settings. When the listing is created it will create the following two types of JavaScript variables for all questions with the exception of Section Headers, Section Groups and Generic Areas.

  • var strCDA_X_field_X_X = document.getElementById('strCDA_X_field_X_X); // * Field Mapping Value
  • var strCDA_X_field_X_X = document.getElementsByName('strCDA_X_field_X_X); // * Field Mapping Value