Search the Community

Hi all, I am using the code to make a datapage more responsive, and while it works wonderfully, I don't know how to make the calendar popup larger to be usable on mobile. When I click on the calendar it shows up but it is way to small to be mobile friendly. Below is what I have for the responsive code. I've been searching styles to try and find out how to change the popup but have been unsuccessful. Any and all help is much appreciated! <!-- Responsive Code Begin --> <style> /* Change max-width to what size you want the form to change at */ @media (max-width: 767px) { #datapage-form table { width: 100% !important; margin-top: 1px !important; } #datapage-form td { display: block; } img[alt~="Calendar"] { position: relative; top: -5px; } } </style> <div id="datapage-form" > <!-- Responsive Code End -->

Hi, Does anyone have experience with creating onboarding tools within datapages? Things like info-bubbles, hotspots, checklists, etc., to help new users of an app? I need to be able to do things like this company offers (https://userguiding.com/) but within Caspio datapages, so messages can be anchored to specific fields/labels and locations. I've done a lot of video tutorials but have found people's attention span doesn't extend more than a few seconds, so I need to get pointed instructions/explanations into the workflow somehow. Any advice would be greatly appreciated!

Hi, It would be really great to successfully publish datapages in modal blocks (dialog box / popup windows). While experiencing some success at displaying datapages in modals, I can see there are some problems: 1. The entire page refreshes on loading the modal for the first time. Not really a show stopper but something to be mindful of because you see a blank white moment during reload. 2. In a web form datapage, if field validation on submission fails, the page does not return to the modal even when configured to do so via a modal url link. (the popup disappears). 3. Javascript in a page within a modal doesn't run as expected or doesn't seem to trigger at all. Any ideas? JC

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); }

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?

Hello, I have a button that opens a popup form that has a submission datapage in it. Often the user will minimize the popup because they leave the submission form open for up to a few hours (it's a timer, with a Start and a Finish time- they click 'Start' and don't submit till they later click 'Finish.' The problem is if the popup is already open the button's code reactivates it, and also refreshes the submission datapage, losing the values that were first put in it. I need to adjust the code so that if the user click sthe button again it needs to a) check to see if the popup is already open and, if so, un-minimize it and b) if the popup is not already open, then open it as normal. The is code and the button are below so it's clear how it's set up- it somehow needs to have the If/Else clause fixed. Any help would be really appreciated. <button class="shortbtnicon" type="button" onclick=" stopwatch ('https://example.com/shortcuts/stopwatch', 'MyPopUp', 450, 650);"><span><i class="fa fa-clock-o fa-1x"></i></button> Here's the jquery to create the popup: function stopwatch(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); } It needs to be something like the below code (but this doesn't work): var popupurl = "https://example.com/shortcuts/stopwatch"; function stopwatch(myURL, title, myWidth, myHeight){ //checks to see if window is open if(popupurl && !popupurl.closed) { popupurl.focus(); //If already Open Set focus } else { function stopwatch(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); } stopwatch(); } }

I am following this tech tip and was able to make it work except for the part where the original form should be refreshed so the dropdown item will be visible to the user who submitted it. I used the script in the tech tip and have already disabled the HTML editor.

I have a button next to a small field listbox on a search submission form, that opens a popup. The popup contains a much larger listbox of the same field so that Users can find it easier to view and locate their item for selection. The same 'load' and 'exit' internal parameter passes between the form and the popup, because I need any selection made in the form to show in the popup, and I also need any changed selection in the popup to pass back into the listbox on the form when the popup is closed. I've managed to get a selected item on the popup to pass through to the listbox in the submission form, by reloading the form. But I can't seem to get the parameter to pass the other way (ie from submission form to popup). I guess this is because the 'submit' button on the form hasn't been pressed so the parameter is empty. So I've tried using some JS with 'onchange' in the form's footer, but I'm not good at coding and just can't get the selected item in the listbox to cross into the parameter. Does anyone know some code that can 'force' a value into my '[@sitelink]' parameter? Thanks so much for any tips.

I've modified a Submit form datapage (accessed as a popup in a Fancy Box from a Tabular datapage) that normally closes and refreshes it's parent page (the tabular datapage). This is the code in the Destination section of the Submission datapage: <script> setTimeout(function(){ window.parent.location.reload();window.parent.jQuery.fancybox.close();}, 2000); </script> On the new Submit datapage I need it to go to a defined url (with parameters passed) but cannot get the code to work. I'm using: setTimeout(function(){ window.parent.location.href='../my-webpage?PID=[@field:PID]&PTID=[@field:PTID]'();window.parent.jQuery.fancybox.close();}, 2000); Does anyone know how to modify the second code so it directs to 'my-webpage' and also still closes the fancybox? Many thanks-

I am using the JavaScript from this "Limit the Number of Submissions" article to display one hyperlinked image or another hyperlinked image based on meeting a condition. This is the original JavaScript from the article: <script> if([@field:Attendees] <[@field:Maximum_Attendees]) { document.write("<a href='SubmissionURL&Course_ID=[@field:Course_ID]'> Signup </a>"); } else { document.write("<p>Signup Closed</p>") } </script> This is my modified version with image links instead of text links: <script> if([@field:Keyword_Count#] <[@field:Max_Keywords#]) { document.write("<a href='URLwithPARAMETERS'><img src='IMAGEURL'></a>"); } else { document.write("<a href='URLwithPARAMETERS'><img src='IMAGEURL'></a>") } </script> Currently, when a visitor clicks on the image, the destination of the hyperlink is the same window. I would like the destination to be a popup window with resized window. I already use JavaScript popup code in another DataPage, so I figured I would paste and modify as so document.write("<a onclick="window.open(...); return false"><img></a>"), but this does not work. JavaScript popup code that works on another app, outside of the document.write("..."). <a onclick="window.open('URLwithPARAMETERS','popup','width=550,height=200, scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=50,top=50'); return false"><img alt="Delete" src="IMAGEURL" style="width: 20px; height: 20px; margin: 1px;" /></a> Any recommendations?

Is it possible to add a button that would open a new window allowing me to add a new vendor? The submission form has drop downs, but, when the vendor is not present, you must close and open the add vendor data page, then start all over adding the transaction

My datapages use a variety of "onclick=window.open" windows and the problem is that they all open in the same popup window...so if i have one open, then the next one opens inside of the current one and I can never open two popup windows at the same time. How can i tell the new window to open in a different popup so the two windows can be placed beside each other? Here is the code i use: <a onclick="window.open('http://linktomycaspiodatapage&ID=[@field:ID]','popup','width=450,height=725,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img alt="" src="[@app:Icon_Links/]" style="width: 25px; height: 25px; margin: 1px;" title="Links" /></a> Thanks so much for your help!

Hello Caspio Ninjas! I've noticed when the page scrolls down the Hint Popup moves an equal distance down from the element producing the hint. When scrolled down more than a few lines the Hint popup moves all the way off the screen. I just tested it in a "preview" mode, and noticed that it only happens on embedded Data Pages. I removed all of my javascript for testing, and it didn't fix it. I even removed all markup except the script for a DataPage Where would i begin trying to diagnose this problem? What might be affecting the Caspio Hint popup from my page? Thanks

Does anyone know if it's possible to specify the month and year of a field that uses the calendar popup? In my submission form, users request a lesson and specify a date and time. The lessons are offered only during a certain time period (which varies depending on the lesson), so I have two cascading dropdown fields that display the start and end dates that the lesson is offered. Instead of clicking through 3-5 months ahead of the current date, I'd like the calendar pop up to start on the month and year that the lesson is offered. Thanks!