Search the Community

I'd like to add some HTML to my Datapage to conditionally change the color of a report's background and text color based on the value of a calculated field. This field finds the number of days left until a project is due. I'd like to change the text color of this field to red and the background to yellow if it is past due (if the days left are negative). I know there are a couple of other pre-existing threads on this topic but for some reason I am having no luck. I pasted these in the source of my header but they had no effect. Let me know if you see anything wrong with my formulas: //for the background <a id="visi[@calcfield:1#]"> <script> var isi = document.getElementById("visi[@calcfield:1#]"); if(isi < 0){ isi.parentNode.parentNode.style.backgroundColor = 'red'; } else{ isi.parentNode.parentNode.style.backgroundColor = '#NoColor'; } </script></a> //for the text <div id="mydiv[@calcfield:1#]"> </div> <SCRIPT LANGUAGE="JavaScript"> if ("[@calcfield:1#]" < "0"){ document.getElementById("mydiv[@calcfield:1#]").innerHTML ="<span style='color:red;'> [@calcfield:1#] </span>"; } </SCRIPT>

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.

Hello everyone, Thank you in advance for reading this and potentially responding. Long story short: I have a simple Pivot data page with item names and months as well as submission status. This is used exclusively to spot records per item/month that have not been "submitted". My stakeholders want to see the status in color. Green for "Submitted", yellow for "Partly submitted", and red for "Not submitted". Whether it's text or background color doesn't really matter much but I prefer background. I think I am capable of adjusting the tones on my own, but I struggle with making the script work in the first place. The specific names of my fields are: Item Name, Month, Status. Here is what I already tried, unfortunately, none of it ever displayed. 1. Adding a Header and Footer or an HTML block on the results page and disabling HTML in the tab Advanced. 2. Taking various scripts from Caspio guides and forums and attempting to change them to fit my field names and Status values. For example, starting with this script from the guide: <span id="[@field:ID#]changeColor1" style="color:#008000"></span> <span id="[@field:ID#]changeColor2" style="color:#0000FF"></span> <span id="[@field:ID#]changeColor3" style="color:white; background:red"></span> <script> if([@field:GPA#]>=3.5 && [@field:GPA#]<=4.0 ) { document.getElementById('[@field:ID#]changeColor1').innerHTML='A'; } else if([@field:GPA#]>=3.0 && [@field:GPA#] <3.5) { document.getElementById("[@field:ID#]changeColor2").innerHTML='B'; } else if([@field:GPA#]>=2.5 && [@field:GPA#]<3.0 ) { document.getElementById("[@field:ID#]changeColor3").innerHTML='C'; } </script> Let's leave the colors as they are since I am confident with that part. Here is my attempt at replacing the values with my own (the only relevant field is Status and it has three values: "Submitted", "Partly submitted", "Not submitted"): <span id="[@field:Status]changeColor1" style="color:#008000"></span> <span id="[@field:Status]changeColor2" style="color:#0000FF"></span> <span id="[@field:Status]changeColor3" style="color:white; background:red"></span> <script> if([@field:Status] = 'Submitted') { document.getElementById('[@field:Status]changeColor1').innerHTML='Submitted'; } else if([@field:Status] = 'Partly submitted') { document.getElementById("[@field:Status]changeColor2").innerHTML='Partly submitted'; } else if([@field:Status]= 'Not submitted') { document.getElementById("[@field:Status]changeColor3").innerHTML='Not submitted'; } </script> And here is how I set it up (please mind that while I tested HTML blocks instead in other data pages and it still didn't work, you can't add them in the pivot table, so I'm limited to the Header and Footer): Nothing changes. I even made a draft table and a data page to test some of the scripts with their original field names but somehow it still didn't work for me. I will be grateful for any help! Thank you, Dominika

Hello there, I have two iFrames inside an HTML Page; one is a Submission Form, the other is a Report shown as Tabular. The iFrame with the Tabular Report receives parameters once you press "Submit" on the iFrame containing the Submission Form. It works, but I have to refresh the HTML Page in order for the changes to show in the Tabular Report. What I want is the iFrame containing the Tabular Report (or the entire HTML Page, either way is good) to refresh once i press "Submit" on the iFrame containing the Submission Form, so that the changes will show automatically after i send the parameters. Can it be done? Any help on this matter is appreciated!

I have a working conditional statement using SQL. However, the output (following the "then" statement outputs plain text. Does anyone know how to force it to be formatted as a clickable link? Here's the full statement: CASE WHEN [@field:connect_PIF_ER_eval_complete]='' then '<a href="participant_evaluation.html?ER_ID=[@field:ER_Events_1_ER_ID]&Ev_Type=[@field:ER_Events_1_Event_Type]">Evaluation</a>' ELSE 'Evaluation Completed' END I'm sure it's obvious, I'm just not sure what needs to surround the href tag. Thanks!

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

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?

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?

If any of you uses RICH text editor for user inputs, you will notice that the actual data in the table contains HTML tags that describes the format used with the input. Ex. Will have the following data in your table: If you want a "clean" version of this text you can create a trigger/task that will remove the HTML tags. You can copy the Trigger below: The "formatted_txt" will be the field that uses the Rich text editor and the non_formatted_txt_trigger will contain the "clean" text version. Rich text editor will convert < and > to their entity name which are &lt; and &gt; and a "Non-breaking space" will be converted to: &nbsp;. The following blocks will replace this entity name to their actual value.

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 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

I'd like to make the format of my list report look nicer, how can I do this? Specifically, I'd like to be able to highlight every other row of data (not data cell) and align the labels and the data so that they are directly underneath each other. Edit: Additionally, it would be nice if I could have conditional formatting on the data so that if it is below the goal, the text turns red and if it's at or above the goal the text turns green. The data cells are using calculated fields. Is there a way I can do this conditional formatting in an HTML block that references the calculated field?

I want to be able to limit inline edits/inserts on a datapage. I'm trying to limit a date to dates that are after 1 week ago. Is there a way I can do this?

I'd like to have a colored table that can highlight past due items. This is the code I have in an HTML block that highlights the row of past due dates and turns the font color red. <div id="visi[@field:lines_Line_Number]">[@field:dates_Customer_Expected_Date*]</div> <script> var isi = document.getElementById("visi[@field:lines_Line_Number]"); if('[@field:dates_Customer_Expected_Date*]' < '[@cbTimestamp*]'){ isi.parentNode.parentNode.style.backgroundColor = 'yellow'; //background color isi.style.color="red"; //font color } else{ isi.parentNode.parentNode.style.backgroundColor = '#NoColor'; } </script> Meanwhile, this is part of the color I have in my header that turns the column headers and background different colors. style type="text/css">[class*=cbResultSetHeaderCell]:nth-child(1) { background: #3377FF !important; } td[class*="cbResultSetData"]:nth-of-type(1){ background-color: #4D88FF !important; } [class*=cbResultSetHeaderCell]:nth-child(2) { background: #1966FF !important; } td[class*="cbResultSetData"]:nth-of-type(2){ background-color: #3377FF !important; } [class*=cbResultSetHeaderCell]:nth-child(3) { background: #0055FF !important; } td[class*="cbResultSetData"]:nth-of-type(3){ background-color: #1966FF !important; } [class*=cbResultSetHeaderCell]:nth-child(4) { background: #cc0000 !important; } td[class*="cbResultSetData"]:nth-of-type(4){ background-color: #E60000 !important; } [class*=cbResultSetHeaderCell]:nth-child(5) { background: #cc0000 !important; } Here is the result of this code: Clearly, the highlight works as it applies to uncolored columns. How do I alter the code so that the highlight is prioritized and will override any existing color?

I'd like to have different colors for some of my column headers so that I can group them together. How can I do this?

I want to change the color of an entire column. No conditionals necessary.

I have a HTML Block displaying a QR Code from an URL I received here: However I would like the data to be used to populate the QR Code be from a table called tbl_btc_address in a column called bitcoin_address and also select the first value that is not ticked (No). Could someone please help in this custom request?

Hi, I noticed that the hidden calculated fields on the Configure Details Page once deployed are visible in the inspect tool: So my question is; is it possible to call those values on the same page via HTML and display them? The reason why I want to do this is to have one big Datapage with all the values and calculations between a display:none div and then call each one in their own spot on the page HTML.

I'd like to be able to timestamp when each individual column is updated. Basically, when column "x" is updated, the column "timestamp_x" is updated with the time "x" was updated and when column "y" is updated, column "timestamp_y" is updated with the time "y" was updated and so on. Is there a way to do this with a trigger? Or within the datapage with HTML or with a calculated value? Let me know if you know a solution! Thanks!

Hi, I am trying to embed multiple calculated fields in my HTML Block with the website raw HTML code, but it changes the structure and look which is not desirable. Could someone please troubleshoot for me where I'm going wrong? What it should look like: (This is with individual datapages embedded in each block) What it comes out as: (When I try to combine all of it in one datapage) Here is the original HTML: <div class="container-fluid"> <div class="d-sm-flex justify-content-between align-items-center mb-4"> <h3 class="text-dark mb-0">Dashboard</h3><a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Generate Report</a> </div> <div class="row"> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-primary py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-primary font-weight-bold text-xs mb-1"><span>Earnings (monthly)</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>$100,00</span></div> </div> <div class="col-auto"><i class="fas fa-calendar fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-success py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-success font-weight-bold text-xs mb-1"><span>Earnings (annual)</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>$215,000</span></div> </div> <div class="col-auto"><i class="fas fa-dollar-sign fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-info py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-info font-weight-bold text-xs mb-1"><span>Tasks</span></div> <div class="row no-gutters align-items-center"> <div class="col-auto"> <div class="text-dark font-weight-bold h5 mb-0 mr-3"><span>50%</span></div> </div> <div class="col"> <div class="progress progress-sm"> <div class="progress-bar bg-info" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"><span class="sr-only">50%</span></div> </div> </div> </div> </div> <div class="col-auto"><i class="fas fa-clipboard-list fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-warning py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Pending Requests</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>18</span></div> </div> <div class="col-auto"><i class="fas fa-comments fa-2x text-gray-300"></i></div> </div> </div> </div> </div> </div> </div> And here is the HTML in my HTML Block in a Datapage: (HTML Block 2 has 4x </div> to hide the calculated fields) <div class="container-fluid"> <div class="d-sm-flex justify-content-between align-items-center mb-4"> <h3 class="text-dark mb-0">Dashboard</h3> </div> <div class="row"> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-warning py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Trade Growth</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:1#]%</span></div> </div> <div class="col-auto"><i class="fas fa-database fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-warning py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Average Growth</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:2#]%</span></div> </div> <div class="col-auto"><i class="fas fa-wave-square fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-warning py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Last 7 days</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:3#]%</span></div> </div> <div class="col-auto"><i class="fas fa-sort-amount-down fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-warning py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Previous Trade</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:4#]%</span></div> </div> <div class="col-auto"><i class="fas fa-backward fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div style="display:none;"><div>

hello everyone, I am new to caspio but am very happy of their existence. let me explain. as a computer consultant i have been hired to upgrade a customer's website. He has one created exclusively with tools from the DIY website wix.com sadly, wix does not support my customers request for a database. Happily, Caspio DOES support database usage within a wix built website. I first went to Caspio support but they referred me here (for free). Specifically: database has four fields --- first name, last name, ls certification, certificate i.e. text, text, nn-nnnn, pdf file input: last name output: first name, last name, ls certification, link to view pdf of ls certification I am already signed up for next week's 3 Caspio webinars but as of the moment I need you help most! thanks

Is there a way to preview HTML email in trigger without enabling it and sending the email?

Hi Guys, hope someone can assist me with this. I'm creating a Html page which has 3 buttons. Each button has a redirect link to a sharepoint page which contains excel sheets, word files stored in it. I require a code for the buttons which can change based on data availability on sharepoint in this Html page. For example if my system date is 9/24/2019 and if any file is available on sharepoint link with same date information the button color changes to green and if not then red,

Hello, In a tabular datapage I need to show/hide a field (text64000) that contains html markup and needs to display as html. I use a div id to isolate each record in the tabular datapage's recordset. Then I use an 'if' statement to check the values of 2 fields in that record ("field1" and "field2"). If both criteria are met I need to then show the text64000 field ("field3") in html format. If both criteria are NOT met I need it to show nothing. The below code works to check "field1" and "field2" and then show a value in the span, either a typed in text value or a normal text field for that record. The problem is when I try to use the field that contains the html markup ("field3" in this example). It doesn't show anything (is blank). I know the "if" statement is working because I've tested it with other fields, just showing the field in html is the problem. Does anyone know how to tweak this so "field3" will show in html? I tried putting it in a div instead fo a span but that didn't work either. Any help would be greatly appreciated. <div id="mydiv[@field:MyRecordUniqueID]"></div> <SCRIPT LANGUAGE="JavaScript"> if (("[@field:myfield1]" == "SHOW") && ("[@field:myfield2]" == "active")) { document.getElementById("mydiv[@field:MyRecordUniqueID]").innerHTML ="<span>[@field:myfield3!]</span>"; } </script>