Making Gallery Reports look more appealing

[futurist]

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.

 

[DesiLogi]

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

[IamNatoyThatLovesYou]

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/

[jyll2113]

It is possible you could make the button follow a link? Otherwise I love this!!! Exactly what Im looking for, just as a link