Leaderboard


Popular Content

Showing most liked content since 10/20/2017 in all areas

  1. 1 point
    Mathilda

    Multiple Search Buttons

    You may hide a standard button using the following code in the header of the search page: <style> #searchID { display:none; } </style>
  2. 1 point
    MayMusic

    Convert Text Number To Phone Format.

    @telepet Change this line document.getElementById(o_els[i]).onchange=tel; To: document.getElementById(o_els[i]).onkeyup=tel;
  3. 1 point
    I thought this might be helpful across the board for people developing in Caspio. I've been trying to do a better UI for data entry on web pages that also have to show results in a tabular report. Since iframes don't reliably pass parameters from parent to child and back it's necessary to sometimes deploy 2 datapages (a Submit or Details and a Tabular) on the same web page. This doesn't really look good from a UI perspective. This solution requires using bootstrap and jquery but it's fairly straightforward. One option is to put the the Submit/Details deploy code in the first div with something like class="col-md-3" and the Tabular deploy code in the next div with class="col-md-9" (divs in bootstrap with col classes must add up to 12 but no more than 12, in basic mode). This will put the 2 datapages next to each other, the 1st with 1/4 screen width and the 2nd with 3/4th. However, this setup looks cluttered and can constrain the Tabular report which often needs full page width to show its data clearly. So the ideal would be to onload hide/collapse the first div (with the Submit/Details form) and have the second div (tabular report) a full 12 columns wide. Then click a button or link to show the 1st div (Submit form) and change the 2nd div (tabular report) to 9 columns, thereby displaying both datapages when data entry/edit is needed. Clicking the button/link again (in this method) will collapse div1 and expand div2 back to 12 columns. So it's easy to toggle views this way. To do this: Put this in the body of your webpage (you may have bootstrap and jquery referenced differently): <div class="container-fluid"> <br> <div class="row"> <div class="col-md-3 bg-faded"> <div id="showsubmitform" class="collapse"> Caspio Deploy Code for Submit/Details form </div> </div> <div class="col-md-12" id="right"> <div> Caspio Deploy Code for Tabular Report </div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $('#btnSwitch').click(function(){ $('.col-md-3').toggleClass('show'); $('#right').toggleClass('col-md-9 col-md-12'); }) </script> And then put a button or link elsewhere on your page, wherever you want to show it: <a class="btn page-action" id="btnSwitch" href="#showsubmitform" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Submit New Data</a> When the page is loaded the Tabular Report will be the only datapage showing, in full width. When the 'Submit New Data' link is clicked the Tabular Report moves to the right and shrinks to 9 columns from 12. The space that opens on the left is 3 columns wide and will now show the Submit/Details form. When the 'Submit New Data' link is clicked again it will hide the Submit/Details form and expand the Tabular Report back to 12 full columns. You can change the column numbers of the divs and button ids and labels to suit. This solution might help with some UI massaging, if anyone is working on that aspect of their app...
  4. 1 point
    Mathilda

    Multiple Search Buttons

    try placing the following code in an html block above all the fields: <input type="submit" name="searchID" id="searchID1" value="Search" class="cbSearchButton">
  5. 1 point
    Vitalikssssss

    Table Autoscroll

    Hi cgonzalezalcala, I have been able to make this solution work in my Datapage. You should do following steps: 1. Datapage Header Insert following code: <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <div id="contain"> <style> #contain { height: 100px; overflow-y: scroll; } #table_scroll { width: 100%; margin-top: 100px; margin-bottom: 100px; border-collapse: collapse; } #table_scroll thead th { padding: 10px; background-color: #ea922c; color: #fff; } #table_scroll tbody td { padding: 10px; background-color: #ed3a86; color: #fff; } </style> 2. Datapage Footer Insert following code: </div> <script> var my_time; $(document).ready(function() { pageScroll(); $("#contain").mouseover(function() { clearTimeout(my_time); }).mouseout(function() { pageScroll(); }); }); function pageScroll() { var objDiv = document.getElementById("contain"); objDiv.scrollTop = objDiv.scrollTop + 1; $('p:nth-of-type(1)').html('scrollTop : '+ objDiv.scrollTop); $('p:nth-of-type(2)').html('scrollHeight : ' + objDiv.scrollHeight); if (objDiv.scrollTop == (objDiv.scrollHeight - 100)) { objDiv.scrollTop = 0; } my_time = setTimeout('pageScroll()', 25); } </script> This should do the trick. Cheers, vitalikssssss
  6. 1 point
    Mathilda

    generate coordinates on update

    Hi, I modified script from this article. Code for the header: <div id="cbwrapper"> Code for the footer: </div><script type='text/javascript'> var lat_id = 'EditRecordlat'; var lng_id = 'EditRecordlng'; var address_id = 'EditRecordAddress'; var city_id = 'EditRecordCity'; var state_id = 'EditRecordState'; var zip_id = 'EditRecordZip'; var wrapper_id = 'cbwrapper'; var msg1 = 'Please input a valid address'; if(typeof jQuery != 'undefined'){ var cb_geocoder = cb_geocoder = new google.maps.Geocoder(); $('#'+wrapper_id+' input[id=Mod0EditRecord]').click(function(e){ e.preventDefault(); var add = $('#'+address_id).val(); var city = $('#'+city_id).val(); var state = $('#'+state_id).val(); var zip = $('#'+zip_id).val(); if(!add || !city || !state || !zip){ alert(msg1); }else{ var full = add +','+city+','+state+' '+zip; cb_geocoder.geocode({address: full}, cbCallBack); } }); }else{ document.write('This Datapage require Standard Caspio Deployment for full functionality.'); } function cbCallBack(locResult){ if(locResult != "" && locResult.length>0){ var lat1 = locResult[0].geometry.location.lat(); var lng1 = locResult[0].geometry.location.lng(); lat1 = Number(lat1); lng1 = Number(lng1); $('#'+lat_id).val(lat1); $('#'+lng_id).val(lng1); $('#'+wrapper_id+' form').submit(); }else{ alert(msg1); } } </script> Code for the html file where the datapage is deployed: <script type="text/javascript" src="https://lib.caspio.com/pub/jquery/jquery.js"></script> <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_KEY" async="" defer="defer" type="text/javascript"></script> You should place those two lines above the deploy code of the datapage. Paste your google apikey instead of: YOUR_KEY Cheers!
  7. 1 point
    Mathilda

    resize an iframe

    I have a solution for your case. You may find code below: <script>https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } </script> <iframe src="URL_of the datapage" frameBorder="0" scrolling="no" width=100% onload="resizeIframe(this)">Sorry, but your browser does not support frames.</iframe> Don't forget to insert your URL instead of: URL_of the datapage
  8. 1 point
    abdul

    how to integrate caspio api using node js

    i want to integtrate caspio api using node js ,please guide me hot to do this...
  9. 1 point
    Hi Imooring, You can try to use the following code on your Submission Form in order to insert "+1 day" value into your Expire Date field upon user select the date in End Date field: <script> function DateAdd() { var a = new Date(document.getElementById('InsertRecordYOUR_FIELD_End_Date').value); a.setDate(a.getDate() + 1); var dd = a.getDate(); var mm = a.getMonth()+1; var yy= a.getFullYear(); var b = mm + '/' + dd + '/'+yy; // you should change an order if you use non-US localization in your Submission Form document.getElementById('InsertRecordYOUR_FIELD_Expiration_Date').value=b; } document.getElementById('InsertRecord_YOUR_FIELD_End_Date').onchange= DateAdd; </script> You should place this code into the Footer of your Submission Form. Please make sure that you have disabled HTML editor. Hope this helps.
  10. 1 point
    douvega

    Validate Date and Time

    Hi there, I just tested this code and it works on form submit. Just remember that this Caspio Form should be the only one deployed in your webpage. <script> document.getElementById("caspioform").onsubmit = function(){ var dateOutString = document.getElementById('InsertRecordDefined_Time_Out'); var dateInString = document.getElementById('InsertRecordDefined_Time_In'); var dateOut = new Date(dateOutString.value).getTime(); var dateIn = new Date(dateInString.value).getTime(); if (dateOut <= dateIn){ alert("Please enter a date and time OUT after date and time IN "); dateOutString.value = ''; document.getElementById("cbParamVirtual6").value = ""; document.getElementById("cbParamVirtual7").selectedIndex = ""; document.getElementById("cbParamVirtual8").selectedIndex = ""; document.getElementById("cbParamVirtual10").selectedIndex = ""; return false; } }; </script>
  11. 1 point
    Hi MyNameIsSean, It looks like the issue has been fixed. I have been able to create a Trigger which inserts the Timestamp value from parent table into Date&Time field. Regards, vitalikssssss
  12. 1 point
    Hi Accountability, I have noticed a syntax error in your code where you trying to reference Cascading Elements. Here is an example of the correct syntax for referencing Cascading Elements: Hope this helps.
  13. 1 point
    Hi MyNameIsSean, That is very odd behavior which I believe will be resolved in an upcoming Caspio Bridge release. In the interim, you can try to build the Triggered action as per below as a temporary workaround. Hope this helps.
  14. 1 point
    douvega

    Clearing Values in A Search Form

    Try this: <p><a onclick="clearForm()" style="cursor:pointer;">Clear Form</a></p> <script> function clearForm () { location.reload("[@cbHostPage]?cbResetParam=1"); } </script> Please note that when you search again for something, you need to get rid of "cbResetParam=1" in your URL. This is done when you redirect the page from your search form. As long as you do that, you may be fine. Let us know whether or not it works.
  15. 1 point
    Hi SongLian, I changed code for the footer, it should work now: <script> $('[name=cbParamVirtual2').change(function() { $('[name=cbParamVirtual3').val($('[name=cbParamVirtual2').val()) }); </script> <script> function replace(){ var res= document.getElementsByName('cbParamVirtual3')[0].value; var newchar = '; ' res = res.split(',').join(newchar); document.getElementsByName('cbParamVirtual3')[0].value=res; } document.getElementById("caspioform").onsubmit=replace; </script>