Jump to content

bradleyqz3

Members
  • Posts

    0
  • Joined

  • Last visited

Reputation Activity

  1. Like
    bradleyqz3 reacted to caspio in JS: Format tabular display on result page in four ways   
    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.
  2. Like
    bradleyqz3 reacted to caspio in JS: Perform a calculation on values entered in a WebForm   
    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.
  3. Like
    bradleyqz3 reacted to RadhikaChopra in Issue With Password Change In Authentication Pages   
    Hi All,
     
    I am working on Caspio and am using a login page, which uses the authentication details of certain people, by authenticating their Usernames and Passwords...which are being verified using a table.
     
    Is there a way where the users can dynamically change their passwords on a form page , and it will automatically get updated in the table linked to it?
     
    Please help!
     
    Thanks
     
  4. Like
    bradleyqz3 reacted to saragraphs in Pdf Or Print Button   
    Can you explain why a print or PDF button is a special services cost? Are there any workarounds?
  5. Like
    bradleyqz3 reacted to caspio in JS: Subtract two date values and store the difference   
    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.
  6. Like
    bradleyqz3 reacted to caspio in 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.
     
     
  7. Like
    bradleyqz3 reacted to caspio in 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.
  8. Like
    bradleyqz3 reacted to caspio in JS: Calculate column sum in the result page   
    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.
  9. Like
    bradleyqz3 reacted to caspio in JS: Concatenate/Combine two fields into one field   
    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.
×
×
  • Create New...