caspio

JavaScript Solution: Adding a Digital Signature to a Submission Form Feature Description: This JavaScript solution shows how to add a digital signature to a Submission form, Update form, and Details form. It also shows how to display the signature in Details and Results page of a Report. The signature pad is compatible with mobile devices as well. Note: This is a simple capture and displays a signature solution. It is not designed to replace a professional e-signature solution like DocuSign that assures security, legal, and visibility of all transactions with a complete audit trail. To explore integrating your application with a third-party solution such as DocuSign, contact Caspio Professional Services. Single Signature Pad Implementation: This solution can be used "as-is", without any changes if: It is used in a Submission Form DataPage. The field name in your table is "Signature" and the data type is Text (64000). To use this solution: a. Download the JavaScript file from here and unzip the file. Go to "All Assets" click on "Files" and upload this file. b. Go to app over, create an app parameter : Parameter Name = " SignaturePad", Type = "File" and for value browser the uploaded file. c. Copy the code below and Disable HTML editor then paste inside the Header section of your DataPage <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="[@app:SignaturePad/]"></script> d. Edit the Submission Form DataPage and choose form element "hidden" for "Signature" field in the Configure Fields screen. Insert an HTML Block after the "Signature" field. Go to the Source of the HTML Block and insert the following code. <!-- Caspio Added --> <div id="cb_sign_wrapper"> <p id="cb-sign-msg" style="display:none; color:white; background-color:red; font-weight:bold; padding:10px;"></p> <canvas class="pad" height="130" style="margin: 0px 0px 0px 15px; border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;" width="300"></canvas><br /> <span style="margin: 0px 0px 0px 15px;display: flex;justify-content: center; }"> <input class="clearButton" type="reset" value="Clear" /></span> <input class="output" name="output" type="hidden" /> </div> e. Copy the code below and paste inside the Datapage Footer. <script> document.addEventListener('DataPageReady', function (event) { $('#cb_sign_wrapper').signaturePad({drawOnly : true}); }); document.addEventListener('BeforeFormSubmit', function (event) { // put the signature to the proper field $('input[name="InsertRecordSignature"]').val( $('#cb_sign_wrapper .output').val() ); }); </script> Two Signature Pads Implementation: This solution can be used "as-is", without any changes if: It is used in a Submission Form DataPage. The field names in your table is "Signature_1", Signature_2" and the data type is Text (64000). Repeat steps from a) to c) from the Single Signature Pad implementation above. d. Edit the Submission Form DataPage and choose form element "hidden" for "Signature_1" field in the Configure Fields screen. Insert an HTML Block after the "Signature_1" field. Go to the Source of the HTML Block and insert the following code. <!-- Caspio Added --> <div id="cb_sign_wrapper_1"> <p id="cb-sign-msg" style="display:none; color:white; background-color:red; font-weight:bold; padding:10px;"></p> <canvas class="pad" height="130" style="margin: 0px 0px 0px 15px; border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;" width="300"></canvas><br /> <span style="margin: 0px 0px 0px 15px;display: flex; justify-content: center;"> <input class="clearButton" type="reset" value="Clear" /></span> <input class="output" name="output" type="hidden" /> </div> e. Repeat steps from above and insert in HTML Block the following code: <!-- Caspio Added --> <div id="cb_sign_wrapper_2"> <p id="cb-sign-msg" style="display:none; color:white; background-color:red; font-weight:bold; padding:10px;"></p> <canvas class="pad" height="130" style="margin: 0px 0px 0px 15px; border-style: solid; border-width: 1px; border-color: #bbbbbb #dbdfe6 #e3e9ef #e2e3ea; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF;" width="300"></canvas><br /> <span style="margin: 0px 0px 0px 15px;display: flex; justify-content: center;"> <input class="clearButton" type="reset" value="Clear" /></span> <input class="output" name="output" type="hidden" /> </div> f. Copy the code below and paste inside the Datapage Footer. <script> document.addEventListener('DataPageReady', function (event) { $('#cb_sign_wrapper_1').signaturePad({drawOnly : true}); $('#cb_sign_wrapper_2').signaturePad({drawOnly : true}); }); document.addEventListener('BeforeFormSubmit', function (event) { // put the signatures on the proper fields $('input[name="InsertRecordSignature_1"]').val( $('#cb_sign_wrapper_1 .output').val() ); $('input[name="InsertRecordSignature_2"]').val( $('#cb_sign_wrapper_2 .output').val() ); }); </script> Tips for Customization To customize the signature "window", you can adjust the width and height inside the HTML Block on step "d" above. You can also modify the border width by changing the "border-width" from 1px to a desirable width. To customize the script to capture a signature on an Update Form or a Details page of a Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the Datapage Footer on step "e" (single pad solution) or "f" (two pads solution) above. To display the signature in Details, Update DataPage, insert an HTML Block, repeat step c) from the above, and go to the Source of the HTML Block and insert the following code. <div class="sigPad"><canvas class="pad" height="100" width="220"></canvas></div> <script> var sig = '[@field:Signature!]'; $('.sigPad').signaturePad({displayOnly:true}).regenerate(sig); </script> To display the signature in a results page of a Report DataPage, insert an HTML Block, repeat step c) from the above, and go to the Source of the HTML Block and insert the following code. <div class="sigPad[@cbRecordIndex#]"><canvas class="pad" height="150" width="300"></canvas></div> <script> var sig[@cbRecordIndex#] = '[@field:Signature!]'; $('.sigPad[@cbRecordIndex#]').signaturePad({displayOnly:true}).regenerate(sig[@cbRecordIndex#]); </script> Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 11, Firefox 74.0, Chrome 81.0, MS Edge 42.0 # Mac OS - Firefox 74.0, Chrome 81.0, Safari 13.1 # Android - Firefox 74.0, Chrome 81.0 #iOs - Firefox 74.0, Chrome 81.0, Safari 13.1 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Tips: Caspio Form Elements JavaScript is a client-side scripting language that is commonly used in HTML pages. JavaScript can be used in Caspio Bridge DataPages to extend capabilities outside the standard features. This page provides a guideline for referencing Caspio form elements using JavaScript. It is an advanced topic and you should have prior knowledge of JavaScript programming. Referencing Caspio Form Elements A common way to access a form element using JavaScript is by referencing the element's ID attribute using: - document.getElementById("id") The value in the field can be referenced using: - document.getElementById("id").value In the following sections, we will list the ID attributes for Caspio form elements in various DataPages. Submission Forms Text Field/Text Area/Dropdown/Checkbox/Listbox/Hidden: - InsertRecordFIELDNAME - FIELDNAME should be replaced with your field name. - For example: document.getElementById("InsertRecordFirst_Name") Radio Button: A radio button includes multiple options and each option has an associated ID. The ID is a name followed by a number: - InsertRecordFIELDNAMEX - X is the radio button option order, which starts at 0 and increments based on the order of each radio option. For example if your radio button has three options: Red, Blue, Green - Red is InsertRecordFIELDNAME0 - Blue is InsertRecordFIELDNAME1 - Green is InsertRecordFIELDNAME2 Virtual Field: cbParamVirtualX - X is the virtual field in the form, which starts at 1 and increments based on the number of the virtual fields in the form. - For example: document.getElementById("cbParamVirtual2") is referring to the second virtual field. Cascading Dropdown: Cascading dropdown and its parent dropdown are referenced by name since the ID changes on every page load. To reference cascading dropdown and its parent dropdown, use the following format: - document.getElementsByName("InsertRecordCompany_Name")[0] - Note that in the above format, the number 0 never changes. Display Only: These are not fields but span tags, therefore they don't have an ID. Details and Update Forms Details and Update Forms use the same rules and naming conventions as Submission Forms (in previous section), except that InsertRecord is changed to EditRecord. - EditRecordFIELDNAME - For example: document.getElementById("EditRecordFirst_Name") - Note that Virtual Fields and Display Only rules are the same as Submission Forms (in previous section). Search Forms Text Field/Text Area/Dropdown/Checkbox/Listbox/Hidden: - ValueX_Y - X is the form element order, which starts at 1 and increments based on the order of the element in the form. - Y is the criteria. It starts at 1 and increments based on the criteria order. It is always 1 if the field has no extra criteria. Radio Button: ValueX_Y[Z] - Z is the radio button option order, which starts at 0 and increments based on the order of the each radio option. Virtual Field: The rules are the same as Submission Forms (in previous section) Cascading Dropdown: This element should be referenced by name as explained in the previous section. The name of the element is ValueX_Y. Distance Search By ZIP/Postal Code: - Center of Search: cbDsField1 - Distance: cbDsField2 Distance Search By Coordinates: - Center Latitude: cbDsField1 - Center Longitude: cbDsField2 - Distance: cbDSField3 Authentication/Login Forms Text Field: xip_FIELDNAME - FIELDNAME should be replaced with your field name. Referencing Forms To access Caspio Forms/DataPages, you can reference the ID using: - document.getElementById("caspioform") Note that all Caspio DataPages share the same id as "caspioform". Therefore if there are multiple DataPages deployed on the same page, you need to reference them in a different way such as: - document.forms[X] X starts at 0 which refers to the first form on the page and increments based on the order. To access Caspio Authentication or Login Forms, use: - document.getElementById("xip_DataSourceName") - Replace "DataSourceName" with the name of data source used in your Authentication. Referencing Buttons Submit Button: Submit Update Button: Mod0EditRecord Delete Button: Mod0DeleteRecord Search Button: searchID Back Button: Mod0CancelRecord Login Button: xip_datasrc_DataSourceName - Replace "DataSourceName" with the name of data source used in your Authentication. Where to Place the JavaScripts In Forms, place your code in an HTML Block. The HTML Block should be the last element in the list. In Results, place the code in the Header or Footer unless you want the code to be executed for every record. Quick Tips If you need to reference an element that is not listed in the above document, try using F12/Developer Tools available from most browsers such as IE, Firefox, and Chrome. Developer Tools help web developers inspect the elements on the web page to find the related ID and also debug JavaScript code if necessary using the Console tab. For more information, check online for available tutorials using your browser's Developer Tools. In the meantime, you can see examples of JavaScript solutions in the community forum.

JavaScript Solution: Select multiple values from a listbox in an Update DataPage Feature Description: This JavaScript solution shows how to enable the selection of multiple values using a listbox form element in an Update or Details DataPage. When the DataPage is submitted, the values selected in the listbox are stored in the table as a comma-separated string. For example: A field named state in a table contains US states. If three states California, Nevada and Oregon are selected in this listbox, the value stored in that field will be "California, Nevada, Oregon". When the DataPage is opened, the current values will be preselected in the listbox. Implementation: This solution can be used "as-is", without any changes if a. It is used in an Update or Details DataPage and b. The field name state exists in the DataPage. To use this solution, copy the code below and paste inside the HTML Footer section of the Update/Details DataPage using the Caspio Bridge DataPage Wizard. <script type="text/javascript"> var v_state = "[@field:state]" ; var o_state = document.getElementById("EditRecordstate") ; o_state.multiple = true ; function f_listbox() { if ( v_state.indexOf(",") > 0 ) { for (var i=0 ; i < o_state.options.length; i++ ) { if(o_state[i].value == v_state) { o_state.remove(i); break ; } } var o_st = v_state.split(", ") ; for (var j=0 ; j < o_st.length; j++) { for (var i=0 ; i < o_state.options.length; i++ ) { if(o_st[j]== o_state.options[i].value){ o_state.options[i].selected = true ; break ; } } } } } document.addEventListener('DataPageReady', f_listbox); //You can also use the line below instead of the eventlistener // setTimeout(f_listbox, 20); </script> Tips for Customization To customize this script to enable the same feature for the additional field, duplicate the first three lines using your second field name. Then duplicate the code inside the f_listbox function. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 10, Firefox 25.0.1, Chrome 31.0.1650.57, Safari 5.1.7 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Solution: Auto-Submit a DataPage Feature Description: This JavaScript solution shows how to auto-submit a DataPage. Caspio DataPage only submits to one table so if you need to perform submission to multiple tables you can use another DataPage and the following JavaScript to auto submit. Implementation: This solution can be used "as-is", without any changes if a. It is used in a Submission, Single Record Update, or Details DataPage and b. The DataPage is the only one Caspio DataPage deployed on your web page. c. The "progress_bar" image exists on your site: www.yoursite.com/images/progress_bar.gif. Or the URL should be adjusted to where your file is located. To use this solution, copy the code below and paste inside the HTML Header section of the DataPage using the Caspio Bridge DataPage Wizard. <div align="center" id="processing"> <p>Processing...</p> <img src="images/progress_bar.gif" alt="Progress Bar" width="200" height="15" /> </div> Then insert an HTML Block, copy the code below and paste inside the HTML Block section: <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { const error = document.querySelector('div[data-cb-name="HeaderErrorMsg"]'); if(!error){ if(document.getElementById("caspioform")) { document.getElementById("caspioform").style.display = 'none'; setTimeout('document.forms["caspioform"].submit()',1000); } } }); </script> In submission successful message area, click on Source button and paste the code below. <style type="text/css"> #processing{ display:none; } </style> Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 10, Firefox 25.0.1, Chrome 31.0.1650.57, Safari 5.1.7 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Solution: Format phone number Feature Description: This JavaScript solution shows how to format an entered phone number as (XXX)-XXX-XXXX in a Submission Form. Implementation: This solution can be used "as-is", without any changes if a. It is used in a Submission Form DataPage. b. There is a text field in the table called "Phone". To use this solution copy and paste the code below, inside the HTML Footer section of the Form using the Caspio Bridge DataPage Wizard. <SCRIPT LANGUAGE="JavaScript"> var arrEl = Array.from(document.querySelectorAll('#InsertRecordPhone1, #InsertRecordPhone2, #InsertRecordPhone3')); let regExp = /^[0-9]+$/; arrEl.forEach(function(el) { el.maxLength = 14; el.addEventListener('input', function(v_e) { if (regExp.test(v_e.key)) { this.value = this.value.substr(0, this.value.length - 1); return false; } let v_value = (this.value.replace(/[^\d]/g, '')); console.log(v_value, this.value); if (v_value.length >= 7 && v_value.length < 10) { this.value = (v_value.substring(0, 3) + "-" + v_value.substring(3, 7) + v_value.substring(7, v_value.length)); } else if (v_value.length >= 10) { this.value = ("(" + v_value.substring(0, 3) + ") " + v_value.substring(3, 6) + "-" + v_value.substring(6, 10) +v_value.substring(10, v_value.length)); } }); }); </SCRIPT> Tips for Customization To customize this script to be used on an Update WebForm or a Details page of a Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the code. And make sure the field is not "Display Only" because this script is used for input fields. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 10, Firefox 23.0.1, Chrome 29.0.1547.57, Safari 5.1.7 # Macintosh # Firefox 3.6.22, Safari 5.1.7 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Solution: Show/Hide a custom link on results page based on a Yes/No field Feature Description: This JavaScript solution shows how to display or hide a custom link in HTML block on a results page of a Search and Report DataPage based on the value of a Yes/No field. A typical example is, to only display the custom "details" link if the field value "Yes". Implementation: This solution can be used "as-is", without any changes if a. It is used on a results page of a Search and Report DataPage. b. There is a Yes/No field named Approved in the table. To use this solution copy and paste the code below, inside the HTML block of the results page using the Caspio Bridge DataPage Wizard. <span id="cbLinkCtnr[@cbRecordIndex#]"></span> <script type="text/javascript"> /* 1 - get the Yes/No field */ var cb_boolean = '[@field:Approved]'; if (cb_boolean == 'Yes') { /* 2 - construct the custom link */ document.getElementById("cbLinkCtnr[@cbRecordIndex#]").innerHTML = '[url="http://www.google.com/"]Enter Google[/url]'; } </script> Tips for Customization a. To use this script with a different field name, modify the line immediately below comment 1 by replacing "Approved" with the appropriate field name. b. Customize the custom link in various ways. For example, to pass Unique ID field as a parameter in the URL, change the line of code immediately below comment 2 to: document.getElementById("cbLinkCtnr[@cbRecordIndex#]").innerHTML = '[url="http://URL&UniqueID=[@field:UniqueID]"]Custom Link[/url]'; Where URL is the real URL of the web page the custom link directs to. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 8.0, Firefox 3.6.3, Chrome 4.1, Safari 4.0.5 # Macintosh - Firefox 3.6.3, Safari 4.0.3 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Solution: Change tab order of fields on a Submission Form Feature Description: Tab index defines the order in which form elements will receive focus when navigated by the user via the keyboard. This JavaScript solution shows how to change tab order in a Submission Form fields. This is usually used for a multi-column form. A typical situation is, on a two-column form with "Top to bottom" fill order, you would like to change the tab index order from "Left to right" to "Top to bottom". Implementation: This solution can be used "as-is", without any changes if a. It is used in a Submission Form. b. The fields First_Name, Last_Name, Email and Phone_Number exist in your table and the form. c. The tab index will be set into First_Name >> Last_Name >> Email >> Phone_Number. To use this solution, a. Highlight Header_code provided in the text area shown below and copy it. Paste it inside the HTML Header section of the Submission Form using the Caspio Bridge DataPage Wizard, and b. Highlight Footer_code provided in the text area shown below and copy it. Paste it inside the HTML Footer section of the Submission Form using the Caspio Bridge DataPage Wizard. Header Code: <script type="text/javascript"> function changeTabIndex() { document.getElementById('InsertRecordFirst_Name').tabIndex="1"; document.getElementById('InsertRecordLast_Name').tabIndex="2"; document.getElementById('InsertRecordEmail').tabIndex="3"; document.getElementById('InsertRecordWork_Phone').tabIndex="4"; } </script> Footer Code: <script type="text/javascript"> document.addEventListener('DataPageReady', changeTabIndex); </script> Tips for Customization a. To use this script with different field names, change the occurrences of "First_Name", "Last_Name", "Email" and "Work_Phone" in the script to the appropriate field names. b. To use this script in an Update Form or a Details page of a Search and Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the code. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 8.0, Firefox 3.6.3, Chrome 4.1, Safari 4.0.5 # Macintosh - Firefox 3.6.3, Safari 4.0.3 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Solution: Concatenate/Combine two fields into one field Feature Description: This JavaScript solution shows how to perform a function in a Submission Form to combine two fields' values and put them into another field. Values entered in two fields "Position1" and"Position2" are concatenated and the result is stored in the field "AllPositions" upon submission. Implementation: This solution can be used "as-is", without any changes if a. It is used in a Submission Form DataPage and b. The fields Position1, Position2, and AllPositions exist in your table and the form. c. The form is the only one Caspio DataPage deployed on your web page. To use this solution copy and paste the code below, inside the HTML Footer section of the Submission Form using the Caspio Bridge DataPage Wizard. <SCRIPT LANGUAGE="JavaScript"> function concatenate() { var position1 = document.getElementById("InsertRecordPosition1").value; var position2 = document.getElementById("InsertRecordPosition2").value; var allpositions = position1 + position2; document.getElementById("InsertRecordAllPositions").value = allpositions; } document.getElementById("caspioform").onsubmit=concatenate; </SCRIPT> Tips for Customization To customize this script to be used on an Update Form or a Details page of a Search and Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the code. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 8.0, Firefox 3.6.3, Chrome 4.1.249, Safari 4.0.3 # Macintosh - Firefox 3.5.7, Safari 4.0.3 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Solution: Calculate the sum of a column values in the result page Feature Description: This JavaScript solution shows how to perform the sum of all elements of column in a result page. The result is displayed in a row below the last record. For example, if the results have 3 records, and the values in a specific column are 12.00, 25.20, and 45.65, the sum (82.85) will be shown in a row below the last record. Implementation: This solution can be used "as-is", without any changes if a. It is used in a Search and Report DataPage b. The results page has 5 columns c. It calculates the sum of the items of the 4th column To use this solution, a. Highlight to copy the code provided in the text area shown below. b. Paste the respective snippet inside the HTML Header or HTML Footer section of the Results page of the Search and Report DataPage. Header: <div id="cb_resultTotal"> Footer: </div> <script> function NumberFormatted(amount,decimal) { if(isNaN(amount)) i = 0.00; else { var v_number = parseFloat(amount); var v_minus = ''; if(v_number < 0) v_minus = '-'; v_number = Math.abs(v_number); v_number = Math.round(v_number*Math.pow(10,decimal)); v_number = v_number/Math.pow(10,decimal); v_numStr = new String(v_number); v_decStr = new String(Math.pow(10,decimal)); if(v_numStr.indexOf(".") < 0) v_numStr = v_numStr + "." + v_decStr.substr(1,v_decStr.length); else v_numStr = v_numStr + v_decStr.substr(1,v_decStr.length); return (v_minus + v_numStr.substr(0,v_numStr.indexOf(".") + decimal + 1)); } } function f_calTotal() { var v_totalRev = 0; var v_rev = 0; var cas_form = document.getElementById("cb_resultTotal"); if (cas_form.getElementsByTagName("table").length > 0) { var cas_rows = cas_form.getElementsByTagName("table")[1].getElementsByTagName("tr"); for(var rowIndex=1; rowIndex < cas_rows.length; rowIndex++) { var cells = cas_rows[rowIndex].getElementsByTagName("td"); /* 1 – change value inside brackets to choose column to calculate sum */ v_rev = cells[3].innerHTML; if ( v_rev != " " && !isNaN(v_rev.substr(1))) v_totalRev = v_totalRev + parseFloat(v_rev); } var v_nrow = cas_rows.length; cas_form.getElementsByTagName("table")[1].insertRow(v_nrow); var o_lastRow = cas_form.getElementsByTagName("table")[1].rows[v_nrow]; o_lastRow.style.background = "#385C7E"; o_lastRow.insertCell(0); o_lastRow.insertCell(1); /* 2 – Display the “Total” label (2 lines below) */ var v_colText = o_lastRow.insertCell(2); v_colText.innerHTML = "<div style='padding:5px;color:#ffffff;font-size:14px;font-weight:bold;font-family:Arial'>Total</div>"; var v_colValue = o_lastRow.insertCell(3); /* 3 – Display the result of the calculation (2 lines below) */ v_colValue.innerHTML = "<div style='padding:5px;color:#ffffff;font-size:14px;font-weight:bold;;font-family:Arial'>$" + NumberFormatted(v_totalRev,2) + "</div>"; o_lastRow.insertCell(4); } } </script> <script> f_calTotal(); </script> Tips for Customization Follow these steps to customize this script for different column positions: a. Change the line of code immediately below comment (1) to: v_rev = cells[COLUMNNUMBER].innerHTML;where COLUMNNUMBER is the index of the column you wish to sum. Remember that column indexes start at 0 (ZERO).b. Change the line of code immediately below comment (2) to: var v_colText = o_lastRow.insertCell(COLUMNNUMBER-1);c. Change the line of code immediately below comment (3) to: var v_colValue = o_lastRow.insertCell(COLUMNNUMBER);d. Ensure that for every column, except for columns COLUMNNUMBER and COLUMNNUMBER-1, there is the following line of code: o_lastRow.insertCell(INDEX);where INDEX is the index of the column. Also, make sure they are in order (i.e. o_lastRow.insertCell(0); is before o_lastRow.insertCell(1); and so on)Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. • MS Windows - IE 8.0, Firefox 3.5.7, Chrome 3.0.195.38, Safari 4.0.3 • Macintosh - Firefox 3.5.7, Safari 4.0.3 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Solution: Prevent blank entries from displaying in a dropdown form element Feature Description: This JavaScript solution shows how to prevent blank "Text" entries from displaying in a dropdown form element of a Search form in a Search and Report DataPage. Typically, when a dropdown form element is configured in Caspio Bridge to use a Lookup table/view, a lookup table and field are selected. The selected field may be populated by a user through another DataPage such as a WebForm. For example, assume that a user is expected to fill in the value for a City field in a WebForm DataPage. This City field is also used as a Lookup table/view field to populate a dropdown form element in the Search page of a Search and Report DataPage. If a user omits to fill a value for the City field in the WebForm, then no value is stored for that record. This, in turn, causes the dropdown form element on the Search page to display a blank. This JavaScript solution, when applied on a Search page of a Search and Report DataPage, will remove the appearance of all blank entries. This improves the appearance of the Search page, while still preserving all values other than a blank in the dropdown form element. Implementation: This solution can be used "as-is", without any changes if It is used in the Search form of a Search and Report DataPage and The dropdown form element is the first field of the search page, To use this solution, a. Highlight to copy the code provided in the text area shown below. b. Paste it inside the HTML Footer section of the Search form in a Search and Report DataPage. The Dropdown Form Element considered for this example is referenced as Value1_1 in the script provided below. Value1_1 stands for the first form element. Hence, for a Dropdown Form Element appearing in positions other than the first position, this solution can be customized by changing the value of the variable dropdown. <SCRIPT LANGUAGE="JavaScript"> <!-- Function removeBlanksInDropdown searches for blank entries and removes all occurrences. It is advisable to use this script with the "Show distinct display options" checkbox checked in the dropdown configuration in the Caspio Bridge DataPage Wizard --> function removeBlanksInDropdown() { /* dropdown stores the value of the dropdown form element reference in the DataPage. */ var dropdown = document.getElementsByName("Value1_1"); for (var q = dropdown[0].length-1; q >= 0; q--) { if (dropdown[0].options[q].value == "") dropdown[0].remove(q); } } document.addEventListener('DataPageReady', removeBlanksInDropdown); </SCRIPT> Customize the script by changing the value of the variable dropdown to an appropriate field reference. For example, if the Dropdown appears as the second field of the Search form, it must be referenced as Value2_1. Accordingly, change the above code from var dropdown = document.getElementsByName("Value1_1"); to var dropdown = document.getElementsByName("Value2_1"); Additional Considerations This solution only removes the "appearance" of blank entries from the City field used in the Search form. It does not remove the blank entries from the associated table. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 8.0, Firefox 3.5.7, Chrome 3.0.195.38, Safari 4.0.3 # Macintosh - Firefox 3.5.7, Safari 4.0.3 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Solution: Disable fields conditionally in the search page Feature Description: This JavaScript solution shows how to disable a Dropdown Form Element based on a selection made in another dropdown element. This solution can be used on the Search page of a Search and Report DataPage. For example, assume that a search form contains three fields, Country, State and City where Country and State are Dropdown form elements and City is a Text Field. If the country selected in the Country dropdown is not "United States", the State dropdown element is disabled. This prevents a user from making a selection for State. This feature is useful when there are no State values to be displayed for any Country selection other than the United States. Implementation: This solution can be used "as-is", without any changes if It is used in the Search page of a Search and Report DataPage, The first and second field elements are Dropdown Form Elements and, The selection made in the first dropdown is "United States". To use this solution, a. Highlight to copy the code provided in the text area shown below. b. Paste it inside the HTML Footer section of the Search page in the Search and Report using the Caspio Bridge DataPage Wizard. Form elements on the Search page of a Search and Report DataPage are referenced as Value1_1, Value2_1 and so on. Value1_1 is a reference to the first form element while Value2_1 is a reference to the second form element. The naming convention follows the order in which the form elements appear on a DataPage. This solution can be customized for two elements of a Search form appearing in any order as long as the first of the two elements is a Dropdown Form Element. <SCRIPT LANGUAGE="JavaScript"> /*(1) Value1_1 is a reference to the first dropdown element */ var dropdown1 = "Value1_1"; /*(2) Value2_1 is a reference to the second drodown element */ var dropdown2 = "Value2_1"; /*(3) The text in the first dropdown which if not selected will disable the second dropdown */ var rightSelection = "United States"; <!-- Function secondDropdown compares the selection made in one dropdown and disables another dropdown based on selections made --> function secondDropdown() { var firstDropdown = document.getElementsByName(dropdown1); var firstSelection = firstDropdown[0].options[firstDropdown[0].selectedIndex].text; var secondDropdown = document.getElementsByName(dropdown2); if (firstSelection != rightSelection) secondDropdown[0].disabled=true; else secondDropdown[0].disabled=false; } document.addEventListener('DataPageReady', secondDropdown); /*(4) Everytime a selection is made, the function secondDropdown() is called. */ document.getElementById("caspioform").Value1_1.onchange=secondDropdown; </SCRIPT> Tips for Customization a. Customize the script by changing the values of the variables dropdown1 and dropdown2 to their appropriate field references. b. Change the value of the variable right selection from "United States" to suit your requirements. c. Change the direct reference made to the first Dropdown Form Element in the line of code directly below comment (4) to the appropriate reference For example, if the Country field is the fifth field on the Search form, a reference to it is made as Value5_1. This requires a change to the line of code below comment (4) as shown. document.getElementById("Value5_1 ").onchange=secondDropdown; Additional Considerations The use of this solution may conflict with other solutions that you may have already used for a particular DataPage. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 8.0, Firefox 3.5.7, Chrome 3.0.195.38, Safari 4.0.3 # Macintosh - Firefox 3.5.7, Safari 4.0.3 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Solution: Format tabular display on result page in four different ways Feature Description: This JavaScript solution shows how to format the Results page of a Search and Report DataPage in four different ways. For ease of reference, these formats are referred to as Type A, Type B, Type C and Type D respectively. The details are: a. Type A: Individual column - Background color b. Type B: Individual column - Font weight c. Type C: Individual row - Font weight d. Type D: Individual column - Conditionally format background color Features in this solution that can be easily customized are, a. Column number for Type A formatting. b. Column number for Type B formatting. c. Row number for Type C formatting. d. Column number for checking if a specified condition is met. Implementation: This solution can be used "as-is", without any changes if a. It is used in a Search and Report DataPage and b. The table to be formatted is the first table of the web page in which the DataPage is embedded, c. The 2nd column is to be formatted as Type A, d. The 3rd column is to be formatted as Type B, e. The 2nd row is to be formatted as Type C, f. The 3rd column is to be formatted as Type D if a cell in the column contains the value Yes. Note: Conditional formatting may not be displayed if the condition being checked is not satisfied by the data in the specified column. To use this solution, a. Highlight the code provided in the text area shown below and copy it. b. Paste it inside the HTML Footer section of the Results page using the Caspio Bridge DataPage Wizard. <SCRIPT LANGUAGE="JavaScript"> /*(1) tablenum is the number of the table to be formatted */ var tablenum = 0; /*(2) Two columns used for the different formatting styles */ var columnNum1 = 1; /*used in Type A */ var columnNum2 = 2; /*used in Type B and Type D */ /*(3) rowNum is the number of the row to be formatted */ rowNum = 2; //used in Type C /*(4) variables for colors. */ var white = '#FFFFFF'; var lightGrey = '#CCCCCC'; var yellow = '#FFFF00'; /*(5) variables for font style */ var fontStyle1 = 'bold'; /*(6) variable for condition to check in conditional formatting, Type D.*/ var conditionString = "Yes"; var tbl = document.getElementsByTagName('table')[tablenum]; var rows = tbl.getElementsByTagName('tr'); /*(7) Type C: style individual row: fontWeight */ rows[rowNum].style.fontWeight = fontStyle1; for (var row=0; row<rows.length;row++) { var cells = rows[row].getElementsByTagName('td'); /*(8) Type A: style individual column: background color */ cells[columnNum1].style.backgroundColor = lightGrey; /*(9) Type B: style individual column: fontweight */ cells[columnNum2].style.fontWeight = fontStyle1; /*(10) Type D: conditional formatting. */ if (cells[columnNum2].innerHTML == conditionString) { cells[columnNum2].style.backgroundColor= yellow; } } </SCRIPT> To customize this solution, change the values of the variables tablenum, columnNum1, columnNum2 and rowNum as required. Additional Considerations This solution may be difficult to customize if the web page in which the DataPage is embedded, contains a large number of tables. In order to see the full effect of this solution, the appropriate columns and rows have to exist in the data table. Variations of such formatting can be implemented easily by using this solution as a guideline. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 8.0, Firefox 3.5.7, Chrome 3.0.195.38, Safari 4.0.3 # Macintosh - Firefox 3.5.7, Safari 4.0.3 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.

JavaScript Solution: Subtract two date values to obtain the number of years the dates differ Feature Description: This JavaScript solution shows how to perform date arithmetic in a Submission Form. Two date values entered into fields of a form are subtracted to return the number of years by which they differ. The result is stored in another field in the same Submission Form. This calculation is performed when the DataPage is submitted by the user. Implementation: This solution can be used "as-is", without any changes if a. It is used in an Submission Form DataPage and b. The two date values to be subtracted are in the Caspio Bridge supported Date/Time format of mm/dd/yyyy and c. The input date fields are named StartDate and EndDate while the field storing the difference is named Years. To use this solution copy and paste the code below, inside the HTML Footer section of the Submission Form using the Caspio Bridge DataPage Wizard. <SCRIPT LANGUAGE="JavaScript"> function getDiff() { /* Retrieve the value of the field StartDate and store in a variable 'v_sDate' */ var v_sDate = document.getElementById("InsertRecordStartDate").value; /* Retrieve the value of the field EndDate and store in a variable 'v_eDate' */ var v_eDate = document.getElementById("InsertRecordEndDate").value; var sDate = new Date(v_sDate); var eDate = new Date(v_eDate); var sYear = sDate.getFullYear(); var eYear = eDate.getFullYear(); var years = Math.abs(eYear - sYear); /* Insert the diffrencer stored in years into the DataPage field Years */ document.getElementById("InsertRecordYears").value=years; } /* On submitting the webform, the function getDiff is executed */ document.getElementById("caspioform").onsubmit=getDiff; </SCRIPT> Here is another example using BeginDate and FinishDate to calculate and store the YearsDifference: <SCRIPT LANGUAGE="JavaScript"> function getDiff() { var v_sDate = document.getElementById("InsertRecordBeginDate").value; var v_eDate = document.getElementById("InsertRecordFinishDate").value; var sDate = new Date(v_sDate); var eDate = new Date(v_eDate); var sYear = sDate.getFullYear(); var eYear = eDate.getFullYear(); var years = Math.abs(eYear - sYear); document.getElementById("InsertRecordYearsDifference").value=years; } /* On submitting the webform, the function getDiff is executed */ document.getElementById("caspioform").onsubmit=getDiff; </SCRIPT> Additional Considerations # The field that stores the result of the calculation may have validation rules placed upon it which may prevent this solution from working correctly. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 8.0, Firefox 3.5.7, Chrome 3.0.195.38, Safari 4.0.3 # Macintosh - Firefox 3.5.7, Safari 4.0.3 Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.