Separate blocks for each record

[imJihyo]

Hi guys! I have a calendar datapage that shows schedules of clients/patients. Each day can accommodate more than 1 patient, but it can get a little confusing to see so much info in a day. Does anyone know how I can, like, put boxes or maybe anything that will separate the records from each other? 

Here's my test datapage:https://c7afw131.caspio.com/dp/a63390000bb5b1a6ed0344c1a94f

Any help or reference would be highly appreciated! thanks!

 

[ParkLoey]

Hi there again @imJihyo!

Would this do? I added a background color and margin too to make it look more separated

If this is what you want, you can add this style to your datapage header

 

<style>

dl.cbResultSetPanelDataContainer{
    background-color: beige !important;
    margin: 10px;
}

</style>

hope this helps!

 

- LOEY

[kpcollier]

If you wanted to get a little more in depth with the colors and whatnot, say maybe a different color for each Agenda type, you could use the workflow below.

Create an HTML block in the results section and disable the HTML editor for it. Add this code.

<p class="event">[@field:Agenda]</p>

<script type="text/javascript">

document.addEventListener('DataPageReady', function () {

 var blocks = document.querySelectorAll('[data-cb-name="DataCtnr"]');
 var events = document.getElementsByClassName('event');

for(var i = 0; i < blocks.length; i++) {
  if (events[i].innerText == "Check-Up") {
   blocks[i].style.cssText = "background-color: #a8e4a0; margin-bottom: 8px; border-radius: 4px; box-shadow: 3px 3px 4px gray;";
  } else if (events[i].innerText == "Follow-up") {
   blocks[i].style.cssText = "background-color: #add8e6; margin-bottom: 8px; border-radius: 4px; box-shadow: 3px 3px 4px gray;";
  } else if (events[i].innerText == "Ultrasound") {
   blocks[i].style.cssText = "background-color: #ffc8c8; margin-bottom: 8px; border-radius: 4px; box-shadow: 3px 3px 4px gray;";
  } else if (events[i].innerText == "Endoscopy") {
   blocks[i].style.cssText = "background-color: #ffcc99; margin-bottom: 8px; border-radius: 4px; box-shadow: 3px 3px 4px gray;";
  }
 }
});
  
</script>
<style>

.event{
display:none;
}

</style>