Jump to content

markItUp

Members
  • Posts

    3
  • Joined

  • Last visited

Reputation Activity

  1. Like
    markItUp got a reaction from Kurumi in Highlight Search Term(S) In Results Page   
    Hey, this works! I had to rename my table but it works. Thank you very much!
    Below is the code I used just incase it is needed in the future.
    - In the Search and Report Wizard - Configure Search Fields in the Header
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script> - In the Search and Report Wizard - Configure Results Page Fields in the Footer
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script> <script> document.addEventListener('DataPageReady', function (event) { let searched = document.querySelector("input[name='Value1_1']").value; if (searched !== "") { var instance = new Mark(document.querySelector("table[class*='cbResultSetTable']").tBodies[0]); instance.mark(searched); } }); </script>  
  2. Like
    markItUp 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.
×
×
  • Create New...