Jump to content

Search the Community

Showing results for tags 'JavaScript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Caspio Bridge
    • Caspio Apps for Ukraine
    • General Questions
    • Caspio JavaScript Solutions
    • Tables, Views and Relationships
    • Import/Export and DataHub
    • DataPages
    • Deployment
    • Security, Authentications, Roles, SAML
    • Styles and Localizations
    • Parameters
    • API and Integration
    • Calculations and aggregations
    • User JavaScript and CSS Discussions

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Website URL






  1. I am using Laravel as backend and bootstrap as frontend I am using transaction ID from orders in table. Now if user clicks on that transaction ID, then I want to display the order on Bootstrap Modal... Here is code of Frontend : <table id="example" class="table table-striped table-bordered " cellspacing="0" width="100%"> <thead> <tr class="bg-info"> <th><center>Transaction ID </center></th> <th><center>Shop Name </center></th> <th><center>Sales Man </center></th> <th><center>Processed ? </center></th> </tr> </thead> <tbody align="center"> @foreach ($ordersList as $order) <tr id = "tr_{{$order->id}}"> <a> <td id="{{ $order->transaction_Id }}" data-toggle="modal" data-target="#modal{{$order->transaction_Id}}" style="cursor:pointer;color:blue" onclick="getCollapseData(id)"><u> {{ $order->transaction_Id }} </u></td> <td>{{ $order->Shop }}</td> <td>{{ $order->Sales }}</td> <td> <input id="chk_{{ $order->id }}" type="checkbox" name="is_Processed" onclick="orderProceesed(id)"><br> </td> </a> </tr> <!-- Modal --> <div class="modal fade" id="modal{{$order->transaction_Id}}" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> </div> </div> </div> @endforeach </tbody> </table> here is code of JavaScript Function : function getCollapseData(data) { //alert(data); $.ajax({ method : "GET", url: "orders.getCollapseData", data: {id: data}, success : function(response) { //alert(response); //$("#collapse"+data).empty(); //debugger; document.getElementById("modal"+data).innerHTML = ""; var receivedData = response; var html = ''; //alert("modal"+data); html += '<div class="modal fade" id="modal'+ data +'" role="dialog">'; html += '<div class="modal-dialog">'; //<!-- Modal content--> html += '<div class="modal-content">'; html += '<div class="modal-header">'; html += '<button type="button" class="close" data-dismiss="modal">&times;</button>'; html += '<h4 class="modal-title">'+ data +'</h4></div>'; html += '<div class="modal-body">'; html += '<table class="table table-striped table-bordered " cellspacing="0" width="100%">'; html += '<thead>'; html += '<tr class="bg-info">'; html += '<th><center> Product Name </center></th>'; html += '<th><center> Quantity </center></th>'; html += '</tr></thead>'; html += '<tbody align="center"><tr>'; for(i=0;i<response.length;i++) { html += '<td>' + receivedData.Product + '</td>'; html += '<td>' + receivedData.qty + '</td>'; } html += '</tr></tbody></table></div>'; html += '</div></div></div>'; document.getElementById("modal"+data).innerHTML = html; } }); } I am missing something and modal is not getting displayed
  2. Hopefully someone can look at this particular scenario and show how to open the popup in modal with an overlay background. A couple issues: I cannot use an iframe for the popup content (passing parameters to a Caspio datapage, which doesn't work smoothly via iframe). Nor can I use a div for the content (because it's an entirely different datapage) that's in the same datapage as the button that creates the popup. So I need to open an entirely new url in a window, as a popup. The new url (web page) will have a datapage embedded. The code below does this fine but I also need it to make the popup modal (with an overlay background around it, if possible). Does anyone know how to tweak this code to make the new window popup modal? Thanks for any help! Here's the button that is in an html block in a tabular datapage: <button class="btnew" type="button" onclick=" edititem('https://edit-item?ItemID=[@field:ItemID]', 'web', 1200, 900);"><span><i class="fa fa-pencil" aria-hidden="true"></i> Edit</span></button> And here is the js that is in the same html block that creates the actual popup with the relevant web page. This works well, I just need to make the popup modal. function edititem(myURL, title, myWidth, myHeight) { var left = (screen.width - myWidth) / 2; var top = (screen.height - myHeight) / 4; var myWindow = window.open(myURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + myWidth + ', height=' + myHeight + ', top=' + top + ', left=' + left); }
  3. I am trying to format multiple fields on a page. The first is the phone number, which I found the JavaScript for on the JavaScript forum. My issue is that I need to format phone number, social, and a tax-ID on one page and I am unsure how to accomplish this task. For phone number I am using the script below, plus I found another for formatting a social on StackExchange, but my JavaScript reading/writing skills are sub-par and I did not combine these correctly. Then I want to add in the option to format the tax ID as well, which is ##-####### (2 digits, dash, 7 digits). <SCRIPT LANGUAGE="JavaScript">function f_a(v_id){return document.getElementById(v_id);}f_a('EditRecordPhone_Number').maxLength = 14;f_a('EditRecordPhone_Number').onkeyup = function(v_e){v_e = v_e || window.event;if (v_e.keyCode >= 65 && v_e.keyCode <= 90){this.value = this.value.substr(0, this.value.length - 1);return false;}else if (v_e.keyCode >= 37 && v_e.keyCode <= 40){return true;}var v_value =(this.value.replace(/[^\d]/g, ''));if (v_value.length==7) {this.value = (v_value.substring(0,3) + "-" + v_value.substring(3,7));}else if(v_value.length==10){this.value = ("(" + v_value.substring(0,3) + ") " + v_value.substring(3,6) + "-" + v_value.substring(6,10));};}function(){document.getElementById("SSN").onkeyup = function() {var val = this.value.replace(/\D/g, '');var newVal = '';if(val.length > 4) {this.value = val;}if((val.length > 3) && (val.length < 6)) {newVal += val.substr(0, 3) + '-';val = val.substr(3);}if (val.length > 5) {newVal += val.substr(0, 3) + '-';newVal += val.substr(3, 2) + '-';val = val.substr(5);}newVal += val;this.value = newVal;};</SCRIPT>
  4. Hello All, Does anyone have any tricks or scripts to prevent copy/paste and right click on a DataPage. I understand that most scripts may be browser dependent, but just looking to make it a bit more difficult for users to copy things. Thanks in advance
  5. Hello Caspio Family, Unfortunately, Caspio doesn't have a feature that would allow validating the date before the Submission Form. The only way I found using Caspio standard features is to show a warning message when the date doesn't fit the condition (e.g. when the date should not be prior to today). You can do that with the help of rules. I will show you an example with two dates 'Start Date' and 'End Date' with conditions: the Start Date shouldn't be prior to today and the End Date should not equal or be before the Start Date. 1) Add 2 HTML blocks beneath each Date field and add a section to each HTML block 2) Inside HTML blocks we need to add some warning message in case the condition is not met 3) Create 2 Rules as on screenshots That solution will show our warning messages, but won't prevent form submission if a user disregards the warning. But if it is necessary to let users submit only correct dates, you can use the second solution with JavaScript: 1. Insert Header&Footer, HTML block 1, HTML block 2, and place them below our Date fields. No need to add extra sections. 2. In the Header enable 'Source' and paste the code:<script>document.addEventListener("BeforeFormSubmit", function (event) {startDate = document.querySelector("#InsertRecordDateStart").value;endDate = document.querySelector("#InsertRecordDateEnd").value;warn1 = document.querySelector("#warning1");warn2 = document.querySelector("#warning2");var today = new Date();var dd = String(today.getDate()).padStart(2, '0');var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!var yyyy = today.getFullYear();today = mm + '/' + dd + '/' + yyyy;if (startDate < today) {event.preventDefault();warn1.style.display = 'block'} else {warn1.style.display = 'none'}if (endDate <= startDate) {event.preventDefault();warn2.style.display = 'block'} else {warn2.style.display = 'none'}});</script> 3. In the HTML block 1 enable 'Source' and paste:<span id="warning1" style="color:#FF0000;display:none;">Start date cannot be in the past or empty</span> 4. In the HTML block 2 enable 'Source' and paste:<span id="warning2" style="color:#FF0000;display:none;">End date cannot be prior or same as Start date or empty</span> 5. Make sure your datafield 1 and datafield 2 are called 'DateStart' and 'DateEnd' respectively or in the JavaScript added to the Header you need to replace in the linesstartDate = document.querySelector("#InsertRecordDateStart").value;endDate = document.querySelector("#InsertRecordDateEnd").value;to the name of the fields you have. You can test to see how it works on my DataPages: 1st solution with Rules 2nd solution with JS
  6. Hello I'm a bit of a Caspio newbie and pretty unskilled (ok - very unskilled!) at Javascript. I have a couple of, hopefully small, issues that I assume I need some basic javascript to solve. I've tried adapting code that I've found elsewhere, but I don't really know what I'm doing:- 1.I have a field called 'maximum_people' and one called 'no_of_people'. I need to restrict the number of bookings received on a given date, so if I create a report datapage (filtering by date) I need to add up all the 'no_of_people' submissions, and then have the form stop if it >='maximum people'. I suppose I need something like- <script> if(SUM[@field:no_of_people] <[@field:maximum_people]) { document.write("<a href='http://b6.caspio.com/dp.asp?AppKey=504f20004a6cefd06ad94881b12c&Course_ID=[@field:Course_ID]'>Signup</a>"); } else { document.write("<p>Signup Closed</p>") } </script> 2.)The second thing is a simple block to ensure that no bookings are made before today (as the Caspio calendar allows any date to be selected, even in the past)- I guess it is sort of like- <script> if([@field:date] >="today") { document.write("<a href='http://b6.caspio.com/dp.asp?AppKey=504f20004a6cefd06ad94881b12c&Course_ID=[@field:Course_ID]'>Signup</a>"); } else { document.write("<p>Sorry, we can only take bookings from tomorrow onwards</p>") } </script> I'm flying blind though, and there are probably 101 better ways to achieve what I need. Hopefully someone can help... Duncan
  7. Hello, I have a field that normally would be a cascading radio button whose value is dependent on the selection of another field's dropdown value (the parent). However, I need the user to be able to over-ride the cascaded value occasionally. You can't do this normally so I'm trying to use js to do it. There is a text field set to Dropdown, called 'SalesCode.' A Virtual field (Virtual 18) is set to Cascading Text Field so it can receive a value when 'SalesCode' (the parent) is updated. The text field called 'Taxable' is the one I need to update. It's set to a Radio Button with 2 custom choices ('tax' or 'non'). The code I think I need is 'on change' for the SalesCode drop down field. Meaning when the user updates the SalesCode value, it updates Virtual18 (cascaded) and then the code takes the value of Virtual18 and puts in in the Taxable field's Radio Button value (the value in Virtual18 will always be either 'tax' or 'non' so it corresponds with the custom choices in Taxable). If the user wants to override that Taxable value they can change the radio button choice. The code below is something like I think I need but I can't get it to work, any help would be really great! <script> $("#InsertRecordSalesCode").change(function(){ var v_tax = document.getElementsByName("cbParamVirtual18")[0].value; document.getElementsByName("InsertRecordTaxable")[0].value = v_tax; }); </script>
  8. This thread has parts and answers in other threads, but none of them solve doing this in a Submission form so I thought a new thread that unified this info would be helpful to anyone who needs this kind of solution. @Meekeee has posted a really cool solution for pushing calendar events via download from Caspio to Google, Apple, MS calendars, which is extremely beneficial: https://jekuer.github.io/add-to-calendar-button/ and https://github.com/jekuer/add-to-calendar-button. There's a few issues in using this solution with Caspio, though, that I haven't been able to figure out--mostly when it's deployed in a submission form. The issue is you need to get the user's input from the submission form to populate the values for the exported event's name, description, BeginDateTime, EndDateTime, and Location. On a Details page it's fairly straightforward, using [@field:BeginDate], etc. But the [@field:..] method isn't available on a Submission form, only Authentication fields can be used that way. I've tried using variables to get the field values (and testing with a 'dead' button and alert box confirmed that the values were captured correctly). The problem is I don't know how to use those variables in the event export code that goes into the datapage (there are other files, css, js, etc. that are referenced from elsewhere). This is the code that gets the values and coverts the date/time field to ISO formatting for the export: function getevent(){ var v_name = document.getElementById('InsertRecordTasksTimeline_Title').value; var v_note = document.getElementById('InsertRecordTasksTimeline_Notes').value; var v_location = document.getElementsByName('InsertRecordTasksTimeline_Location')[0].value; Stamp = new Date(document.getElementById('InsertRecordTasksTimeline_CalDate').value); Hours = Stamp.getHours() Mins = Stamp.getMinutes(); v_BeginDate=('' + Stamp.getFullYear() +"-"+ (Stamp.getMonth()+1) + "-" + Stamp.getDate() +"T"+ Hours + ":" + Mins); Stamp2 = new Date(document.getElementById('InsertRecordTasksTimeline_CalEnd').value); Hours = Stamp2.getHours() Mins = Stamp2.getMinutes(); v_EndDate=('' + Stamp2.getFullYear() +"-"+ (Stamp2.getMonth()+1) + "-" + Stamp2.getDate() +"T"+ Hours + ":" + Mins); } This is @Meekeee's code (there's variations, I'm using one that uses a normal button to call it) that creates the button with the event download options: <button id="default-button" name="submitevent">Save/Close</button> <script type="application/javascript"> const config = { "name": "tile of event", "description": "notes for the event", "startDate" : "2022-05-21T10:15", "endDate": "2022-05-21T12:30", "location":"location of event", options: ["Google", "Apple","Microsoft365"], timeZone: "currentBrowser", trigger: "click", iCalFileName: "Reminder-Event", } const button = document.querySelector('#default-button') button.addEventListener('click', ()=> atcb_action(config, button) ) </script> The issue is getting the variable values into the " " part of the code. For example, "name": "tile of event", will work with "name": "[@authfield:Company]", but I can't figure out how to use the variables. It would be something like this (but it doesn't work, though): <button id="default-button" name="submitevent">Save/Close</button> <script type="application/javascript"> const config = { var v_name = document.getElementById('InsertRecordTasksTimeline_Title').value; var v_note = document.getElementById('InsertRecordTasksTimeline_Notes').value; var v_location = document.getElementsByName('InsertRecordTasksTimeline_Location')[0].value; Stamp = new Date(document.getElementById('InsertRecordTasksTimeline_CalDate').value); Hours = Stamp.getHours() Mins = Stamp.getMinutes(); v_BeginDate=('' + Stamp.getFullYear() +"-"+ (Stamp.getMonth()+1) + "-" + Stamp.getDate() +"T"+ Hours + ":" + Mins); Stamp2 = new Date(document.getElementById('InsertRecordTasksTimeline_CalEnd').value); Hours = Stamp2.getHours() Mins = Stamp2.getMinutes(); v_EndDate=('' + Stamp2.getFullYear() +"-"+ (Stamp2.getMonth()+1) + "-" + Stamp2.getDate() +"T"+ Hours + ":" + Mins); "name": "v_name", "description": "n_note", "startDate" : "v_BeginDate", "endDate": "v_EndDate", "location":"v_location", options: ["Google", "Apple","Microsoft365"], timeZone: "currentBrowser", trigger: "click", iCalFileName: "Reminder-Event", } const button = document.querySelector('#default-button') button.addEventListener('click', ()=> atcb_action(config, button) ) </script> Does anyone know how to integrate the variables with the event export code? This would be a really great solution if it can be worked out.
  9. I am using a submission form and trying to customize it. It's a simple script that displays a warning message and stops submission, if a user makes a certain combination of selections(i.e. selects ABC from a dropdown and XYZ is calculated in the Virtual field. However, the code does not seem to work. Could somebody take a look and let me know what I am doing wrong? The UseCaseType is a dropdown with a lookup table linked to it, and the Virtual Parameter is a Calculated Value SQL script(that does work). For some reason, a and b are populated as nulls. <script> document.addEventListener('BeforeFormSubmit', function (event) { var a = document.getElementById("InsertRecordUseCaseType").value; var b = document.getElementById("cbParamVirtual2").value; alert('a is ' + a + ' | b is ' + b); if (a == 'ABC' && b == 'XYZ') { alert('You cannot select ABC and XYZ together'); event.preventDefault(); } }); </script>
  10. I am running a calendar data page which shows different code for service types in a day. Would like the all elements of the service type background to be certain colors. I found this link in the forum but is not working.
  11. Hi there! I was looking to add a zoom on click option for my images on details report page, but there was no default option in caspio, so I came up with the next workaround using JavaScript and CSS: 1) Add next styles in the header of "Search and Report Wizard - Configure Details Page Fields" <style> input#zoomCheckbox { display: none; } .appendedContainer { overflow-x: scroll; } .appendedContainer img { width: 100%; transition: width 0.8s ease; cursor: zoom-in; overflow-x: scroll; max-width: 90%!important; } input#zoomCheckbox:checked ~ label > img { max-width: 300%!important; width: 170%; cursor: zoom-out; } </style> 2) Add next JavaScript in the header of "Search and Report Wizard - Configure Details Page Fields" <script> const imageSelector = '.cbFormData img'; document.addEventListener('DataPageReady', _=>{ const image = document.querySelector(imageSelector) const zoomImageTemplate = (HTMLimgElement)=> { return `<div class="appendedContainer"> <input type="checkbox" id="zoomCheckbox"> <label for="zoomCheckbox"> ${HTMLimgElement.parentElement.innerHTML} </label> </div>` } image.parentElement.innerHTML = zoomImageTemplate(image) }) </script> You can change the value of imageSelector variable so it matches the CSS selector of the required image you need to zoom. Hope this helps
  12. Any ideas on 'how to format' this custom link to be inline with the 'data download' link and include an icon? Please see below code I'm using for the custom link placement and the attached image, thank you: <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var child = document.querySelector("li[id^='DataDownloadButton']"); var parent = child.parentElement; var a = document.createElement('a'); var linkText = document.createTextNode("my title text"); a.appendChild(linkText); a.title = "my title text"; a.href = "http://example.com"; parent.parentNode.appendChild(a); }); </script>
  13. Hello everyone, Does someone know how to dynamically change the font color of a text column in a tabular report? For instance, I have a field named Indicator and it is the second column in the report. If the text value is equal to "Final", the font color must be set to red. Thanks in advance. -dspolyglot
  14. Hi Caspio newbie here! I'm trying to do email verification, most of it works fine but the only way to change the verification status to yes is to manually run the datapage I created called email_verification. the email sends okay and the link copies the GUID but it doesn't change the field status. I tried copying the script on the help page to get automatic updating but it doesn't appear to work....my code is as follows <script> document.getElementById('caspioform').onsubmit = function (){ document.getElementById('[@field:Email_Verified^]').checked="y"; } </script> any advice much appreciated Ian
  15. Just wanted to share a workflow on how to create a an editable formula field. This will allow you to calculate the value for a field based on other fields (Formula) or manually input the desired value. 1. Create a virtual field that will contain your formula. 2. Add a header and footer in your DataPage and disable the HTML editor on the footer. 3. In the footer put the following code: <script> document.querySelector("input[id*='VIRTUAL_FIELD_ID']").onchange = function() {myFunction()}; function myFunction() { var virtual_val = document.querySelector("input[id*='VIRTUAL_FIELD_ID']").value; document.querySelector("input[id*='FIELD_ID']").value = virtual_val; } </script> note: The field that is going to be used for the "field_id" will be the actual field that will store the calculation.
  16. Hi everyone, I'm fairly new to the world of JavaScript and have the following scenario on a submission page: During submission, my users select a business client using an AutoComplete field. Once they selected a client, two virtual fields pull two values for this client from an external table. These lookups are set up using cascading text field. On the same DataPage, there is a radio button with two options. Should the two virtual fields remain blank (basically meaning that there is no value for either of the fields for this client in the external table), the 2nd radio button option should be selected and the field hidden to prevent user interaction. The hiding and selection part works fine, but it seems that I'm not able to get the value from the virtual fields and my script stops working as soon as I add the condition that involves the value of any of the two virtual fields: <script type= "text/javascript"> function AMFCheck() { var AMF1 = document.getElementById('cbParamVirtual12')[0].value; var AMF2 = document.getElementById('cbParamVirtual13')[0].value; if (AMF1 == "" && AMF2 == "" ) { document.getElementById("InsertRecordAMF_payable1").checked = true; document.getElementById("InsertRecordAMF_payable").style.display = "none"; } } document.getElementById("caspioform").onchange=AMFCheck; </script> I'd be really grateful for any help. Thanks, Christof
  17. I'm using a details page to update a record in my table & on the details page are a variety of calculations that i've written to calculate "onchange" on the page. Things are working properly, however now i'd like to disable the sumbit button if "Field_A" & "Field_B" do not match. To add a layer to this, i'd like to know how to use an HTML block as one of these fields since it's where the calculation happens and i'd also like to know if i can have multiple criteria that disable the submit button. I'm thinking that I need to assign a field name to the HTML block, however I don't know how to do that unfortunately. How would the code for this situation be written? "Field_A" value must equal "HTML block 22" in order for the submit button to be enabled OR "Field_A" value must equal "HTML block 22" AND "Field_B" value must equal "Field_C" for the submit button to be enabled I saw a topic on this question if a value is greater than 0, however nothing on how to change the 0 to a comparison between 2 fields. Thanks!
  18. I have the Javascript in our submission form to format the phone numbers to this format: (123) 456-7890, but sometime I need to add an extension to that. Is there a way to edit the Javascript so that I have the option to have it look like this: (123) 456-7890 x123. I don't want to have a separate column in the table to add an extension because they aren't always there and it will show up funny in the results tables. Any thoughts?
  19. I need to be able to tell this code to display as a currency at times instead of just a value. This code is adding up a few different cells when the user changes cells. Can you let me know where in the code that should be added? Thanks so much! <div id="mypage"> </div> <SCRIPT LANGUAGE="JavaScript"> function calculate() { var Settle_ADV_Gross = isNaN((parseInt(document.getElementById("EditRecordSettle_ADV_Gross").value)))? 0 :(parseInt(document.getElementById("EditRecordSettle_ADV_Gross").value)); var Settle_DOS_Gross = isNaN((parseInt(document.getElementById("EditRecordSettle_DOS_Gross").value)))?0:(parseInt(document.getElementById("EditRecordSettle_DOS_Gross").value)); var Settle_Walk_Up_Gross = isNaN((parseInt(document.getElementById("EditRecordSettle_Walk_Up_Gross").value)))?0:(parseInt(document.getElementById("EditRecordSettle_Walk_Up_Gross").value)); var total= Settle_Walk_Up_Gross + Settle_DOS_Gross + Settle_ADV_Gross; document.getElementById("mypage").innerHTML=total; } document.getElementById("EditRecordSettle_Walk_Up_Gross").onchange=calculate; document.getElementById("EditRecordSettle_DOS_Gross").onchange=calculate; document.getElementById("EditRecordSettle_ADV_Gross").onchange=calculate; calculate(); </SCRIPT> </span></strong>
  20. Hi everyone, Does anyone know how to render a calculated field as HTML? I tried outputting HTML tags inside calculated fields, but they display as plain text. Thanks in advance. -dspolyglot
  21. I have used the forum to get to this point so you may have seen some of my code that I grabbed from other posts. I have a single record update form, where I only want them to be able to select the update button if all of the fields are marked as 'complete'. It should be known that all of the 'complete' or 'missing data' fields are formulas in the table, however, I am referencing virtual fields in my code that are set to the formula fields. The url to my form is here: https://c5amf675.caspio.com/dp/32576000f879393a309d4a97b1bd My code for checking the virtual field values is here: <script language="JavaScript"> function check_numbers() { var disabled = false; if (parseFloat(document.getElementById("cbParamVirtual").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtua2").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual3").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual4").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual5").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual6").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual7").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual8").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual9").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual10").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual11").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual12").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual13").value)=='Complete') disabled = true; if (parseFloat(document.getElementById("cbParamVirtual14").value)=='Complete') disabled = true; if (disabled) { alert("All fields must be complete"); return false; } } document.getElementById("caspioform").onsubmit=check_numbers; </script> What is really weird, is that even the following code will not show a message when I click on the update button. <SCRIPT LANGUAGE="JavaScript"> function check() { window.alert("Thank you.. Information is registered!"); } document.getElementById("caspioform").onsubmit=check; </SCRIPT> I tried this small alert function after I couldn't get my regular code to work. This was on its own and did not work. I am thinking that there is an issue somewhere where the onclick is not registering. Do any of you have any idea what might be the problem?
  22. I am trying to filter datapages that are embedded within a page that I show within an iframe and I can not seem to get the parameters to pass into the I-Frame when the parent page is loaded. I have a "Project" report with custom link to details page. This link passes Project_ID fine to datapages actually embedded on the target page. What I want to do is embed other pages (hosted on same domain) via IFrame and have the results of datapages embedded on the page shown in iframe filtered by the Project_ID. I want to use I frames to reduce load time, data usage and also have the ability to refresh specific datapages when editing data. Again, the parent page that hosts the Iframe is receiving the parameter fine, i just can not get the DPs within the embedded page to see the passed parameter. Much help in advance!
  23. Hi there! I had a use case where drop-down input contained long lines of text. By default, a long line of text inside select input is getting cropped at the right. But it was required to keep the full text visible. I wrote the script that can be used as it is to solve this problem. Just copy and paste the code below into your form data page header. <script> document.addEventListener('DataPageReady', _=>{ const mainFunction = _=> { hideSelectContainers() addVirtualSelectOptions() addVirtualSelectOptionsListeners() addVirtualSelectOptionsContainerListeners() addStyles() } const hideSelectContainers = _=> { document.querySelectorAll('.cbFormSelect').forEach(item=> {item.style = "display: none;"}) } const virtualSelectContainerGenerator = selectElement => { let template = ''; selectElement.querySelectorAll('option').forEach(option=>{template += `<div value="${option.getAttribute('value')}" class="virtualOption">${option.innerHTML}</div>`; option.classList.add("hideElement")}) return `<div class="virtualSelectContainer"> <div class="virtualSelect"> <span class="virtualSelectText">${selectElement.value}</span> <div class="virtualOptionContainer hideElement">${template}</div> </div><span class="custom-arrow"></span></div>`; } const addVirtualSelectOptions = _=> { document.querySelectorAll('[class*="cbFormBlock"]').forEach( item =>{ if(item.querySelector('select')!=null) { item.insertAdjacentHTML('beforeend', virtualSelectContainerGenerator(item.querySelector('select'))) } }) } const addVirtualSelectOptionsListeners = _=> { document.querySelectorAll('.virtualOption').forEach( option => { option.addEventListener('click', e=> { let realOption = document.querySelector(`[value="${e.target.getAttribute('value')}"]`); realOption.parentElement.selectedIndex = realOption.index e.target.parentElement.parentElement.querySelector('.virtualSelectText').innerText = e.target.innerText; e.target.parentElement.classList.toggle("hideElement"); }) }) } const addVirtualSelectOptionsContainerListeners = _=> { document.querySelectorAll('.virtualSelectContainer').forEach( item =>{ item.addEventListener('click', e => { let clickedElement = e.target; if (clickedElement.classList.contains('virtualSelectContainer')) { clickedElement.querySelector('.virtualOptionContainer').classList.toggle('hideElement'); } else if (clickedElement.classList.contains('virtualSelectText')) { clickedElement.nextElementSibling.classList.toggle('hideElement'); } else if (clickedElement.classList.contains('custom-arrow')) { clickedElement.previousElementSibling.classList.toggle('hideElement'); } }, true) }) } const addStyles = _=> { let style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` .virtualSelectContainer { position: relative; max-width: 800px; --custom-paddings: 1em 5.5em 1em 1.5em; box-sizing: border-box; color: white; white-space: normal; } .virtualSelectContainer:hover { cursor: pointer; } .virtualSelect { box-shadow: 0 10px 20px rgba(0,0,0,1); font-size: 1.1rem; background: #4d5061; border: 0; max-width: 100%; } .hideElement { display: none; } .virtualOption { padding: var(--custom-paddings); margin-top: 10px; overflow: hidden; } .virtualOption:hover { background: #4A65FF; color: white; } .virtualSelectText { display: block; padding: var(--custom-paddings); } .custom-arrow { display: block; background-color: #3b3c47; height: 100%; width: 5rem; position: absolute; right: 0; top: 0; pointer-events: none; } .custom-arrow::before, .custom-arrow::after { z-index: 10; --size: .65em; content: ''; position: absolute; width: 0; height: 0; left: 50%; transform: translate(-50%, -50%); } .custom-arrow::before { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-bottom: var(--size) solid rgba(255,255,255,.5); top: 40%; } .custom-arrow::after { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-top: var(--size) solid rgba(255,255,255,.5); top: 60%; } .cbSubmitButtonContainer .cbSubmitButton { background-color: #4d5061; box-shadow: 0 10px 20px rgba(0,0,0,1); } .cbSubmitButtonContainer .cbSubmitButton:hover { background-color: #4A65FF; }`; document.querySelector('head').appendChild(style);} mainFunction() }) </script> It is currenlty deployed on this test page: https://c7eku786.caspio.com/dp/7f80b000aa77201adc02489f8c6d Hope someone will find this useful.
  24. Hi, I took some code from one of Caspio's demo apps (an appointment scheduler) to create a Time Picker on a Submission form. This works great, allowing far more detailed calendar scheduling than just using the date without a time. The issue is when the user needs to edit the date/time from the Calendar, in Details view. The code doesn't work in this case. I've changed the 'InsertRecord' part to 'EditRecord' but that doesn't seem to make a difference. Is there some difference to calling the code from the Update button vs a Submission button? Any help would be greatly appreciated. Below is the process and code in the Submission form's footer. I need to modify it to work in a Calendar's Detail view: a) the user selects a Date from the calendar popup for field Virtual6 (set to Text). b) the user then clicks this link in an html block to open the Time Picker: <input type="time" name="time" class="timeClass" id="timepicker"/> c) on Submission the code below runs to combine the date from Virtual6 and the time from the Time Picker into the actual Date/Time field TasksTimeine_CalDate. ****I need this code to work on a Calendar's Detail View Update. <script type="text/javascript"> var datefield=document.createElement("input"); datefield.setAttribute("type", "time"); if (datefield.type!="time") { //if browser doesn't support input type="time" document.addEventListener("DataPageReady", function () { $('#timepicker').timepicker({ timeFormat: 'HH:mm', interval: 1, minTime: '00:00', maxTime: '23:59', defaultTime: '6', startTime: '00:00', dynamic: false, dropdown: true, scrollbar: true, timepicker: true, datepicker: false, stepHour: 1, stepMinute: 1, timeInput: true, showHour: true, showMinute: true, pickerTimeFormat: 'hh:mm tt' }); }); } document.getElementsByName('Submit')[0].onmouseover = function(){ var date = document.getElementById('cbParamVirtual6').value; if(date == "") { date = "1/1/2011"; } var ampm = document.getElementById('timepicker').value; document.getElementById('InsertRecordTasksTimeline_CalDate').value = date + " " + ampm; }; </script>
  25. Hi there. I was trying to find a way to preview a PDF file before it is uploaded in a DataPage. The flow described in this article works for images only: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/preview-an-image-before-it-is-uploaded-in-a-datapage/ Here is a solution I came up with: <script> const HTMLFileInput = document.getElementById("EditRecordFile_1"); HTMLFileInput.addEventListener("change", event => { const src = URL.createObjectURL(event.target.files[0]); const outputWidth = window.getComputedStyle(HTMLFileInput.parentElement.parentElement).getPropertyValue('width') const outputHeight = parseInt(outputWidth.replace('px',''))*1.3+'px' if(document.querySelector('#output')==null) { HTMLFileInput.parentElement.insertAdjacentHTML('afterend', `<iframe src="${src}" width="${outputWidth}" height="${outputHeight }" id="output" class="cbFormFieldCell">IFRAME IS NOT SUPPORTED IN YOUR BROWSER</iframe>`) } else { document.querySelector('#output').setAttribute("src", src) } }) </script> Just substitute EditRecordFile_1 with id of your file input. You can also tweak the value of width and the height of the iframe so it fits your usual pdf file size. Hope this helps
  • Create New...