Jump to content

George43

Caspio Ninja
  • Posts

    37
  • Joined

  • Last visited

  • Days Won

    4

Posts posted by George43

  1. 1)Make sure HTML editor is turned off. Advanced setting. It can cause creating unproper ASCI symbols.

    2) Paste the Code

    <div id='mydiv[@field:MyRecordUniqueID]'></div>
     <script type="text/javascript"> 
     document.addEventListener('DataPageReady', function (event) {
        if (("[@field:myfield1]" == "SHOW") && ("[@field:myfield2]" == "active")) { 
            document.querySelector("#mydiv[@field:MyRecordUniqueID]").innerHTML =`<div>[@field:myfield3!]</div>`;
        }
    }); 
     </script>

     

  2. I have tested this code with validation. You can adjust validation rules and it will be prevent delete event.

     

    <script>
    var validation = true;
    //// Validation of the Delete Button
    if (document.querySelector('input[id^="Mod0DeleteRecord"]')){
        document.querySelector('input[id^="Mod0DeleteRecord"]').addEventListener('mousedown', function(event) {
            if (1==1){
                validation = false; //YOUR Logic for the Delete Validation
            }
        });
    }
    /////
    if (document.querySelector('input[id^="Mod0EditRecord"]')){
        document.querySelector('input[id^="Mod0EditRecord"]').addEventListener('mousedown', function(event) {
            validation = true; //For Working Edit Buttons
        });
    }
    
    if (document.querySelector('input[id^="Mod0CancelRecord"]')){
        document.querySelector('input[id^="Mod0CancelRecord"]').addEventListener('mousedown', function(event) {
            validation = true; //For Working Back Buttons
        });
    }
    
    
    document.addEventListener('BeforeFormSubmit', function(event) {
    	if (!validation){
            alert('EVENT Prevented'); //Some custom alert.
            event.preventDefault();
        }
    });
    
    </script>

     

  3. You should additional check for undefined. I would like to add in this case if parameter is not set it will be Undifined.

    Please try this code.

     

    <button type="button" class="clientbutton" onclick="myFunction([@field:CG_Client_ID])">Start WO</button>
    
    <script>
    function myFunction(x) {
    
    var strUser, endUser, midUser,bUser, fUser;
    
    if (document.getElementById(x)){
        // Getting the value of the first drop-down
        var e = document.getElementById(x);
        strUser = e.options[e.selectedIndex].value;
    }
    
    if (document.getElementById('2' + x)){
        // Getting the value of the second drop-down
        var f = document.getElementById('2'+x);
        endUser = f.options[f.selectedIndex].value;
    }
    if (document.getElementById('3' + x)){
        // Getting the value of the third drop-down
        var g = document.getElementById('3'+x);
        midUser = g.options[g.selectedIndex].value;
    }
    if (document.getElementById('4' + x)){
        // Getting the value of the third dropdown
        var h = document.getElementById('4' + x);
        bUser = h.options[h.selectedIndex].value;
    }
    if (document.getElementById('5'+x)){
        //Getting the value of the fifth dropdown
        var j = document.getElementById('5'+x);
        fUser = j.options[j.selectedIndex].value;
    }
    
    window.location.replace("https://c3eku680.caspio.com/dp/e75050009fd4376eab4---------?val=" + strUser + "&val2="+endUser + "&val3="+midUser + "&val4="+bUser + "&val5="+fUser);
    
    }
    </script>

     

  4. You should add this code to the HTML block with Disabled HTML Editor just below search fields. Search field labels should contain Phone and Email parts of words. Example of the app provided below.

     

    This soulition is perfectly fit for validating search fields on Search Report Data Page

     

    <SCRIPT LANGUAGE="JavaScript">
        let validationForm = false;
        document.addEventListener('DataPageReady', function(event) {
            const searchInput= 'input[id^=Value]';
            document.querySelectorAll(searchInput).forEach(function (element, key, nodelist){
                const candidatePhone = "hone";
                const candidateEmail = 'mail';
                const searchLabelPath = nodelist[key].closest('tr').childNodes[0].childNodes[0].innerHTML;
                if(searchLabelPath.indexOf(candidatePhone)!=-1){
                            nodelist[key].maxLength = 14;
                            nodelist[key].placeholder='Type your Phone';
                            nodelist[key].onkeyup = function(keyUpEvent)
                            {
                                keyUpEvent = keyUpEvent || window.event;
                                const isCharacters=keyUpEvent.keyCode >= 65 && keyUpEvent.keyCode <= 90;
                                const isSpecial=keyUpEvent.keyCode >= 37 && keyUpEvent.keyCode <= 40;
                                if (isCharacters){
                                    this.value = this.value.substr(0, this.value.length - 1);
                                    return;    
                                }
                                const formattedValue = (this.value.replace(/[^\d]/g, ''));
                                switch(formattedValue.length){
                                    case 7:
                                        this.value = (formattedValue.substring(0,3) + "-" + formattedValue.substring(3,7));
                                        break;
                                    case 10:
                                        this.value = ("(" + formattedValue.substring(0,3) + ") " + formattedValue.substring(3,6) + "-" + formattedValue.substring(6,10));
                                        break;
                                }
                            }
                }
    
                if (searchLabelPath.indexOf(candidateEmail)!=-1){
                    nodelist[key].maxLength = 25;
                    nodelist[key].placeholder='Type your Email';
                    document.addEventListener('BeforeFormSubmit', function(event) {
                        if(nodelist[key].value.indexOf('@')==-1){
                            event.preventDefault();
                            alert('Please check your Email adress.');
                         }
                    });
                }
            })
           
    
        });
        
    
    </SCRIPT>

     

    phone_1_0_2019-Apr-12_0935.zip

  5. Please try this code. If you have any problems please provide export of your app without sensative data in order to customize more deeply.

     

    <script>
            document.addEventListener('BeforeFormSubmit', function(ev) {
        
            
            var virtual3 = +document.querySelector(`[action*="[@cbAppKey]"] [id*=cbParamVirtual3]`).innerText;
            var virtual7 = +document.querySelector(`[action*="[@cbAppKey]"] [id*=cbParamVirtual7]`).innerText;
            var virtual8 = +document.querySelector(`[action*="[@cbAppKey]"] [id*=cbParamVirtual8]`).innerText;
            var virtual11 = +document.querySelector(`[action*="[@cbAppKey]"] [id*=cbParamVirtual11]`).innerText;
            var virtual14 = +document.querySelector(`[action*="[@cbAppKey]"] [id*=cbParamVirtual14]`).innerText;
             
            
            if (virtual8 > virtual3 || virtual8 > virtual7 || virtual8 > virtual11 || virtual8> virtual14) {
            ev.preventDefault();
            alert("Error: Not enough spaces! Please chose a tour with more availability");
            }
            
            })
           
    </script>

     

  6. you should un-comment redirection

    <button type="button"  id="button[@field:RECORD_ID#]">Settle</button>
        <script type="text/javascript">
                document.addEventListener('DataPageReady', function (event) {
    
    document.getElementById('button[@field:RECORD_ID#]').addEventListener('click',()=>{
                        if(+'[@field:SHIP_ID]'==53){
                            window.location.href = 'app.mysite.com/admin/settlement/otc/?SHIP_ID=[@field:SHIP_ID]&RECORD_ID=[@field:RECORD_ID]&PORT=[@field:PORT]&DATE=[@field:DATE*]';
                        }else{
                            window.location.href = 'app.mysite.com/admin/settlement/ship/?SHIP_ID=[@field:SHIP_ID]&RECORD_ID=[@field:RECORD_ID]&DATE=[@field:DATE*]';
                        }
                    });
                });
    </script>

     

  7. 9 hours ago, BaySunshine said:

    The fields in the Search form can be referred to as Value1_1, Value2_1, Value3_1 etc in the order they are displayed.

    So, to access Value_1, you can enter: 

    document.getElementsByName("Value1_1").value or

    document.getElementByID("Value1_1").value

    Hope that helps.

    Regards,

    If you are using getElemnentsBy Name you should specify number of array element: document.getElementsByName("Value1_1")[0].value 

     

  8. Hi there I prepared an example. You can change and add conditions and URL. But logic should work if you will have difficulties just ask me. Href should be changed because they are equal now.

     

    <button type="button"  id="button[@field:id#]">Click me</button>
        <script type="text/javascript">
        //add field ID with autonmber to your report
                document.addEventListener('DataPageReady', function (event) {
                    document.getElementById('button[@field:id#]').addEventListener('click',()=>{
                        //comparing x to y redirection
                        if(+'[@field:SHIP_ID]'==53){
                            //window.location.href = 'page x url';
                            //add url links
                        }else{
                            //window.location.href = 'page y url';
                            //add url links
                        }
                        //comparing Tour Site
                        switch (+'[@field:TOUR_SITE_ID]') {
                            case 1:
                            case 2:
                            case 3: //you can add case before case 8
                            case 4:
                            case 6:
                            case 8:
                                window.location.href = "https://www.myapp.com/system/food-plan/?RECORD_ID=[@field:RECORD_ID]";
                                //url links customization
                                break;
                            case 5://you can add case before case 7
                            case 7:
                                window.location.href="https://www.myapp.com/system/food-grid/?RECORD_ID=[@field:RECORD_ID]";
                                break;
                            default: 
                                console.log('error');
                                break;
    
                            ///etc you can edit cases and so on.
                        }
                    });
                });
        
        </script>

     

  9. You should Add Event Listener on that particular Input and apply style to all child Nodes

    <script type="text/javascript">
        document.addEventListener('DataPageReady', function(event) {
            document.querySelectorAll("[name~='InlineAddemail']")[0].addEventListener('click', function(){
                if(document.querySelectorAll('.Ctnr')[0]){
                    document.getElementsByClassName('DropBox')[0].style.setProperty('width', '350px');
                    document.querySelectorAll('.Option').forEach(function(elem){
                    elem.style.setProperty('border-bottom', '1px solid black');
                    elem.style.fontFamily = 'Lucida Console';
                    });
                }
            });
        });
    </script>

    InlineAddemail is your Input name attribute. You can find it via chrome developer console.

     

  10. You should create Submission form with 2 virtual parameters and pass them on the report with pre-defined criteria

    After that, You should receive this Params in the report data page and go to the Each element and create 2 criteria for each column.

    1) Make sure that main criteria is OR between column. 

    2) On each section for the (Field=>Start  and Field <=End) .

    Example:

    (Field=>Start  and Field <=End) (Column 1)

    or

    (Field=>Start  and Field <=End) (Column 2)

    or

    (Field=>Start  and Field <=End) (Column 3)

    or

    ....

     

    P.S There is Application Example.

    Installment_Range_1_0_2019-Mar-13_1153.zip

  11. 6 minutes ago, Vilho said:

    I wonder if this is also a Lite Speed cache plugin (Wordpress) related issue as this thred. Caspio asyncs it´s script by default and then something from cache plugin disturbs datapage from loading occasionally. When cache plugin is not on none of these errors occur.

    Br, Vilho

    I recommend you to use JetPack CDN instead of other cache services. 

  12. This behavior is usual due to the fact of JavaScript asynch loading. The Data page load  not simultaneously  with the whole site. Usually, load time may vary from 100ms to 900ms, sometimes to 1500ms(1.5 sec). it's not noticeable for the customer, but for Google Crawler usual take  screenshot time is faster than data page is loaded. End-user will see Data Page, but you will have screenshot with not loaded Data Page.

  13. You should use selector and custom html block in order to write information. Document.write() is not available due to security policy of the Chrome Browser.

     

    Example of the code. You should use HTML block with disabled editor

     

    <div id='elem'>
    
    </div>
    
    <script type="text/javascript">
        var cb_boolean = '[@field:Courses_Status]';
    if(cb_boolean == 'Accepted'){
    
        if([@field:Courses_Student_Count] < [@field:Courses_Estimated_Attendance]){
            document.write("<a href='http://[@app:domain]/pm_admin/training/details/registerstudent/[@authfield:Account_regpath]index.html?Course_Number=[@field:Courses_Course_Number]' target='_blank'><b>Register Student</b></a>");
        }
        else{
            document.getElementById("elem").innerHTML="<p><b>Class Full</b></p>";
        }
    }
    </script>

     

  14. You can add Event listener to the last cascading element.  The event should on change or value not null. this event listener should in Data Page Ready inside.

     


    For Example

    
    <script type="text/javascript">
    document.addEventListener('DataPageReady', function (event) {
      	if(document.querySelector("#Value3_1_5021039762ca9d"){
               document.querySelector("#Value3_1_5021039762ca9d").addEventListener("change", function(){
              		if(document.querySelector("#Value3_1_5021039762ca9d").innerText!="No options Avaliable"){
                      	//do something
          			 }		
            	});
            }
           
    });
    </script>

     

×
×
  • Create New...