Jump to content

Leaderboard


Popular Content

Showing content with the highest reputation since 07/17/2013 in all areas

  1. 12 points
    caspio

    JS: Format Phone Number

    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.
  2. 11 points
    caspio

    JS Guide: Caspio Form Elements

    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.
  3. 9 points
    Hi all, I'm deploying Caspio Bridge on an Intranet. For datapages that include a secondary details link - we consistently experience authentication errors with IE - depending on the OS or browser version. For Windows 7/IE9 - I get booted out; XP/IE8 - I can get to detail pages fine. Has anyone else encountered this? Using Chrome and Firefox - I do not get a boot out issue for detail links - HOWEVER, because we link to files on a server for the intranet - the preferred browser must be IE. The plugins for Chrome/Firefox don't correct our file linking. I don't want the end user experience to be bad - having to use 2 browsers is not acceptable. Any suggestions?
  4. 9 points
    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.
  5. 9 points
    JavaScript Solution: Select multiple values from a listbox in a Submission Form Feature Description: This JavaScript solution shows how to enable the selection of multiple values from a listbox form element in a Submission Form DataPage. Multiple values in a listbox can be selected by holding the Ctrl key on the keyboard while clicking on the required values simultaneously. When the form is submitted, the values selected in the listbox are recorded as a series of all selected choices separated by commas. For example, assume that a listbox named States in a Submission Form contains names of all the different states in the United States. If the following three states California, Nevada and Oregon are selected in this listbox, the value stored in that field will be "California,Nevada,Oregon". Implementation: This solution can be used "as-is", without any changes if a. It is used in an Submission Form DataPage and b. The listbox field to enable multiple selection is called States. To use this solution copy and paste the code below, inside the HTML Footer section of the DataPage using the Caspio Bridge DataPage Wizard. <SCRIPT LANGUAGE="JavaScript"> /* "fieldName" is the variable name for the listbox type form element field. */ var fieldName = "InsertRecordStates"; var x=document.getElementsByName(fieldName); x[0].multiple=true; </SCRIPT> Additional Considerations To use this script with a field not named as States, change all occurrences of the text States in the script to the appropriate field name. If the States field is used in the Search page of a Report DataPage, configure it as a Text Field with contains as its comparison operator. Only then, a search initiated with even one of the three state names will return all records where those state names are found, including those containing multiple state names. 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.
  6. 8 points
    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.
  7. 7 points
    lugoimports

    User authentication

    I have a table used to authenticate access. For some reason, I currently have 24 users and it works. The problem is I'm trying to add more and the id/password doesn't work for the new users. What am I doing wrong? Is there a restriction as far as how many users you can have???
  8. 6 points
    caspio

    Js: Auto-Submit A Datapage

    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. 6 points
    supra01

    API in JAVA

    How to integrate the web service profile in Caspio Bridge and integrate it with Java API. Do we have to download Eclipse and Tomcat in our local system, configure everything and then use WSDL to call my Caspio account. Please advise.
  10. 6 points
    In the Select Query while using Caspio Web Services API, SAY stub.selectDataRaw("acnt name", "API profilename ", new String(""), "tablename", true, "proj_comp_id, timesheet_from_date , timesheet_to_date", "criteriaField.getText()" , orderByField.getText(), ",", ","); Need to know how to pass the criteria dynamically as "proj_comp_id = $project_Id" for criteriaField.getText()??? If I hard code the value of project id to be some value say 140, it works..Struck with passing it dynamically. Thanks
  11. 6 points
    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.
  12. 6 points
    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.
  13. 6 points
    JavaScript Solution: Perform a calculation on values entered in a Submission Form Feature Description: This JavaScript solution shows how to perform a mathematical calculation such as multiplication in a Submission Form DataPage. Values entered in the form are multiplied and the result is stored in a field on the same form. This calculation is performed when the DataPage is submitted by the user. For example, if the values 15 and 2 are input into two fields named Height and Width respectively, the value 30 is automatically inserted into a field named Area. Implementation: This solution can be used "as-is", without any changes if a. It is used in an Submission Form and b. The fields Height, Width and Area exist in the table and the form. 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 calculate() { /* Retrieve the value of the field Height and store in a variable 'v_height' */ var v_height = parseFloat(document.getElementById("InsertRecordHeight").value); /* Retrieve the value of the field Width and store in a variable 'v_width' */ var v_width = parseFloat(document.getElementById("InsertRecordWidth").value); /* Multiply the value height and width to obtain the value of 'v_area' */ var v_area= (v_height * v_width); /* Insert a rounded value of the variable 'v_height' into the DataPage field Area */ document.getElementById("InsertRecordArea").value = Math.round(v_area); } /* On submitting the webform, the function calculate is executed */ document.getElementById("caspioform").onsubmit=calculate; </SCRIPT> Here is another example using Price and Quantity to calculate and store the Total: <SCRIPT LANGUAGE="JavaScript"> function calculate() { var v_price = parseFloat(document.getElementById("InsertRecordPrice").value); var v_quantity = parseFloat(document.getElementById("InsertRecordQuantity").value); var v_total = (v_price * v_quantity); document.getElementById("InsertRecordTotal").value = Math.round(v_total); } /* On submitting the webform, the function calculate is executed */ document.getElementById("caspioform").onsubmit=calculate; </SCRIPT> Additional Considerations This solution is best used to perform simple calculations with small numbers. The field that stores the result of the calculation may have validation rules placed upon it which may prevent this solution from working correctly. 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.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.
  14. 5 points
    ezIQchad

    Conditional Formatting Trick

    Check out this trick I stumbled upon. Put Caspio Variables into your Classes so you can use CSS to dynamically style your pages. (js not required) Div to dynamically format <div class="action[@field:action]"></div> css .actionCall { background-image: URL("../img/call.png"); } .actionEmail { background-image: URL("../img/email.png"); } .actionText { background-image: URL("../img/text.png"); } Dynamic Elements - load all options, and hide all but needed <a class="btnFile fileName[@field:FileName]" href="../some/dir/[@field:FileName]">Download</a> <a class="btnLink fileLink[@field:FileLink]" href="[@field:FileLink]">View File</a> css /*-- when [@field:***] is null, hide the div --*/ .fileName, .fileLink { display: none; } Hope this helps Think Easy CHAD -I know the Title of this Forum is "Ask....", but IDK where else to share stuff like this.
  15. 5 points
    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. Implementation: This solution can be used "as-is", without any changes if: It is used in a Submission Form DataPage. Ajax is disabled 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> <div id="cb_sign_wrapper"> 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. <canvas class="pad" 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;" width="218"></canvas><br /> <span style="margin: 0px 0px 0px 264px;"><input class="clearButton" type="reset" value="Clear" /></span> <input class="output" name="output" type="hidden" /> <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> 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 "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 HTML Block on step "d" above. To display the signature in a results page of a Report DataPage, Details 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.
  16. 5 points
    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.
  17. 5 points
    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.
  18. 5 points
    JavaScript Solution: Automatically insert the current date and time into a field Feature Description: This JavaScript solution will grab the local date and time from the user's computer and automatically insert it into a field named TimeofView in your Caspio Bridge DataPage. Format of date and time is set to m/d/yyyy hh:mm Implementation: This solution can be used "as-is", without any changes if a. It is used in an Update Form or Details page of a Search and Report DataPage and b. The name of the field storing the local date and time is called TimeofView. To use this solution copy and paste the code below, inside the HTML Footer section of the Details page of the DataPage using the Caspio Bridge DataPage Wizard. <SCRIPT LANGUAGE="JavaScript"> /* Declaration and initialization */ Stamp = new Date(); var v_TimeStamp; Hours = Stamp.getHours() Mins = Stamp.getMinutes(); /* Attach a prefix with digit '0' if the minutes is less than 10. */ if (Mins < 10) { Mins = "0" + Mins; } /* Construct the value of the v_TimeStamp variable in the format m/d/yyyy hh:mm */ v_TimeStamp=('' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate()+ "/"+Stamp.getFullYear() + ' ' + Hours + ":" + Mins); /* Field name - TimeofView is referred with a prefix - EditRecord */ document.getElementById("EditRecordTimeofView").value=v_TimeStamp; </SCRIPT> To use this script in a Submission Form, change "editrecord" to "insertrecord" so modify the last line of code from document.getElementById("EditRecordTimeofView").value=v_TimeStamp; to document.getElementById("InsertRecordTimeofView").value=v_TimeStamp; Additional Considerations To use this script with a field not named as TimeofView, change all occurrences of the text TimeofView in the script to the appropriate field name. The accuracy of the date and time stamped is dependent on the date and time set on the user's local computer. The script does not take into account the time zone in which the date and timestamp are created. 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.
  19. 4 points
    Hi All, I had a great conversation with Caspio support a few weeks ago that helped my significantly reduce the amount of data that my app uses. Here are the cliff notes. To see how much data your pages use, paste the URL from the deploy menu into a new web browser, and use a development tool or web inspector to investigate. (in Chrome press F12, and click the Network tab) Records per page is a big factor in data usage... nearly a linear relationship. Ajax is a big load up front, but will help if you encounter many "paging" actions... long reports. Happy Building
  20. 4 points
    Hello @TroubleShooter, Yes, you can. Currently, it is only possible with JavaScript. The idea is to place the Registration Form and Standalone Login Page side-by-side (or at least, in the same page). You may hide the Login Form ( using <div style="display: none;"></div> on the Header/Footer of the DataPage || More about here...), on your Registration Page but I rather keep them visible so the users can opt to just log-in if they already have an account; or register, if they don't. After registration, JavaScript will fill-out the login form, and submits it programatically, therefore logging-in the newly registered user. The only requirements to this implementation are: 1.) Login DataPage and Registration Form DataPage are deployed on the same page. 2.) Both DataPages are AJAX-Enabled! 3.) Headers/Footers should have the HTML Editor disabled from the Advanced tab. Without futher ado, let's do this. 1.) Open DataPage Configuration for your Registration Page: 2.) Go to 'Configure Fields Section' 2.1.) Add a Header and Footer (Disable HTML Editor from the advanced tab) 2.2.) Paste the code snippet in the Footer and modify the following information. <script> document.addEventListener('BeforeFormSubmit', function() { var registrationDP = "[@cbAppKey]"; var loginDP = "378fd3458dfsjhefjhqerwfdsyui3274239"; //Replace with the AppKey of your Standalone Login Scren var username_field = "username"; //replace with the name of your username field (CASE SENSITIVE!) var password_field = "password"; //replace with the name of your password field (CASE SENSITIVE!) //No modifications necessary from this point onward. document.querySelector(`[action*="${loginDP}"] [id*=xip_username]`).value = document.querySelector(`[action*="${registrationDP}"] [id*=InsertRecord${username_field}]`).value document.querySelector(`[action*="${loginDP}"] [id*=xip_password]`).value = document.querySelector(`[action*="${registrationDP}"] [id*=InsertRecord${password_field}]`).value }) </script> 5.) Go to 'Destination and Messaging' 5.5) Set Destination after record submit to: Display a message; Disable the HMTL Editor! 5.6) Paste the code snippet below; then modify. Registered Successfully. <script> var loginDP = "378fd3458dfsjhefjhqerwfdsyui3274239"; document.querySelector(`[action*="${loginDP}"]`).submit(); </script> After saving, you should be good to go. Working example: https://stage.caspio.com/support/forums/DefinitelyNot31337/register-login/index.html Application Export Package: CaspioData_2019-Apr-02_0219.zip Good luck and happy hacking! Regards DN31337!
  21. 4 points
    Hello All, I just wanted to share this link with everyone in case you are looking to create a quick PDF from a DataPage: http://pdfcrowd.com/save-to-pdf/ You can simply add this line of code to create a link to generate a PDF: <a href="//pdfcrowd.com/url_to_pdf/">Save to PDF</a> Just wanted to share this with everyone!
  22. 4 points
    LunaLovegood

    Connect to Google Drive

    Hello @directrix, I got this same error and contacted their support team. Then advised me that this is a Google issue as they have made changes recently. But if you have an existing task that is connected to Google Drive, it'll work perfectly. Fret not, Caspio DevOps team is now looking for a way to make this work. *winks*
  23. 4 points
    kme

    Timestamp When "y" Clicked

    MayMusic - Thanks so much, it is working now. For those interested in the solution, The additional problem was that Timestamp field in the Table had to have a datatype of Text(255). In the Details Page, Timestamp was changed to a Text Field. Once Yes was clicked, the textfield was filled with a timestamp, and then when Update was clicked, the field in the Results Page was filled with the timestamp. Thanks again.
  24. 4 points
    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.
  25. 4 points
    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.
  26. 3 points
    Hello I want to share something with you guys again. Back then when I only have an 'explore plan', I'm using this workflow to send acknowledgement/notification emails on different persons base on a value of a field in my submission form. My workflow back then is I have a submission form for job applicants. I want to send an email to a certain member of my company depending on which position the applicant is app laying. for example. If the applicant is applying for a staff position, there will be an email an email send to staff manager, If the applicant is applying for an agent position, there will be an email an email send to agent manager. etc... This could easily be done via trigger but since it was unavailable on explore plans. This is what I did. First I made a lookup table containing the emails of the designated managers where I used the job they are managing as a unique field. Then on my submission form. I made a virutal field and set it as a cascading dropdown that is using the field for the position the user is applying for as a parent field and used the table containing the emails of the managers as a lookup table. I enveloped this virtual field with html blocks with html codes for hiding fields. please see this documentation for reference : https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-hide-fields-in-datapages/ and https://howto.caspio.com/datapages/datapage-components/cascading-elements/ . Now that it was hidden, we will now proceed to the messaging options. It is up to you to chose if you want an Notification emails or Acknowledgement emails. As I check It works with any of them as long as you are going to use the virtual field with cascading value as the field reference for email. It will now send an email on different person depending on what job the user is applying to. I hope it helps anyone. Also please comment if you have a better idea. Quack
  27. 3 points
    Hello @IamGroot, Just wanted to inform you, I found a way to export/import a table/database with List-DataType value inside it. 1. Change the DataType to "Text(255) field" and Export it. 2. And in your Excel file, make sure that the value for the List-String field is comma separated like this: (Item1,Item2,Item3,Item4, etc.) 3. Proceed with the import as usual. After successfully importing your file. Go to your Table and to the Table Design. 4. Change the "Text(255) Field" (The one we changed in step 1) back to List-String DataType. 5. Then it will just return the way it was. If you want to export it (reapeat step(1)). I hope this helps ~WatashiwaJin~
  28. 3 points
    Hello @Medron, You can try this code: — Luna —
  29. 3 points
    waltmayo

    Forum App?

    Has anyone out there developed a user forum system? I didn't see one offered as a Caspio ready-made-app. If anyone has a good one they'd like to make available, I'd be happy to help support your efforts ($$). If not... I may take this on myself, but I didn't want to re-invent the wheel. Walt
  30. 3 points
    I thought this might be helpful across the board for people developing in Caspio. I've been trying to do a better UI for data entry on web pages that also have to show results in a tabular report. Since iframes don't reliably pass parameters from parent to child and back it's necessary to sometimes deploy 2 datapages (a Submit or Details and a Tabular) on the same web page. This doesn't really look good from a UI perspective. This solution requires using bootstrap and jquery but it's fairly straightforward. One option is to put the the Submit/Details deploy code in the first div with something like class="col-md-3" and the Tabular deploy code in the next div with class="col-md-9" (divs in bootstrap with col classes must add up to 12 but no more than 12, in basic mode). This will put the 2 datapages next to each other, the 1st with 1/4 screen width and the 2nd with 3/4th. However, this setup looks cluttered and can constrain the Tabular report which often needs full page width to show its data clearly. So the ideal would be to onload hide/collapse the first div (with the Submit/Details form) and have the second div (tabular report) a full 12 columns wide. Then click a button or link to show the 1st div (Submit form) and change the 2nd div (tabular report) to 9 columns, thereby displaying both datapages when data entry/edit is needed. Clicking the button/link again (in this method) will collapse div1 and expand div2 back to 12 columns. So it's easy to toggle views this way. To do this: Put this in the body of your webpage (you may have bootstrap and jquery referenced differently): <div class="container-fluid"> <br> <div class="row"> <div class="col-md-3 bg-faded"> <div id="showsubmitform" class="collapse"> Caspio Deploy Code for Submit/Details form </div> </div> <div class="col-md-12" id="right"> <div> Caspio Deploy Code for Tabular Report </div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $('#btnSwitch').click(function(){ $('.col-md-3').toggleClass('show'); $('#right').toggleClass('col-md-9 col-md-12'); }) </script> And then put a button or link elsewhere on your page, wherever you want to show it: <a class="btn page-action" id="btnSwitch" href="#showsubmitform" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Submit New Data</a> When the page is loaded the Tabular Report will be the only datapage showing, in full width. When the 'Submit New Data' link is clicked the Tabular Report moves to the right and shrinks to 9 columns from 12. The space that opens on the left is 3 columns wide and will now show the Submit/Details form. When the 'Submit New Data' link is clicked again it will hide the Submit/Details form and expand the Tabular Report back to 12 full columns. You can change the column numbers of the divs and button ids and labels to suit. This solution might help with some UI massaging, if anyone is working on that aspect of their app...
  31. 3 points
    Hi NeoInJS, Please try using this formula: FLOOR( ( DATEDIFF(day, CONVERT(datetime, CAST(DATEPART(year, [@field:Start_Time]) AS CHAR(4)) + '-01-01', 101), [@field:Start_Time]) + ( 7 - ( ( ( ( DATEPART(day, [@field:Start_Time]) + FLOOR(13 * ((CASE WHEN DATEPART(month, [@field:Start_Time]) < 3 THEN DATEPART(month, [@field:Start_Time]) + 12 ELSE DATEPART(month, [@field:Start_Time]) END) + 1) / 5) + ((CASE WHEN DATEPART(month, [@field:Start_Time]) < 3 THEN DATEPART(year, [@field:Start_Time]) - 1 ELSE DATEPART(year, [@field:Start_Time]) END) % 100) + FLOOR(((CASE WHEN DATEPART(month, [@field:Start_Time]) < 3 THEN DATEPART(year, [@field:Start_Time]) - 1 ELSE DATEPART(year, [@field:Start_Time]) END) % 100) / 4) + FLOOR((CASE WHEN DATEPART(month, [@field:Start_Time]) < 3 THEN DATEPART(year, [@field:Start_Time]) - 1 ELSE DATEPART(year, [@field:Start_Time]) END) / 400) + 5 * ((CASE WHEN DATEPART(month, [@field:Start_Time]) < 3 THEN DATEPART(year, [@field:Start_Time]) - 1 ELSE DATEPART(year, [@field:Start_Time]) END) / 100) ) % 7 ) + 6 ) % 7 + 1 ) ) ) / 7 ) + 1 NOTES: You must replace all instances of [@field:Start_Time] with your actual field. You can test for correctness by adding a calculated field that uses DATEPART(week, [@field:Start_Time]).
  32. 3 points
    Hi! I am exporting a view to excel. When I try to perform the operation year(a2) on a date, then I get an error saying that the cell contains text and not a date. I.e. it seems that a date i Caspio is not exported as a date to excel. Regards Bjorn
  33. 3 points
    Jan

    Email Trigger Of Multiple Records

    Hello everyone, I have found a solution, but it requires additional steps. Select the field with id or with any unique value, on the Advanced tab, select the Pass field value as parameter checkbox and copy the name of the parameter (for example, "[@id]"). Add a Virtual field, select the Hidden Form element, select the External Parameters "On load, receive", paste the name of the parameter from step 1 (for example, "[@id]"). Add the second Virtual field, select the Hidden Form element, select the Data Source Field "On load, receive", select the field with id or with any unique value, the field from step 1. Add the Header&Footer element, select the Footer element, click the Source button and enter the following script: <script type="text/javascript"> if(document.getElementById("caspioform")) { if(document.getElementById("cbParamVirtual1").value==document.getElementById("cbParamVirtual2").value) { document.getElementById("caspioform").style.visibility = 'hidden'; document.write('<font face="arial" color=red size="5">Email Notifications have been Sent!'); } else setTimeout('document.forms["caspioform"].submit()',1000); } </script> I hope, it works. And it is not too complex
  34. 3 points
    Hello, I am trying to create an order submission process. I have two tables: an order delivery details table, and and order details table. The reason for this is that there will be only one order number per order, but potentially several items in each order. Then the orders will need to be imported in our warehouse management system, meaning I will require one line per item per order. So the order details table only has the following fields: order ID; Item No; Quantity required The process I am trying to achieve is as follows (i have indicated between brackets what I have managed to achieve): 1) User indicate the delivery details on the first data form (DONE) 2) The order number is generated automatically (DONE) 3) Change the 'Submit' button to a 'Next' button 4) On clicking the button, take to new datapage to indicate order details (DONE) 5) Order number is transfered to new page and hidden (DONE) 6) User selects an item to order from a drop-down (DONE) 7) User indicates the quantity required (DONE) 8) User can decide to add a new item to the order, i.e. create a new item entry on the same form, and then indicate the quantity required 9) User needs to be able to repeat process 8) undefinitely, i.e. keep adding items to the order 10) User submits order (DONE) 11) An auto email is sent alerting of a new order (DONE) 12) user is taken back to the 'delivery details' data page to start a new order if necessary (DONE) I would appreciate some help to achieve this if possible. If a simpler solution exists, I am more than happy to hear suggestions! Many thanks Julien
  35. 3 points
    MayMusic

    Field Length

    This is possible by setting fixed width for results page label and data elements in the style. To do so, follow the steps below: 1- Edit the Style and enable "Show advanced options (CSS Source)" 2- Move on to the Settings screen and expand Results Page 3- Select Label, switch to Source tab and find ".cbResultSetLabel". Add the following: display: inline-block; width: 70px; 4- Select Data and find ".cbResultSetData". Add the following: display: inline-block; width: 100px; You can play with the width number to get the best fit for your page. NOTE: inline-block style should NOT be applied to Tabular DataPage labels/data fields. *** Changes you make in a style will affect all the pages that are using it. It is strongly recommended to make a copy of the style, apply it to your DataPage and make the changes in the copy one.
  36. 3 points
    MayMusic

    Expired Records

    Instead of the date field add an HTML Block to the Configure Results Page Fields screen and use this code: <script> if (Date.parse('[@field:DateFieldName*]') > Date.parse('[@cbTimeStamp*]')) { document.write("<div style='color:red;'>[@field:DateFieldName]</div>"); } else { document.write("[@field:DateFieldName]"); } </script> Make sure you have enabled parameters and select [@field:DateFieldName] from the picker
  37. 3 points
    caspio

    JS: Show/hide A Custom Link On Results

    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.
  38. 2 points
    Ha! I got this working. I missed the step of having to name the ID for the No Results Message in Localizations. If someone else needs to change the header message when no results are found, this is how. I found some clues using this online help page, https://howto.caspio.com/integration/map-mashup/hiding-the-map-when-no-results-are-found/ Go to Localizations and choose the language you're using, and go to #351 No Records Found. Add a custom message if there isn't already one, and put a div tag around it with an ID, mine is "norecord" for this example. Then add another div tag around the header content you want to change and also give it an ID, ID="HOW" for this example. Then add this code to the footer of your Configure Results Page Fields: Match whatever names you give the respective fields to the IDs in the code below. <script type="text/javascript"> if (document.getElementById("norecord")) { document.getElementById("HOW").innerHTML = "THE NEW CONTENT YOU WANT DISPLAYED WHEN THERE ARE NO RECORDS"; } </script> This new content will overwrite whatever content is in the <div> named HOW when the search returns no results. If you're adding HTML to the new content, you need to escape all your quotes or it won't work. I made that mistake. In a link example, it would be: <a href=\"http://mywebsite.com\">Visit my website!</a>
  39. 2 points
    Sorry for all the questions, I do search/read the topics and forum for help before posting! How would I use a single form submission to enter data into two different tables at the same time? For example, user adds a customer of his, which then creates an entry in the "Clients" table (because it is new), and also creates an entry in the"Sales_Coverage" table to create an association between him (Person) and that Client. It would be impractical to have a user enter this info into two different forms. Thank you in advance, Chris
  40. 2 points
    I found a way to do it by adding a small function to the javascript to decode html entities: <script> function decodeEntities(encodedString) { var textArea = document.createElement('textarea'); textArea.innerHTML = encodedString; return textArea.value; } // Replace [@authfield:name] accordingly with the parameter or custom value you wish. var paramValue = '[@XC_Organization]'; // Replace with the name of your field as described in your DataSource var field_name = 'XC_Organization'; /* Edits are not necessary for this part */ var i_field = document.querySelector('form[action*="[@cbAppKey]"] #InlineAdd' + field_name); i_field.value = decodeEntities(paramValue); /* To this part*/ ......
  41. 2 points
    Hello Azriel. I have similar validation in my App, I have used the JavaScript below to implement this validation. <script type= "text/javascript" > var input1 = document.querySelector('#InsertRecordValue1'); var input2 = document.querySelector('#InsertRecordValue2'); var input3 = document.querySelector('#InsertRecordValue3'); var input4 = document.querySelector('#InsertRecordValue4'); document.querySelector('#caspioform').onsubmit = function(e) { e.preventDefault(); if (input1.value.length > 0){ this.submit(); } else if (input2.value.length > 0){ this.submit(); } else if (input3.value.length > 0){ this.submit(); } else if (input4.value.length > 0){ this.submit(); } else { alert('Please fill at least one field to continue'); input.focus(); } } </script> If the code above will not work, you will need to change the '#InsertRecordValue' on the top most part of the code to the name of your field in your DataPage. To see that, just do the steps below. 1. Go to the preview of your DataPage 2. Press F12 on your keyboard, a form should be display. This is the browser developer console 3. Press Ctrl + Shift + C on your keyboard, then hover over your text field. You should be able to see its element ID, then click on this field. 4. You should be redirected to its code, just double click the id of this element. Then paste it on the JavaScript above to update it. Hope this help, if you are having an error making the code above work. Just provide me the URL of your datapage or web page and I will update it for you Regards
  42. 2 points
    Got an answer to my question (Thanks so much Francis!) I got confirmation that the "Social Login Field" is not the same as the account name or the email address. For example, the Google social login field is a text string that resembles the following: "Google:123456789012345678901" Where it's the word "Google:" followed by a 21-digit number that uniquely identifies the Google account. There is a specific set of steps necessary to obtain that information which is not yet documented on the Caspio Support site. As soon as I have a chance I will append the instructions here in case anyone else ever needs to do this as well. However, the unfortunate problem is that this doesn't actually allow the desired results to be accomplished (specifcially: limiting access to a DataPage to specific Google users only by using "ID Service only"). This is because the method that is required to obtain the Google social login field is initiated by the google user, so it can't directly be used to create a list of allowed users because this causes a catch-22 situation where the Caspio admin/developer can't know the ID Service social login field without allowing the new user to login first, and once they do so, they are automatically added to the authentication data source. Therefore you basically need to allow access to all google users in order to get their unique social id which would be used to limit their access. Classic chicken & the egg dilemma. But I have an idea for how to avoid that conundrum and am working on implementing it now. Hopefully it will work...
  43. 2 points
    Hi, The update button appears only if you have at least one editable field on the datapage. Perhaps you hide that field using rules or javascript. Anyway you can hide update button using java script. Just add header/footer and paste the following code in the footer: <script> window.onload = function hide(){ document.getElementById("Mod0EditRecord").style.visibility = 'hidden'; } </script>
  44. 2 points
    I'm trying to force a form field so that the first letter of each word is capitalized. So I have this script that I just cannot get to work. I chatted briefly with caspio support to get to where I am now, but I still can't get it to work. Here is the script that I have in my footer (Origin_City is the name of my field): <script type="text/javascript"> function displayResult() { document.getElementsByName("InsertRecordOrigin_City")[0].style.textTransform="capitalize"; } document.getElementById("caspioform").onsubmit = displayResult; </script> Here's the issue - If I use the script as is, it does not work at all. The letters don't capitalize on submit and the data does not get inserted to the db with capital letters. BUT, if I include onclick="displayResult()" in my submit button field, I can see the letters change on submit but the data still does not get saved to the db properly. Can anybody assist? Thanks in advance.
  45. 2 points
    I tried this code and it worked for me <SCRIPT LANGUAGE="JavaScript"> function concatenate() { var CompanyID = document.getElementsByName("InlineAddRed")[0].value; var Area = document.getElementsByName("InlineAddGreen")[0].value; var CompanyID_Area = CompanyID + Area; alert(CompanyID_Area ); document.getElementsByName("InlineAddallcolor")[0].value = CompanyID_Area; } document.getElementById("Mod0InlineAdd").onclick=concatenate; </SCRIPT>
  46. 2 points
    svitlanataran

    Centre for on html page

    Hi bwe, Just wrap deploy code of your Datapage between div tag and set align attribute. <!DOCTYPE html> <html> <body> <div align="center"> deploy Caspio code here </div> </body> </html> Matilda
  47. 2 points
    I have the following scenario: We have started to build an app to track vehicles in a logistics compound. One specific scenario causes some headache: Multiple vehicles are loaded onto a truck and depart all together at once What we have built: 1. Check-In of truck – new instance of load is created with loadID and truck data – works fine (table: load with attributes loadID, entry date, exit date, licence plate etc.) 2. Individual vehicles are assigned to a load = loadID is attribute of VIN – works fine (table: VIN with attributes VIN_ID, VIN, Model, entry date, exit date, loadID etc.) 3. Check-Out of truck – truck departs and timestamp etc. is captured – works fine for the truck --> update of exit date in load table Here is my problem: I need a solution to automatically update the exit date of all VINs associated to this load. I have a report showing all the vehicles of the truck. How do I now update all the individual VIN instances? There should be a functionality to loop out all the vehicles assigned to the load and update the respective exit date in the VIN table for all affected VINs. I have searched the forum for some JS solutions and tried to build up something – but nothing worked. I am relatively new to JS and need some help. To prepare the loop, how do I get the data? Which VINs have as an attribute the same loadID? What kind of code would be required? How do I create a loop which updates the timestamp data to the exitdate? Would highly appreciate if someone could lead me to an appropriate solution Kind regards Marcel
  48. 2 points
    MayMusic

    Expiration Date

    Add this code to the footer of the page. Make sure to replace "DATEFIELDNAME" with the field name you want to save this expiration date on <script> function f_date(){ var v_currentDate=new Date(); v_currentDate.setDate(v_currentDate.getDate() +10); var v_assignDate = (v_currentDate.getMonth() + 1) + "/" + v_currentDate.getDate() + "/" + (v_currentDate.getFullYear()); document.getElementById('InsertRecordDATEFIELDNAME').value = v_assignDate; } f_date(); </script>
  49. 2 points
    mbogen52

    Url With Query String Not Working

    I have read the Caspio online topic for "How to use a URL with query strings". I cannot seem to get it working. I am trying to get the following URL to work on a wix.com site: http://www.site.com/pagex?NUM=ABC123xyz I am trying to use a Single Record Update Form to display record ABC123xyz. In the DataPage, I identify the record to be updated by using the unique record ID with a parameter name @NUM. Do you see anything wrong with the syntax or have any suggestions? Thank you Mike
  50. 2 points
    I created a datapage that allows a user to search for information based upon a date range. For begin date I used "Greater than or equal to" and for end date I used "less than or equal to". Here is an example of a search that does not yield an accurate response. I enter the following information as my search parameters: Begin Date: 12/15/2014 End Date: 12/16/2014 The system will return only the records dated 12/16/2014. However there are records dated 12/15/2014 that are not returned. I double checked to make sure that the data resides in my table and it does with the correct date in the same format as all of the other days. Also if I query today's date (12/23/2014) it will not return any results although the data exists. I query today's date by entering the following: Begin Date: 12/23/2014 End Date: 12/23/2014 I don't know what I'm doing wrong, but if you have some thoughts, please share them as I do need some help. I've tried everything I can think of. BTW...my data page is a report and chart combined.
×
×
  • Create New...