Jump to content

TellMeWhy

Caspio Guru
  • Posts

    239
  • Joined

  • Last visited

  • Days Won

    21

Reputation Activity

  1. Like
    TellMeWhy got a reaction from SinJunYoung in Calculated Field Date   
    Here's the conversion codes
    You can also try changing the formatting, should definitely be doable there, however, it's just for display, value would still be the same.,
  2. Like
    TellMeWhy got a reaction from Mollie in Working with arrays in JavaScript   
    What's your goal here?

    I have the following : 
    <script> document.addEventListener("DataPageReady", function arrays(){ var arr = [1,2,3,4]; var arrblnk=[]; var val = 2; var position = arr.indexOf(val); for (i=0; i <= position; i++){ arrblnk.push(arr[i]); } }); </script> the array - arr
    A blank array - arrblnk
    the value in the array - val
    position of that value in the array - position
    for loop will go through each value until the position, and then 'push' insert the values in the blank array up until the said value
  3. Like
    TellMeWhy got a reaction from Cherry in Move the search button inline with the field like in the picture attached   
    Alternatively, you can use the following: 
    <style> .cbSearchButtonContainer{ grid-row: 1 !important; grid-column: 5 / span 4 !important; padding-top:30px !important; } </style> row depends on what row you want to put it to.
    Column depends on the position on the specific row, just play with it, keep the span to 4
    padding is just to adjust the specific position in the column and row
     
    Sample:

  4. Like
    TellMeWhy got a reaction from Cherry in How to display the latest customer as 'New Customer' + a few information of the new customer in the header.   
    1.) Create Calculated Field:
    STUFF((SELECT TOP 1 ', ' + (COLUMNAME1)+', '+ (COLUMNNAME2) FROM TABLENAME ORDER BY COLUMNNAMEOFDATE DESC FOR XML PATH ('')), 1, 1, '') This will get one record that has the latest DATE according to DATE column.
    If you want to append more columns, just add like +','+(COLUMNNAME3). If the column is not Text(255) DataType, use Convert (+','+ CONVERT(VARCHAR, COLUMNNAME3))
     
    2.) Create this div in Header, same ID, Disable Advanced HTML Editor

     
    3.) FOOTER SCRIPT:
    <script> var x = document.querySelector("table[id^='cbTable_']").rows[1].cells[1].innerHTML; var container = document.getElementById("customer-info"); container.innerHTML=x; </script> This just gets 2nd row, and 2nd column of the table (HEADER included), my Calculated Field is the 2nd field in my DataPage Settings that's why I use cells[1], you may change depending on the position of the Calculated Field, counting starts from 0


    Hide Column in Tabular Report to Hide Calculated Field: 
     
  5. Thanks
    TellMeWhy got a reaction from Catra in No Style Sheet   
    Remove all code here

  6. Thanks
    TellMeWhy got a reaction from pmcfarlain in Set Hierarchy of Importance For Background Color   
    seems like you're missing 
    var elems = isi.parentNode.parentNode.querySelectorAll("td"); it's set just above the for loop
  7. Like
    TellMeWhy got a reaction from pmcfarlain in Don't Allow Prior Dates on Submission Form   
    Not sure if what I understood is correct, but, you can try this, create a Calculated Value, this is to check if the date today is less than 5 or not. If it's 1, user can input any date, if it's 0, only on the current month and later.
    CASE WHEN DATEPART(day, GetUTCDate()) <5 OR (DATEPART(day, GetUTCDate()) >= 5 AND DATEPART(month,GetUTCDate()) <= DATEPART(month, [@field:Date])) THEN 1 ELSE 0 END Script on the footer: (change the number on cbParamVirtual1 depending in your Virtual Field)
    <script> document.addEventListener("BeforeFormSubmit", function(e){ var a= document.querySelector("input[name='cbParamVirtual1']").value; if (a == 0){ e.preventDefault(); alert("Please input Date within or after the current month"); } }); </script>  
     
    If you want this to trigger on change of the field that is being used in the Calculated Field.
    Change the InsertRecordFIELDNAME to your actual field's id
    cbParamVirtual1 to your Virtual Field's name if it's 1 2 3 or whatevers
    <script> document.getElementById("InsertRecordFIELDNAME").addEventListener("change", function(e){ document.querySelector("input[name='cbParamVirtual1']").addEventListener("change", function checker(){ var a= document.querySelector("input[name='cbParamVirtual1']").value; if (a == 0){ //if Calculated Value is 0 then alert alert("Please input Date within or after the current month"); //add another code } this.removeEventListener("change",checker); }); }); </script>  
  8. Thanks
    TellMeWhy got a reaction from lengleng in Redirect on Authentication Failure   
    It's pretty easy, just add ELSE on the code and use auto submit 
     
    <script type="text/javascript"> document.addEventListener("DataPageReady", function tester(){ if(document.getElementById("errormessage")){ window.location.href = "https://www.google.com"; } else{ setTimeout('document.forms["caspioform"].submit()',1000); } }); </script> In my code I removed the display none, but, you can include that since you wouldn't want your users to be seeing that anyway, you can also reduce the 1000 delay to a faster one, but I think that's fast enough and if you have display none, it will be alright.
  9. Thanks
    TellMeWhy got a reaction from lengleng in Redirect on Authentication Failure   
    Yeah, you actually can, but, I found that it's better to create your own element with a unique ID so you can reference the ID instead of the class
     

     
    I have then added an HTML Block in the authentication fields, and NOT the footer because footer and header code gets removed when the Failure Message appears, apparently.
    <script type="text/javascript"> document.addEventListener("DataPageReady", function tester(){ if(document.getElementById("errormessage")){ window.location.href = "https://www.google.com"; } }); </script>  
  10. Thanks
    TellMeWhy got a reaction from DDLiving in Change Text color of Back Button   
    You can also use F12 > click on the cursor thingy > click on the element that you want to change the style and you should be able to see what class it belongs to

     
    Go to Styles > Source > All, press ctrl + f and input the class there


  11. Thanks
    TellMeWhy got a reaction from jimcanto in Change Text color of Back Button   
    You can also use F12 > click on the cursor thingy > click on the element that you want to change the style and you should be able to see what class it belongs to

     
    Go to Styles > Source > All, press ctrl + f and input the class there


  12. Like
    TellMeWhy got a reaction from kpcollier in Conditionally Hide Fields In Calendar Datapage   
    Ah, it's Calendar, so it should work the same as this https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/
     
    You need to use a unique field for the ID, just append different text for different elements
    Here's an example:

     

  13. Thanks
    TellMeWhy got a reaction from Benades in Stacked Area Chart Colors   
    Try JS instead,
     
    <script type = "text/javascript" > var timer = setInterval(function() { //Find if chart exists using rect element every x milliseconds if (document.getElementsByTagName('rect') != null) { //Update Chart UpdateChart(); } }, 500); function UpdateChart() { try { Highcharts.charts[0].update({ //CHANGES HERE series: [ {color:'red'}, {color:'blue'}, {color:'yellow'} ] //CHANGES END HERE }); //Stop checking clearInterval(timer); } catch (err) { //log errors } }; </script> basically makes the first one red, then blue, then yellow
     
    No script:

     
    With the script

  14. Thanks
    TellMeWhy got a reaction from kpcollier in Date Specific New Record Links In Weekly Calendar   
    Try this, this should work on both Monthly and weekly 
    I added if else in the beginning part since the li.cbResultSetCalendarCaption > time only exists on the Month Variation, else, it would go Weekly Variation.

    Just change the URL at the last part with your proper URL
    <script> document.addEventListener('DataPageReady', function (event) { event.stopImmediatePropagation(); var month = ""; if(document.querySelector("li.cbResultSetCalendarCaption > time")){ var allSpanTags = document.querySelector("li.cbResultSetCalendarCaption > time"); month = allSpanTags.innerHTML; } else{ var allSpanTags = document.querySelector("li.cbResultSetCalendarCaption"); month1 = allSpanTags.innerHTML; var year = month1.substr(month1.length - 4); var month2 = month1.split(" ")[1]; var month = month2 + ' ' + year; console.log(year); console.log(month2); console.log(month); } month = month.replace(/January /gi,"1/Day/"); month = month.replace(/February /gi,"2/Day/"); month = month.replace(/March /gi,"3/Day/"); month = month.replace(/April /gi,"4/Day/"); month = month.replace(/May /gi,"5/Day/"); month = month.replace(/June /gi,"6/Day/"); month = month.replace(/July /gi,"7/Day/"); month = month.replace(/August /gi,"8/Day/"); month = month.replace(/September /gi,"9/Day/"); month = month.replace(/October /gi,"10/Day/"); month = month.replace(/November /gi,"11/Day/"); month = month.replace(/December /gi,"12/Day/"); var allHTMLTags = new Array(); //Create Array of All HTML Tags var allHTMLTags = document.getElementsByTagName("div"); //Loop through all tags using a for loop for (i=0; i<allHTMLTags.length; i++) { //Get all tags with the specified class name. if (allHTMLTags[i].className == "cbResultSetCalendarField") { var transfer = month.replace(/Day/gi,allHTMLTags[i].innerHTML); /*Begin Add New Link Section*/ allHTMLTags[i].innerHTML = allHTMLTags[i].innerHTML +'<br><a style="text-decoration:none;" href="URL?Date='+transfer+'">Add New</a>'; /*End of Add New Link Section*/ } } }); </script>  
  15. Thanks
    TellMeWhy got a reaction from eunha in Parameters through Query String getting cut off   
    That's kind of a strange workflow, why receive an ID in a Submission Form? Is this just to connect the record to the main one?
    If that's so, trigger should be the best way to do this. If you want it displayed, it gets more complicated. You will need Cascading Form Elements. However, there's no Cascading Text Area, so, we will need a JavaScript for this
    Steps:
    1. Just pass the ID of the Record on your Details Page. (<a href="https://c2aby549.caspio.com/dp/83ff8000b539c247760a46d6aa9b?Receive_ID=[@field:ID]" target="_blank">Pass Parameter</a>)
    2. On your Submission Form, receive the ID, and on the other fields, use Cascading TextFields


     
    For your Text Description, since there is no Cascading Text Area, you will need a Virtual Field to get the Text(64000) Field

    You can do this on the Description field itself, however, if you want to display it on a Text Area, you will have to use a JavaScript.
    On your footer, paste this code
    <script>
    document.querySelector("input[id^='cbParamVirtual1']").addEventListener("change", function(e){
    document.getElementById("InsertRecordDescription").value = document.querySelector("input[id^='cbParamVirtual1']").value;
    });
    </script>

     
    Change the number on cbParamVirtual1 depending on your Virtual Field. If it's a Virtual2 change it to cbParamVirtual2.
    Change InsertRecordDescription to your actual field name, for example if it's called 'Notes' it would be  InsertRecordNotes
    Here's a Sample DataPage I made with this
    https://c2aby549.caspio.com/dp/83ff8000ee1d2b9fd7e747528f32
     
  16. Thanks
    TellMeWhy got a reaction from Benades in Calling Hidden Calculated Fields   
    ah, well, then we have to change the code a little, try this, this should now work depending on the formatting set.
     
    document.getElementById('test3').innerHTML = document.querySelector("span[id^='cbParamVirtual1@Data']").innerHTML; Just change the Virtual1 part with the proper one, Virtual2, 3, etc.

  17. Thanks
    TellMeWhy got a reaction from Chikitaisaac123 in Custom script changing field value   
    Not sure, as well, but I have difficulties in using button tag on Caspio as it 'clicks' the submit button, as well. Try to use <input type="button> or <a> tags instead of <button> and just style them the same.
  18. Thanks
    TellMeWhy got a reaction from Benades in Calling Hidden Calculated Fields   
    Here's a sample HTML Page, embed code for details page is at the top.
     

     
    Here's the code that I used
     
    window.addEventListener('load', function() { document.querySelector("input[name='cbParamVirtual1']").addEventListener('change', function() { document.getElementById('test3').innerHTML = document.querySelector("input[name='cbParamVirtual1']").value; }); }, false); first line is to wait everything to load in the page.
    2nd line is change because Calculated Values/ Fields 'loads' when the DataPage is loaded, so it changes during that time,
    3rd line is the script, I added id="test3" on the span for 225.21 so I can put the value there.
    You don't need to repeat this multiple times, just get the Calculated Value that may take the longest to load and use that for the addEventListener, then set the innerHTML of multiple elements inside just like what I did.
     

     
  19. Thanks
    TellMeWhy got a reaction from kpcollier in Remove from dropdown if value has been taken on date   
    This is quite tricky, basically, you have lookup table for assistants, and they can only be booked PER DAY, and if they're booked for that date already, then they're not selectable in the dropdown.
     
    Here's what I tested
     
    Virtual Field 1
    STUFF( (SELECT ' , ' + CAST (FIELDNAME AS nvarchar) FROM TABLENAME WHERE DATEFIELD = target.[@field:DateFIELD] FOR XML PATH ('')) , 1, 2, '') What this does is combine all records that meet the criteria. We want to use this to select values where the date is the specific date that the user is booking.

    For example here, I'm using June 28 2021 as the date and the three values showed up.
     
    Virtual 2 is a Custom and LookUp Table Dropdown
     
    Script
    <script> document.querySelector("input[name='cbParamVirtual1']").addEventListener("change", function(event){ var d2 = document.getElementById("cbParamVirtual2"); var a= document.querySelector("input[name='cbParamVirtual1']").value; for (var i=0; i<d2.length; i++) { if (a.includes(d2.options[i].value)){ d2.options[i].remove(); } else { d2.options[i].style.display = "block"; } } }); </script>  
    What this script does is loop through the options in dropdown and check if 'a' (or the Virtual 1 Calculated Value) includes the said option then removes it from the dropdown.

    I hope this helps!
     
     
  20. Like
    TellMeWhy got a reaction from jimcanto in Site Recommendations   
    GoDaddy uses iframe for embedding outside content, which is kinda hard to integrate, same as Wix, Weebly has some builders that use iframe as well, but the standard one does not, so, it should be fine
  21. Like
    TellMeWhy got a reaction from Joemac in datapage change in wordpress iframe   
    Most probably your WordPress Theme, it applies CSS to the elements that Caspio did not.
     
     
  22. Like
    TellMeWhy got a reaction from kpcollier in Download data align to search button of reports   
    I guess you can do this on JavaScript


     
    This only works when Results page are below the Search Form.
     
    <script> var downloadbtn = document.querySelector("nav[id^='PageActionsCtnr']"); var newpos1= document.getElementsByClassName('cbSearchButtonContainer')[0]; var searchbtn = newpos1.getElementsByClassName('cbSearchButton')[0]; newpos1.appendChild(downloadbtn); downloadbtn.appendChild(searchbtn); </script>  
  23. Like
    TellMeWhy got a reaction from pmcfarlain in Vertical Column Headers   
    <style>
    [class*="cbResultSetHeaderCell"]{
    text-align:center !important;
    vertical-align:center !important;
    }
    .cbResultSetLabel:nth-child(2) {
    writing-mode:vertical-rl;
    transform: rotate(180deg);
    border:none;
    }
    </style>
     
    You can try this, you'll have to manually set the number of that header, if you want 2 and 3, you'll do .cbResultSetLabel:nth-child(2), .cbResultSetLabel:nth-child(3) 

    Just separate with comma
  24. Thanks
    TellMeWhy got a reaction from pmcfarlain in Grid edit by default   
    Try this one, this will only run once, when the DataPage is loaded, after that, it will not run anymore unless you refresh
     
    <script> document.addEventListener("DataPageReady", function(e){ var gridEditButton = document.querySelector("a[data-cb-name='GridEditButton']"); gridEditButton.click(); }); </script> This is much simpler method than the one above. That's to force Grid Edit. You don't need the other script for this, just the style, maybe
  25. Thanks
    TellMeWhy got a reaction from ronbrumbarger in Missing time entry application / finding missing records...   
    Oh, you don't have to! Appreciate it, though! Hope it works for you.
×
×
  • Create New...