futurist Posted August 28, 2023 Report Share Posted August 28, 2023 Hi everyone, So i've been playing around with how can i make gallery reports look more appealing especially when the bulk edit/delete options are enabled because i find it a bit clunky and dated: And I have come up with some code (a combination of CSS and JavaScript) that can make it look more sleek (in my opinion) so that it'll look like this: For the CSS (to be placed in the header): <style> form[action*='[@cbAppKey]'] .cbResultSetListViewDataLabel{ display: none !important; } form[action*='[@cbAppKey]'] [class*='cbReportBlock']{ border-radius: 20px !important; padding: 10px !important; } form[action*='[@cbAppKey]'] [class*='cbReportBlock']:hover{ background: #f5f5f5; cursor: pointer; } form[action*='[@cbAppKey]'] [class*='cbReportBlock'] [class*='selectedturn']:hover{ background: red !important; cursor: pointer; } .cbActionPanel ul{ align-items: normal !important; } .cbActionPanel li:nth-child(1){ align-items: baseline !important; display: flex !important; margin-top: -2px; } .cbResultSetListGallerySelectAllActionLink{ margin-left: 5px; } #actioncontainer{ padding-top: 10px; visibility: hidden; } #actioncontainer * { font-size: 15px !important; } .selectedturn{ background: #D9D9D9 !important; } .cbResultSetListViewHeaderCheckBoxCell{ display: none !important; } form[action*='[@cbAppKey]'] [class*='cbBulkFormLabel']{ display: flex !important; align-items: center !important; } .cbActionPanel label, .cbActionPanel a{ color: black !important; text-decoration: none !important; } [action*='[@cbAppKey]'] [id*='PageActionsCtnr'] { visibility: hidden; justify-content: flex-end; } [class*="cbResultSetActionsContainer"]{ position: sticky; top: -10px; z-index: 1000; } </style> For the script (to be placed in the footer): <script> var cards = document.querySelectorAll("form[action*='[@cbAppKey]'] [class*='cbReportBlock']"); cards.forEach(function(card, i){ card.addEventListener('click', function() { card.querySelector("input[type='checkbox']").click(); if(card.classList.contains("selectedturn")){ card.classList.remove("selectedturn") if(document.querySelectorAll("form[action*='[@cbAppKey]'] [class*='cbReportBlock'] input[type='checkbox']:checked").length == 0){ document.querySelector("[action*='[@cbAppKey]'] [id*='PageActionsCtnr'] ").style.visibility = "hidden" } }else{ card.classList.add("selectedturn") document.querySelector("[action*='[@cbAppKey]'] [id*='PageActionsCtnr'] ").style.visibility= "visible" } }, false); }) var selectallcheckbox = document.querySelector("[action*='[@cbAppKey]'] [title='Select All']"); selectallcheckbox.addEventListener('change', function() { var alloptions = document.querySelectorAll("form[action*='[@cbAppKey]'] [class*='cbReportBlock']"); if (this.checked) { alloptions.forEach(function(option){ option.classList.add("selectedturn") }) } else { alloptions.forEach(function(option){ option.classList.remove("selectedturn") }) } }); </script> Using these code, instead of having checkboxes on each of the record "card" as i'd like to call it, the entire card becomes the checkbox which I think makes it more user-friendly and interactive and modern. The bulk options also appear only when there's a record chosen, but if there werent any chosen, it is hidden, which lessens the visual clutter of the datapage. DrSimi and wimtracking2 2 Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted August 29, 2023 Report Share Posted August 29, 2023 @futurist, Hey this is great--thanks for posting it. I'm looking forward to seeing where I can implement this as it does look a lot more modern. That's one thing about Caspio's datapages, they look REALLY dated now. I wish they'd update the Styles so us users don't have to spend so much time modifying just to make an app look current. Quote Link to comment Share on other sites More sharing options...
IamNatoyThatLovesYou Posted December 31, 2023 Report Share Posted December 31, 2023 Hello Everyone, just sharing this article as well that may be related to the topic. https://howto.caspio.com/tech-tips-and-articles/color-coding-in-datapages/ Quote Link to comment Share on other sites More sharing options...
jyll2113 Posted February 3 Report Share Posted February 3 It is possible you could make the button follow a link? Otherwise I love this!!! Exactly what Im looking for, just as a link Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.