Leaderboard

You should include all in your page and then based on user selection hide the ones that are not selected, There has to be a virtual dropdown where they select how many areas they want, and then add rules: so if value is greater than 4 hide 5, greater than 3 hide 4, greater than 2 hide 3 .... http://howto.caspio.com/datapages/forms/conditional-forms/ try this and see how it works !

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.