Jump to content

Vitalikssssss

Caspio Rockstar
 View Profile  See their activity

  • Content Count

    490

  • Joined

  • Last visited

  • Days Won

    47

Posts posted by Vitalikssssss

  4. Posted · Report reply

    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

  6. Posted · Report reply

    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

  8. Posted · Report reply

    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

  9. Posted · Report reply

    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

  10. Posted · Report reply

    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

  12. Posted · Report reply

    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

     

  14. Posted · Report reply

    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

  16. Posted · Report reply

    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

     

  20. Posted · Report reply

    Hi @aquintanilla,

    Here is possible way how you can achieve the desired functionality.

    1. Add Virtual field to the form and set a default value URL to which user will be re-directed after submit.

    1dwFGs2.png

    2. Add the following snippet in Datapage Header.

    Make sure you make changes in lines with comment ***Change  

    <script type="text/javascript">

document.addEventListener('DataPageReady', creatBtn);

//
function creatBtn () {
// Hides the Virtual field
const link = document.querySelector("#cbParamVirtual1"); //***Change Virtual1 if needed
link.style.display = 'none';
//Create a button element
const Btn = document.createElement('input');
Btn.type = 'submit';
Btn.name = 'customBtn';
Btn.classList.add('cbSubmitButton');
Btn.value = 'Custom Button'; //***Change the name of the button here
Btn.style.background = '#f51212d9'; //***Change color of the button here
Btn.addEventListener('click', function() { changeURL(link)});
//Add button next to the default Submit button
document.querySelector("div.cbSubmitButtonContainer").appendChild(Btn);

}

function changeURL(link){
//Changes URL link in Virtual field if the user clicks custom button
link.value = 'https://google.com'; //***Change URL here

}

</script>

    3. Set an action to go to New page after record submit and use Virtual field as a parameter:
    s57Ygdf.png

     

    Hope this helps.

    Regards,

    vitalikssssss

     

  21. Posted · Report reply

    Hi @ahmedramadan,

    Perhaps you may try the following code snippet: 

    <script type="text/javascript">
  
document.addEventListener('DataPageReady', initGeolocation);
                          
                          
     function initGeolocation()
     {
        if(navigator.geolocation)
        {
           // Call getCurrentPosition with success
           navigator.geolocation.getCurrentPosition(success);
        }
        else
        {
           alert("Sorry, your browser does not support geolocation services.");
        }
     }

     function success(position)
     {
		//Change to EditRecord for an update form

		//Current_Long and Current_Lat should change to reference correct field names
         document.getElementById("InsertRecordLong").value = position.coords.longitude;
         document.getElementById("InsertRecordLat").value = position.coords.latitude;
       	 document.removeEventListener('DataPageReady', initGeolocation);
     }
 </script>

    Regards,

    vitalikssssss

×
×
  • Create New...