Search the Community

Hi, I would like to hide fields properly in the new responsive code. I've been enclosing fields via HTML Block via <table style="display:none"> Field1 Field2 </table> to hide my fields but with the new responsive feature enabled. It is not hiding the fields properly. Any thoughts/suggestions on this?

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

Hello! I am using the modal script to input modals on my website, (YouTube tutorial) and am having problems with the form not auto sizing to the modal box. I can see how to fit the over flow inside but the content scrolls horizontal and doesn't fit to size. If I make the screen smaller it goes to correct size as its responsive to mobile. I was told in the help chat to input the CSS into the header of the corresponding data page but Ive tried a couple things and it ends up showing up in the preview, so Im not sure where to put it and what. Thank you! I

I have a search and report datapage that when deployed on most Wordpress websites functions properly. On one wordpress website that uses (Theme X) the radio buttons are not displaying on the same line. In the datapage it is set to display "multiple options per line". The hint images are also displaying on the line under the label. I believe I need to enter custom css into the style in order to make the radio buttons display multiple options per line and the hint images to stay on the same line. What css can be used? Here is the app functioning with the issues when deployed: https://www.mtpca.org/behavioral-health-directory/ Here is the app functioning properly when deployed: https://wimtracking.com/thebrightapp/

Hi folks I wanted to share a cool code with everyone when you press the Submit Button on a Form. Well when you press the Submit Button with a file in it to load and there is a unique field in it (such as a Username for a registration form), there's a bit of a delay until you ge to the confirmation screen. This confuses the Submitter and may press the button again - which results in an error because now the form is submitted twice but the same username was alreast submitted on the first form Anyway you want a Loading screen to pop up. Caspio should have this simple feature for a "low coding" platform! In your header drop this code (#Submit is the submit button - on an update form its something different, #processing is the name of my div that will show the processing window after submission): <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#Submit").click(function(){ $("#processing").css({"display":"table"}); }); }); </script> In the Footer drop this: <div id="processing" style="display:none;background-color:rgba(222,200,70,0.9);height:100vh;width:100vw;position:fixed;top:0;"><br/><br/><span style="display:table;height:75wh;margin:auto;top:0;bottom:0;left:0;right:0;">Processing, Please Wait....<br/><br/><img style="display:table;margin:auto;" src="http://skquares.com/processing.gif"></img><br/<br/></span></div> ------- thats it! Notice the display is set to none because you dont want to show the window until the Submit button is pressed via the Jquery script. Notice the height and width are set to the size of the screen with a position of fixed, top:0 - so that the whole screen is covered but you can shrink it by putting less width and height; background is my own color choice but you can change that - note leave the opacity not at 100% but I have it at 90%(0.9) so that the user can still see the form a little. Also, http://skquares.com/processing.gif is where i store MY image so you have to change it to where you image is hosted (but you could use mine i guess). Ok I hope this helps!

I have a text field with id=TextField. When the user types 10 into this field I would like the font color of 10 to change immediately to red (and if possible change the background color of the text field). It seems the best way to do this is change the CSS style of TextField when 10 is entered into this field. I searched online but couldn't get any of the available code to work. Thanks.

I'm struggling getting some CSS correct in a tabular datapage and could use some help. Aggregate rows do not respond to hiding columns in the same way that data rows do when deployed. (See screenshots) In this example, I'm trying to hide three extra cells in the aggregate row. When I preview the datapage it works. When I deploy the datapage, it does not. Note that the first 4 sets of table selectors all work. Here's the CSS in my header element: <style> <!-- WORKS: --> #dashtable table:nth-of-type(1) td:nth-of-type(9) {display: none;} #dashtable table:nth-of-type(1) th:nth-of-type(9) {display: none;} #dashtable table:nth-of-type(1) td:nth-of-type(7) {display: none;} #dashtable table:nth-of-type(1) th:nth-of-type(7) {display: none;} #dashtable table:nth-of-type(1) td:nth-of-type(8) {display: none;} #dashtable table:nth-of-type(1) th:nth-of-type(8) {display: none;} #dashtable table:nth-of-type(1) td:nth-of-type(6) {text-align:center;} #dashtable table:nth-of-type(1) th:nth-of-type(6) {text-align:center;} <!-- PREVIEW WORKS, DOES NOT WORK WHEN DEPLOYED: --> #dashtable .cbResultSetTotalsDataCell {display:none;} </style> <div id="dashtable"> (closing "div" is in footer element. ) Thoughts?

I have a results page that I want the users to open in grid edit mode. The first column needs to be significantly wider than the 2nd and 3rd column. I have been trying to find a CSS Selector to be able to modify the width since in the standard form it is the same size as the other two columns but I can't find anything unique to identify it. I am assuming once I find the unique selector I can simply add the CSS in the header of the page and viola?

Hi all, I am working on vehicle insurance portal. I have stuck in some building functionality in DataPage. My requirement is: A user wants to fill his information along with his family member's information by clicking on add in 'User information DataPage'. I need to create a "Add Member/Add Driver" button so that it can add its members/Driver's information one by one. Like if it has one then one member will be added or if it has more than one then more members will be added. For every member have same input field but different form. They should be able to submit multiple times based on the number of member/drivers added.These all data need to store in one table, so that we can fetch these data easily. Here is my DataPage URL which am working on it. Please find attached file below. This is the structure I have to developed in this DataPage. If any resources are available please share or give any road map to build this functionality.

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

Hi, Just want to share this bit of JavaScript and CSS that creates a fixed "scroll to top" button on the corner of your DataPage and shows up only when the user starts to scroll the page. (I implemented this on my Tabular Report DataPage that has many records per page) Header (CSS): <style> #myBtn { display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } #myBtn:hover { background-color: #555; /* Add a dark-grey background on hover */ } </style> Footer (the actual button and the JavaScript): <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> <script> document.addEventListener('DataPageReady', function (event) { mybutton = document.getElementById("myBtn"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (window.scrollY==0) { mybutton.style.display = "none"; } else { mybutton.style.display = "block"; } } }) function topFunction() { window.scrollTo({top: 0, behavior: 'smooth'}); } </script>

Hi I have implemented my Caspio app using the embed method. My page has a header & footer in place and the result is this: When I scroll the table the header scrolls up and I lose sight of the header block: Is it possible to freeze the header block (not the table header) so that it always displays? Thanks Steve

I have a chart and I need some more space between its axis title and the drawing itself. However, I cannot see any option to customise that.

Hi there, For one of my projects, I needed to display 0-100 values in one of the fileds on tabular report in a form of a progress bar. Here is an example of how it looks: https://c7eku786.caspio.com/dp/7f80b0006598726cb69c4239b1dc In this forum post I would like to share 2 solutions to achieve this. One presuposses using only HTML/CSS and the second one requires JavaScript. 1. HTML/CSS solution. 1.1 Add next CSS to the header of your DataPage" <style> .progressbar-container { background-color: #f1f1f1; } .progressbar { background-color: #9e9e9e; height: 24px; padding: 5px; color: white; }</style> 1.2 Add HTML block to your tabular report (results page) that will represent a progress bar 1.3 Add next HTML code to the HTML block: <div class="progressbar-container"> <div class="progressbar" style="width:[@field:ProgressBar]%;">[@field:ProgressBar]%</div> </div> 1.4 Substitute [@field:ProgressBar] with the field name where you store values from 0 to 100 2. JavaScript solution 2.1 Add the same CSS code as in 1.1 2.2 Add next JavaScript snippet to the header of your DataPage (below or above style) <script> if (typeof addProgressBar == 'undefined') { const progressBarPosition = 3 const addProgressBar = ()=> { document.querySelectorAll(`.cbResultSetTableCellNumberDate:nth-child(${progressBarPosition})`).forEach(progressBarCell => { let value = progressBarCell.innerText progressBarCell.innerHTML = `<div class="progressbar-container"> <div class="progressbar" style="width:${value}%;">${value}%</div> </div>`}) document.removeEventListener('DataPageReady', addProgressBar) } document.addEventListener('DataPageReady', addProgressBar) } </script> 2.3 Substitute value of progressBarPosition variable so it matches the position of your field that holds 0-100 value in the report DataPage Difference between this approaches is that HTML version of the progress bar will not allow sorting once you click on the field label where JavaScript approach allows sorting once field label is clicked. Hope this helps to someone

Hi I was wondering if there is a way to show default image in the HTML block if there is no available image in a report. I know there is a default image option for the image field but I don't want to it for this one as I am using CSS to design the results in my report. Any ideas anyone?

This custom solution will allow you to change the content of an HTML element depending on your device.You just need to create an HTML BLOCK or use a HEADER and FOOTER and disable the HTML editor. Take note that this is not the actual use of a Psuedo-Element ("::before"). This is just an experiment that I tried on my App.Put the following script: <style> p#test::before { content: "This message is for the Desktop viewer"; /*You can change this part to show your own message for Desktop view*/ } @media (max-width: 640px) { p#test::before { content: "This message is for the Mobile viewer"; /*You can change this part to show your own message for Mobile view*/ } } } </style> <p id="test"></p> /*This will be the container of your messages*/

The scripts below will let you have a different button style when a Datapage is opened on a mobile device. Technically you will have 2 different buttons with the same action/use, 1 for the mobile view and 1 for the desktop view.First, create a header and footer field, disable the HTML editor, and put the following STYLE in the header <style> input[name="MobileButton"]{ display: none !important; } /*this line will hide the mobile*/ button by default input[name="searchID"]{ display: none !important;} /* this will hide the actual button that*/ comes with the DataPage. @media (max-width: 640px) { /*this part will detect the width of the screen*/ input[name="MobileButton"] { display: block !important;} input[name="PCButton"] { display: none !important;} } </style> Once that is done, create an HTML BLOCK, disable the HTML editor and paste the following code: <input type="submit" name= "PCButton" class="cbSearchButton" value="THIS IS THE DESKTOP BUTTON"> <input type="submit" name="MobileButton" class="cbSearchButton" value="THIS THE MOBILE BUTTON" > NOTE: you can also put the above code in the footer. It just depends on the look that you want to achieve. I also changed the value for the 2 button so you can see them change when changing screensize.

Have a datapage report field that is also included in an aggregation. Trying to left justify that column. Chrome Dev identifies two fields that affect this alignment as: .cbResultSetHeaderCellNumberDate and .cbResultSetTableCellNumberDate. If I change it in Chrome Dev Inspect it aligns column to left. .cbResultSetHeaderCellNumberDate { text-align: right; vertical-align: middle; white-space: nowrap; background-color: #dce6f1; padding: 5px; border-color: #eeeeee; border-width: 1px 1px 1px 1px; border-style: solid; } Also searched in Caspio that styles entire source code and sequentially changed all references to a text align=right to =left. Still no change to live page. Where is the PREVIEW of the page pulling that right setting from? Thanks for your patience.

I have a datapage where I'm hiding some columns of calculated fields using CSS below. #target table:nth-of-type(2) td:nth-of-type(10) {display: none;} #target table:nth-of-type(2) th:nth-of-type(10) {display: none;} #target table:nth-of-type(2) td:nth-of-type(11) {display: none;} #target table:nth-of-type(2) th:nth-of-type(11) {display: none;} That works great, but it doesn't hide the columns in the aggregation rows so I have an overhang of dark grey in my table (see picture). I think the problem is that in the totals rows, text spans multiple columns, so it's not really column 10 and 11 I have to hide in these rows. Does anyone know how to target these cells and hide them?

I have a VERY large table and after some number of columns, the vertical headers get out of alignment by a bit. (The date is supposed to be under "FAT Due" and the blank space under "Assembly Due") Here is the code I'm using: <style type="text/css"> [class*="cbResultSetHeaderCell"]{ text-align:center !important; vertical-align:center !important; } .cbResultSetLabel:nth-child(35),.cbResultSetLabel:nth-child(36),.cbResultSetLabel:nth-child(37),.cbResultSetLabel:nth-child(39),.cbResultSetLabel:nth-child(40),.cbResultSetLabel:nth-child(41),.cbResultSetLabel:nth-child(42),.cbResultSetLabel:nth-child(43),.cbResultSetLabel:nth-child(44),.cbResultSetLabel:nth-child(46),.cbResultSetLabel:nth-child(47),.cbResultSetLabel:nth-child(48),.cbResultSetLabel:nth-child(49),.cbResultSetLabel:nth-child(50),.cbResultSetLabel:nth-child(51),.cbResultSetLabel:nth-child(52),.cbResultSetLabel:nth-child(53),.cbResultSetLabel:nth-child(54),.cbResultSetLabel:nth-child(55),.cbResultSetLabel:nth-child(56),.cbResultSetLabel:nth-child(57),.cbResultSetLabel:nth-child(58),.cbResultSetLabel:nth-child(59),.cbResultSetLabel:nth-child(61),.cbResultSetLabel:nth-child(62),.cbResultSetLabel:nth-child(63),.cbResultSetLabel:nth-child(64),.cbResultSetLabel:nth-child(65),.cbResultSetLabel:nth-child(66),.cbResultSetLabel:nth-child(67),.cbResultSetLabel:nth-child(68),.cbResultSetLabel:nth-child(69),.cbResultSetLabel:nth-child(70),.cbResultSetLabel:nth-child(71),.cbResultSetLabel:nth-child(72),.cbResultSetLabel:nth-child(73),.cbResultSetLabel:nth-child(75),.cbResultSetLabel:nth-child(76),.cbResultSetLabel:nth-child(77),.cbResultSetLabel:nth-child(78),.cbResultSetLabel:nth-child(79),.cbResultSetLabel:nth-child(80),.cbResultSetLabel:nth-child(81),.cbResultSetLabel:nth-child(82),.cbResultSetLabel:nth-child(83),.cbResultSetLabel:nth-child(84),.cbResultSetLabel:nth-child(86),.cbResultSetLabel:nth-child(87),.cbResultSetLabel:nth-child(88),.cbResultSetLabel:nth-child(89),.cbResultSetLabel:nth-child(90),.cbResultSetLabel:nth-child(92),.cbResultSetLabel:nth-child(93),.cbResultSetLabel:nth-child(94),.cbResultSetLabel:nth-child(95),.cbResultSetLabel:nth-child(97),.cbResultSetLabel:nth-child(98),.cbResultSetLabel:nth-child(99),.cbResultSetLabel:nth-child(100) { writing-mode:vertical-rl; white-space: pre; transform: rotate(180deg); border:none; } </style> It transforms 60+ columns. Any ideas on how to fix this?

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>

Hi Caspians, I'd like to have a report with a link in the HTML block. But when i mouse over the link, I'd like to view Image related to the Field. Is it possible? Michelle

Hi, I have a Yes/No field that is used in the Search form on a tabular datapage. I want to use a radio button for this field but I need to remove the 'Any' option (where the result is blank/null and all records show). I need the user to be able to only see 'Yes' and 'No' results separately and not all mixed together with the 'Any'/Null option. The setup wizard doesn't allow for removing 'Any' on a Yes/No field so I'm trying to do this with css. The radio button field is the 3rd in the list so I've been trying versions of: input#value3_12{ display: none!important; } Or input[id="value3_12"]{ display: none!important; } Neither of these works but it's got to be close. Does anyone know how to remove the 3rd 'Any' choice in a Yes/No radio button?

Comments on your script or code can be helpful specially when it gets complicated and larger. This helps you to mark different parts of your code which in turn will help you debug them. I compiled a list of comment tags that can be used on every part of your DataPage whether it's for a calculated field, formula data type, JavaScript, CSS, or HTML. HTML comment tag: <!-- this is 1 line of comment --> or <!-- these are multiple line of comments--> CSS comment tag: /* This is 1 line of comment */ or /* These are multiple line of comments */ JavaScript // single line of comment or /* This is 1 line of comment */ or /* These are multiple line of comments */ SQL -- Singe line of comment or /* This is 1 line of comment */ or /* These are multiple line of comments */

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.