caspio

Administrators
  • Content count

    52
  • Joined

  • Last visited

  • Days Won

    50

caspio last won the day on July 5 2016

caspio had the most liked content!

3 Followers

About caspio

  • Rank
    Site Admin
  1. New to the system and trying to learn all the different javascript handles and how to call them properly.  If there is any info out there please let me know.

     

    Thank you

    1. svitlanataran

      svitlanataran

      Hello,

      You may have a look at our Java Script solutions in the following section:

      https://forums.caspio.com/index.php?/forum/49-caspio-javascript-solutions/

  2. posted this matter on the forums and no respond.
    using HTML block would like to show values for some fields as images (like a check mark) and so on.... The script I have, responds nicely for the first 2 data fields and then doesn't function further! Also, would like the fields NOT to appear at all, if the value is blank.
    Script, I am using:

    <span  style="color: #A1A1A1;
        font-size: 12px;
        font-family: Arial, sans-serif;
        font-style: normal;
        font-weight: normal;">21+</span>

    <span id="icon[@field:age]"></span>
    <script>

    if ("[@field:age]" == "No1"){
    document.getElementById('icon[@field:age]').innerHTML="<img width='15px' src='http://someapp.com/nk/icons/yellowflag.png'/>";
    } else if ("[@field:age]" == "Yes1"){
    document.getElementById('icon[@field:age]').innerHTML="<img width='15px' src='http://assets.goplaypool.com/files/theme/appcas/check_01.png'/>";

    </script>

    <span  style="color: #A1A1A1;
        font-size: 12px;
        font-family: Arial, sans-serif;
        font-style: normal;
        font-weight: normal;">Tournaments</span>

    <span id="icon[@field:tourneys]"></span>
    <script>

    if ("[@field:tourneys]" == "No2"){
    document.getElementById('icon[@field:tourneys]').innerHTML="<img width='15px' src='http://someapp.com/nk/icons/yellowflag.png'/>";
    } else if ("[@field:tourneys]" == "Yes2"){
    document.getElementById('icon[@field:tourneys]').innerHTML="<img width='15px' src='http://assets.goplaypool.com/files/theme/appcas/check_01.png'/>";

    </script>

    <span  style="color: #A1A1A1;
        font-size: 12px;
        font-family: Arial, sans-serif;
        font-style: normal;
        font-weight: normal;">Leagues</span>

    <span id="icon[@field:leagues]"></span>
    <script>

    if ("[@field:leagues]" == "No3"){
    document.getElementById('icon[@field:leagues]').innerHTML="<img width='15px' src='http://someapp.com/nk/icons/yellowflag.png'/>";
    } else if ("[@field:leagues]" == "Yes3"){
    document.getElementById('icon[@field:leagues]').innerHTML="<img width='15px' src='http://assets.goplaypool.com/files/theme/appcas/check_01.png'/>";

    </script>

     

    Thank you in advance! :)

  3. 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 display 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 third-party solution such as DocuSign, contact Caspio Professional Services. Implementation: This solution can be used "as-is", without any changes if: It is used in a Submission Form DataPage. Enable Advanced Options is checked in the DataPage. The field name in your table is "Signature" and the data type is Text (64000). The DataPage is deployed with Embed method on a web page. To use this solution: a. Copy the code below and paste inside the <head> section of your web page: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> b. Download the JavaScript file from here and upload the file to your website hosting. Once uploaded, you'll need to reference this file in the <head> section of your web page. Example: <script src="http://yoursite.com/yourfolder/jquery.signaturepad.min.js"></script> c. 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. <canvas class="pad" width="218" height="55" style="margin: 0px 0px 0px 100px; 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;"></canvas></br> <span style="margin: 0px 0px 0px 264px;"><input type="reset" class="clearButton" value="Clear"></span> <input type="hidden" name="output" class="output"> <script type="text/javascript"> $(document).ready(function () { $('#caspioform').signaturePad({drawOnly : true}); }); $("#cb_sign_wrapper form").submit(function(){ $("#InsertRecordSignature")[0].value = $("#cb_sign_wrapper .output")[0].value; }); </script> d. Insert Header & Footer using the picker button at the lower right of the DataPage Elements. Disable HTML editor for both Header and Footer from the Advanced tab. Copy the code below and paste inside the HTML Header. <div id="cb_sign_wrapper"> e. Copy the code below and paste inside the HTML Footer. </div> Tips for Customization To customize the signature "window", you can adjust the width and height inside the HTML Block on step "c" 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 signature on an Update Form or a Details page of a Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the HTML Block on step "c" above. To display the signature in a Details DataPage, insert an HTML Block, go to the Source of the HTML Block and insert the following code. <div class="sigPad signed"> <div class="sigWrapper"> <canvas height="55" width="198" class="pad"></canvas></div> </div> <script> var sig = eval("[@field:Signature]".replace(/"/g, '"')); $(document).ready(function () { $('.sigPad').signaturePad({displayOnly:true}).regenerate(sig); }); </script> To display the signature in the results page of a Report DataPage, insert an HTML Block, 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> Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 11, Firefox 29.0.1, Chrome 34.0.1847.137, Safari 5.1.7 # Macintosh - Firefox 26.0, 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.
  4. JavaScript Solution: Freeze header in a tabular report Feature Description: This JavaScript solution shows how to freeze header in a tabular report to make it visible while user scrolls down through the result page. Implementation: This solution can be used "as-is", without any changes if it is used in an Tabular Search and Report DataPage. To use this solution, insert a Header and Footer element in the Configure Results Page Fields of the DataPage using the Caspio Bridge DataPage Wizard. Disable HTML Editor for both Header and Footer from the Advanced tab. Copy the code below and paste inside the HTML Header. <div id='cb_lib'> Copy the code below and paste inside the HTML Footer section of the Configure Results Page Fields of the DataPage using the Caspio Bridge DataPage Wizard. <script> var v_table = $("#cb_lib table[data-cb-name=cbTable]"); var v_tr = $("#cb_lib table[data-cb-name=cbTable] tr:nth-child(1)"); var th = $("#cb_lib table[data-cb-name=cbTable] tbody tr:nth-child(1)"); var v_clone = v_tr.clone(); var v_thead = $('<thead>'); v_thead.append(v_clone); $(v_table).prepend(v_thead); $(v_table).floatThead(); $(th).hide(); </script> To deploy the DataPage in an embedded mode, copy and paste the following script references in the <head> section of your web page. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.7/jquery.floatThead.min.js"></script> Note: To use "iframe deploy code" or "direct from Caspio link", place the above script in the HTML Header section of the Configure Results Page Fields of the DataPage using the Caspio Bridge DataPage Wizard. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 11, Firefox 29.0.1, Chrome 34.0.1847.137, Safari 5.1.7 # Macintosh - Firefox 26.0, 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.
  5. 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.
  6. JavaScript Solution: Mouse-over tip functionality for column header on the tabular results page Feature Description: This JavaScript solution shows how to add a Mouse-over tip functionality for a column header on the tabular results page. Using this script you can add a small help icon on the column header to provide more information about the data within that column. Implementation: This solution can be used "as-is", without any changes if It is used in an Tabular Report DataPage The label names LibraryName and Address exist in the Report DataPage, for which we want to add the mouse-over tip functionality. The DataPage is deployed with Embed method on the web page. To use this solution, copy the code below and paste inside the HTML Header section of the Configure Results Page Fields of the DataPage using the Caspio Bridge DataPage Wizard. <div id="cb_tool_tips" style="display:none;"> <div data-label="LibraryName" class="cb_tip"> <div class="tiptext"> These are library names </div> </div> <div data-label="Address" class="cb_tip"> <div class="tiptext"> Address of the library </div> </div> </div> <div id='cb_tab'> Copy the code below and paste inside the HTML Footer section of the Configure Results Page Fields of the DataPage using the Caspio Bridge DataPage Wizard. </div> <script type='text/javascript'> //Labels that need help tip icon var label_names = { 'LibraryName':true, 'Address':true }; //Assign wrapper div id var cb_wrapper_id = 'cb_tab'; $('#'+cb_wrapper_id+' table[data-cb-name=cbTable] th').each(function(i, el){ var th = $(el); var a = th.find('a'); var isGenTip = false; var label = ''; if(a.length > 0){ if(a.html() in label_names){ isGenTip = true; label = a.html(); } }else{ if(th.html() in label_names){ isGenTip = true; label = th.html(); } } if(isGenTip){ var tip_a = genTipArchor(label); th.append(tip_a); } }); var tooltip_map = {}; $('#cb_tool_tips .cb_tip').each(function(i, el){ var help_id = $(el).attr('data-label'); tooltip_map[help_id] = el; }); $( document ).tooltip({ items: ".help", content: function(){ var help_id = $(this).attr('data-label'); return $(tooltip_map[help_id]).html(); }, tooltipClass:'strong' }); function genTipArchor(label){ var a = $('<a>'); a.attr('data-label',label).attr('href','#').attr('tabindex','-1').addClass('help'); var img = $('<img>'); img.attr('border',0).attr('src','http://static.caspio.com/images/xref/help.png'); a.append(img); return a; } </script> To deploy the DataPage, follow the instructions below: 1) Copy and paste the following script references in the <head> section of your web page. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type='text/javascript'></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type='text/javascript'></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"> 2) Copy and paste the Caspio deploy code in the <body> of your web page as usual. Tips for Customization To customize this script in order to enable same feature for additional fields, duplicate two div tags (class cb_tip and tiptext) with the desired label name in the HTML Header section. Then duplicate the 'label name': true, where variable label_name is defined in the HTML Footer section. Tested Browsers This JavaScript solution was tested on the following platforms and Internet Browsers only. # MS Windows - IE 11, Firefox 27.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.
  7. 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 ; } } } } } window.onload = f_listbox ; </script> Tips for Customization To customize this script to enable same feature for 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.
  8. 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"> <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"> 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.
  9. JavaScript Solution: Show record number in results page Feature Description: This JavaScript solution shows how to add sequential record number to the report. Implementation: This solution can be used "as-is", without any changes if it is used in a Results page of a Search & Report DataPage which returns 15 records per page. To use this solution, copy the code below and paste inside the HTML Header section of the Results page of the Search and Report DataPage using the Caspio Bridge DataPage Wizard. <script type="text/javascript"> var v_currPage = '[@cpipage]'; var v_idx = 0; v_currPage = v_currPage == '' ? 1 : parseInt(v_currPage); if ( v_currPage > 1 ) { v_idx = ( v_currPage - 1 ) * 15; } </script> And the code below should be pasted to the HTML Block to show the sequential numbers: <script type="text/javascript"> v_idx++; document.write(v_idx); </script> Tips for Customization This solution is for the reports that are set to return 15 records per page. If the number of the records per page is different in your report, you need to change the number seen below: v_idx = ( v_currPage - 1 ) * 15; 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.
  10. 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"> function f_a(v_id) { return document.getElementById(v_id); } f_a('InsertRecordPhone').maxLength = 14; f_a('InsertRecordPhone').onkeyup = function(v_e) { v_e = v_e || window.event; if (v_e.keyCode >= 65 && v_e.keyCode <= 90){ this.value = this.value.substr(0, this.value.length - 1); return false; }else if (v_e.keyCode >= 37 && v_e.keyCode <= 40){ return true; } var v_value =(this.value.replace(/[^\d]/g, '')); if (v_value.length==7) { this.value = (v_value.substring(0,3) + "-" + v_value.substring(3,7));} else if(v_value.length==10){ this.value = ("(" + v_value.substring(0,3) + ") " + v_value.substring(3,6) + "-" + v_value.substring(6,10)); }; } </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.
  11. 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. <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.write('[url="http://www.google.com/"]Enter Google[/url]'); } </script> Tips for Customization a. To use this script with 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 parameter in the URL, change the line of code immediately below comment 2 to: document.write('[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.
  12. 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"> window.onload = 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.
  13. 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.
  14. 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.
  15. 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 filling 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); } } window.onload=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 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.