Jump to content

Vitalikssssss

Caspio Evangelist
  • Content Count

    522
  • Joined

  • Last visited

  • Days Won

    52

Posts posted by Vitalikssssss

  1. Hi @BillW,

    There is a small error in this part of your code.

    image.png

    There is no "value" attribute available for element Calculated value because value is rendered within a <span> tags.

    You would need to use "InnerHTML" property to get the text value of Calculated field.

    So, above line of code should look like this:

    let fan = document.getElementById("InsertRecordODE_Fan_TIR").innerHTML;

    Hope this helps.

    Regards,

    Vitalikssssss

  2. Hi @Elderberg,

    I would like to share a different approach, so instead of using a submit() function I have used the click() function on Submit button to mimic submit event.

    Also, it is possible to use AppKey of the Datapage in order to submit the particular Datapage if more than one is deployed.

    <script type="text/javascript">
    document.addEventListener('BeforeFormSubmit', function (event) {
      
    if (event.detail.appKey == 'XXXXXXXXXXXX') { 
      
    event.preventDefault();  
      
    //do smth before Submit
      
    document.querySelector(`#Submit${event.detail.uniqueSuffix}`).click();
      
    }
    
    });
    </script>

    Hope it helps.

    Regards,

    vitaliksssss

  3. Hi @asesores,

    That is very interesting question.

    I come up with a workaround which would allow to create a cross join between 2 tables in Caspio.

    Basically, you would need to add an additional field in both tables and specify the identical values for all records. 

    Table #1

     image.png

    Table #2

    image.png

    Create a View with Full Outer Join by the Join Field:

    image.png

    Here is a result which you shall have:

    image.png

     

    Hope this helps.

    Regards,

    vitalikssssss

     

  4. Hi @Joanne,

    the way how you reference fields is incorrect for Inline Edit action of Tabular report and also you need to use a special event to capture the moment then user clicked on Edit/Update button/link.

    You may try to use the following snippet, however make sure that name of the fields are correct and have prefix "InlineEdit".

    <script>
    
    document.addEventListener('DOMSubtreeModified', function(){
    
      
       let element = document.querySelector('[id*="InlineEdit"]');
    
       if (element) {
    
        let regExp = /^[0-9]+$/;
         
        //Change the name of the fields 
         
        let arrEl = Array.from(document.querySelectorAll('[id*="InlineEditPhone"], [id*="InlineEditEmergencyPhone"], [id*="InlineEditPhone3"]')); 
     
        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, ''));
         
            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>

    Hope this helps.

    Regards,

    vitalikssssss

  5. Hi @JMR21,

    You would need to add a line of code which would click on Search/Submit button after user clicks Clear Form, so it could pass empty string parameters to other Datapages.

    So, the JS snippet could look like this:

    <button type="button" onclick="resetForm()">Clear Form</button>
    
    
    <script>
    function resetForm() {
      
        var myForm = document.querySelector('form[action*="[@cbAppKey]"]').querySelectorAll('input:not([type=submit]):not([type=hidden]), textarea, select');
        myForm.forEach(function(elem) {
        elem.value="";
      });
        var searchBtn = document.querySelector('.cbSearchButton').click();
    }
    </script>

    Regards,

    vitalikssssss

  6. Hi,

    I have recently tried to do something similar and came across the issue that custom button cannot serve delete event, so I have modified a script slightly.

    Here is my button in HTML block:

    <input class="cbDeleteButton" id="Mod0DeleteRecord1" name="Mod0DeleteRecord" type="submit" value="Delete" />

     and here is my code from the DataPage Footer:

    <script>
    document.addEventListener('DataPageReady', assignEvent);
    
    function assignEvent(event){
    
      //assign click event to custom button
      document.querySelector('#Mod0DeleteRecord1').addEventListener('click', ()=>{handler(event.detail.uniqueSuffix)});
      //hide default button
      document.querySelector(`#Mod0DeleteRecord${event.detail.uniqueSuffix}`).style.display = 'none';
     
      document.removeEventListener('DataPageReady', assignEvent);
    
    
    }
    
    function handler(el){
      //click on default delete button
      document.querySelector(`#Mod0DeleteRecord${el}`).click();
    
    }
    </script>  

    Hope it helps someone.

    Regards,

    vitalikssssss

  7. Hi @jrifkin,

    Glad that heard that solution has helped.

    Here is updated version which would also capture the file extension.

    Please note that you should use the following naming convention for your fields which would store extension: File_1_ext  File_2_ext  File_3_ext etc
     

    <script type="text/javascript">
    document.addEventListener('DataPageReady', fileInputEvent)
    
    function fileInputEvent() {
    
     const fileFields = ['File_1', 'File_2'];
     
    
     fileFields.forEach(el=>{
       document.querySelector(`#InsertRecord${el}`).addEventListener('change', fileInputHandler);
     });
    
     document.removeEventListener('DataPageReady', fileInputEvent)
    }
    
    function fileInputHandler(event) {
    
     //Store file size
    
     const fileSizeInput = document.querySelector(`#${event.target.name}_size`); 
     fileSizeInput.value = event.target.files[0].size;
     
    //Store file extension
    
    const fileSizeExt = document.querySelector(`#${event.target.name}_ext`); 
     fileSizeInput.value = event.target.files[0].name.split('.').pop();
     
    
    }
    
    </script>

    Regards,

    vitalikssssss

  8. Hi @JMR21,

    The above code needs to be updated since now all Caspio Datapages have AJAX and special event handler "DataPageReady".

    You may try the following updated JavaScript:

    <script>
    
    document.addEventListener('DataPageReady', assignEvent);
    
    function formatAsDollars(el) {
    el.value = el.value.replace(/[^\d]/g,'').replace(/(\d\d?)$/,'$1').replace(/^0+/,'').replace( /\d{1,3}(?=(\d{3})+(?!\d))/g , "$&,");
    el.value = el.value ? '$' + el.value : '';
    }
    
    function assignEvent(){
    
    let fields = ["Field_1", "Field_2"]; //specify your fields here
    
    fields.forEach(element => {
        element = "InsertRecord" + element; // replace "InsertRecord" with "EditRecord" for Details/Single Record Update DP 
        document.getElementById(element).onkeyup = function() {
            formatAsDollars(this);
        }
        document.getElementById(element).onchange= function() {
            formatAsDollars(this);
        }
    });
    
    }
    
    </script>

    Regards,

    vitalikssssss

  9. Hi @jrifkin,

    It is possible but you need to follow certain naming convention:

    1. Files fields you need to name them as:  File_1, FIle_2, File_3 ...

    2. File size fields should be named as: File_1_size, File_2_size, File_3_size ...

    Here is a slightly modified JavaScript provided by @Hastur:

    <script>
      
    document.addEventListener('DataPageReady', fileInputEvent)
    
    function fileInputEvent() {
    
     const fileFields = ['File_1', 'File_2']; //add more file fields if needed
     
    
     fileFields.forEach(el=>{
       document.querySelector(`#InsertRecord${el}`).addEventListener('change', fileInputHandler);
     });
    
     document.removeEventListener('DataPageReady', fileInputEvent)
    }
    
    function fileInputHandler(event) {
    
     
     const fileSizeInput = document.querySelector(`#${event.target.name}_size`); 
     fileSizeInput.value = event.target.files[0].size;
    }
    
    </script>

    You may change InsertRecord prefix to EditRecord in order to use this JavaScript in Details/Update Datapages.

    Hope this helps.

    Regards,

    vitalikssssss

     

  10. Hi @mhand,

    You may try to use the following JavaScript snippet:

    <script>
    document.addEventListener('DataPageReady', eventHandler);
    
    function eventHandler(){
    
    document.querySelector('input[name="cbParamVirtual4"]').addEventListener('change', copyFields);
    document.querySelector('input[name="cbParamVirtual5"]').addEventListener('change', copyFields);
    
    }
    
    function copyFields(e){
    
       const element = e.target.name;
       if(element === "cbParamVirtual4"){
    
          document.querySelector('#cbDSField1').value = e.target.value;
    
       } else if (element === "cbParamVirtual5") {
          document.querySelector('#cbDSField2').value = e.target.value;
       }
    
    }
    </script>

    Regards,

    vitalikssssss

  11. Hi @CraigSZ,

    Here is a page which has a Chart page dynamically rendered depending on which button was clicked.

    You would need to have some div element which would serve as a container for updated Datapage.

    <div id="datapage-container"></div>

    Here is a code which I have in Datapage.

    1. HTML block with buttons:

    <div class="buttons"><input id="[@field:Name]" type="button" value="Sales in Eastern region"></div>
    <br>
    <div class="buttons"><input id="[@field:Name]" type="button" value="Sales in Central region"></div>

    2. JavaScript snippet which render Datapage and also pass parameters:

    <script type="text/javascript">
     
    document.addEventListener('DataPageReady', addEvents);
    
    //Add event listeners to buttons
    
    function addEvents(){
    
        const buttons = document.querySelectorAll("input[type='button']");
    
        buttons.forEach(element => {
            element.addEventListener('click', showDp)
        });
    
    }
      
    //Checks which button is clicked and pass different parameters
      
    function showDp(e){
        if(e.target.value.includes('Eastern')){
          createPage('Eastern', e.target.id);
        }
        else if (e.target.value.includes('Central')){
            createPage('Central', e.target.id);
        }
    }
    
    //Removes old DataPage if it exist and creates new one  
      
    function createPage(par1, par2) {
            
        const newDataPage = document.createElement('script');
        const container = document.querySelector('#datapage-container');
        newDataPage.src = `https://xxxxxx.caspio.com/dp/xxxxxxxxxxxxxxxxxxxxxxxx/emb?region=${par1}&name=${par2}`; //Deploy code of new Datapage 
        //Checks if there is a DP rendered already
        if(container.firstChild){
            //Removes datapage if it already exist
            while(container.firstChild){
                container.firstChild.remove();
            }
            //Adds new datapage
            document.getElementById('datapage-container').appendChild(newDataPage);
        } else {
        document.getElementById('datapage-container').appendChild(newDataPage);
        }
    }        
     </script>

    Hope this helps.

    Regards,

    vitalikssssss

     

×
×
  • Create New...