Jump to content

Search the Community

Showing results for tags 'color'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


MSN


Website URL


ICQ


Yahoo


Skype


Location


Interests

Found 15 results

  1. 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>
  2. Hi, Just wanna share this script I made that changes the background color of each record in a Gallery Report DataPage when clicking the button. For the button: <button onclick="RandomColor()">Try it</button> For the function that's responsible for changing the colors (For this one, there is no fixed set of color because this makes use of randomizers for setting the color code, so all colors possible can show up): <script> function RandomColor() { var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']"); x.querySelectorAll('div > div:nth-child(1)').forEach(e => e.style.backgroundColor = '#' + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2) + ('0'+(Math.random()*255|0).toString(16)).slice(-2)) } </script> Sample DP: https://c1hch576.caspio.com/dp/db26a00071c83c69ac9947d1bfd9 Alternatively, if you only wish to have a predefined set of colors to choose from, you can use this (simply change the colors in the array to your liking): <script> var colors = ["red", "blue", "green","orange","yellow","violet","lightblue","cyan","magenta"]; function RandomColor() { var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']"); x.querySelectorAll('div > div:nth-child(1)').forEach(e => e.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]) } </script> Sample DP: https://c1hch576.caspio.com/dp/db26a000574d59f66468479b955a Hope this helps!
  3. I can color the background on input fields, but not having luck on calculated fields. Also want the amount in bold.
  4. 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
  5. I have set up a calendar report with multiple records on each date. Some of the entries have pending status, others are scheduled. I would like the pending records to have the status field's font color as red. This would make it much faster to find lessons that need to be scheduled. I cannot schedule the same lesson at the same time for different teachers, so there is a lot of juggling involved. The calendar view is critical so we can easily see the other lessons for the same day and week. The field name is LessonStatus, the value of field is either archived, cancelled, scheduled or pending Any help would be appreciated! Thanks
  6. Hello, I have a Tabular Reports page that show different permits that have an expiration date. I want to make the row turn red if the expiration date has passed. I have tried to use the following but it does not work. Any help would be appreciated. <a id="visi[@field:TenantID]"> <script> var isi = document.getElementById("visi[@field:TenantID]"); if('[@field:Expiration])'>'GetUTCDate()'){ isi.parentNode.parentNode.style.backgroundColor = 'red'; } else{ isi.parentNode.parentNode.style.backgroundColor = '#NoColor'; } </script></a> The [@field:Expiration] is a formula field in the table.
  7. How can I change the color of the header for the record index?
  8. 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?
  9. 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?
  10. I want to change the color of an entire column. No conditionals necessary.
  11. Hi, I have chosen a combination chart to represent my data in which there are bars that represent the annual sales in dollars and there are lines that represent the count of various fields. However, the color used for the bars is quite bold compared to those of the lines. So how can I lighten the color of bars and bolden the colors used for the lines?
  12. Where can I change the color of the label of HTML Block in results page of tabular report?
  13. is it possible to change only one label or field result color? We have a comment field we would like to stand out if the comment is displayed.
  14. Hi, I'm using the bulk edit option on a tabular report. I have rules set on the bulk edit to govern what data can be changed during the bulk edit based on the records selected by the user. I have placed css code into the datapage (configure bulk edit) and my stylesheet to update the text of the required fields to red in the bulk edit dialog box. In the Caspio preview all the required fields show as red. On my website the required fields still show as black. I used the developer tool and found that the class assigned on the website is different from the class assigned in the CASPIO preview which is why the color is incorrect on the website. The td class on the website should be <td class="cbBulkFormLabelCell cbBulkFormLabelRequired"....</td> Website class assignment: <td class="cbBulkFormLabelCell_334daf58b60dbf cbBulkFormLabel_334daf58b60dbf" style=""><span class="cbBulkFormEnableCheckBoxContainer_334daf58b60dbf"><input type="checkbox" name="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb" id="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb_334daf58b60dbf" disabled=""></span><label for="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb_334daf58b60dbf">Rate End:<span style=""><span class="cbFormRequiredMarker_334daf58b60dbf">*</span></span></label><span class="cbBulkFormHintLabel_334daf58b60dbf" id="BulkEditScan_Load_Table_MAIN_ALLScans_REND_hnt_334daf58b60dbf"><img class="cbBulkFormHintLabelImage_334daf58b60dbf" src="https://c3amf140.caspio.com/images/tooltip_icon_gray_outlined.png" alt="[?]"></span></td> CASPIO class assignment: <td class="cbBulkFormLabelCell cbBulkFormLabelRequired"><span class="cbBulkFormEnableCheckBoxContainer"><input type="checkbox" name="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb" id="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb_612e7963285d5d" disabled=""></span><label for="EnableBulkEditScan_Load_Table_MAIN_ALLScans_RENDCkb_612e7963285d5d">Rate End:<span class="cbBulkFormRequiredMarker"><span class="cbFormRequiredMarker">*</span></span></label><span class="cbBulkFormHintLabel" id="BulkEditScan_Load_Table_MAIN_ALLScans_REND_hnt_612e7963285d5d"><img class="cbBulkFormHintLabelImage" src="https://c3amf140.caspio.com/images/tooltip_icon_gray_outlined.png" alt="[?]"></span></td> Bulk Edit CSS (Placed in stylesheet and datapage) <style> .Dialog { width: 660px !important; height: 630px !important} <style> .cbBulkFormLabelRequired { color: #F44336 !important; font-size: 10px !important; font-family: Arial, sans-serif !important; font-weight: bold !important; z-index: 2000 !important; } .cbBulkFormLabel { color: #444444 !important; font-size: 10px !important; font-family: Arial, sans-serif !important; font-weight: bold !important; } .cbBulkFormData{ font-size: 10px !important; } .cbBulkFormSelect{ font-size: 10px !important; color: #333333 !important; font-size: 10px !important; font-family: Arial, sans-serif !important; font-weight: 300 !important; padding: 5px 6px !important; background: #FFFFFF !important; border-color: #e9e9e9; border-width: 1px !important; border-style: solid !important; box-sizing: border-box !important; } .cbBulkFormTextField{ font-size: 10px !important; color: #333333 !important; font-size: 10px !important; font-family: Arial, sans-serif !important; font-weight: 300 !important; padding: 5px 6px !important; background: #FFFFFF !important; border-color: #e9e9e9; border-width: 1px !important; border-style: solid !important; box-sizing: border-box !important; } </style> Thanks, Bre
  15. I have a combined chart and report datapage that I use to display a list of jobs and their status. I would like the list and chart to have dynamic colours according to their status. This is quite easily accomplished, and in fact I have already completed it. My issue comes in place with AJAX. I cannot disable AJAX on a combined chart/report datapage, therefore when I do a bulk edit on my report, the chart reverts back to the default colours. I am guessing this is because the chart loads without running the javascript in the datapage. Is there a way to execute javascript in a datapage not only on load, but also on an AJAX call? Thanks, Josh EDIT: I just realized that it's not because of the combined chart/report that I cannot turn off AJAX, but it is because of the grid edit.
×
×
  • Create New...