How to change background of the item being Selected

[NeoInJS]

I need assistance to change the background of an element in a gallery or list report when clicked. And get it's reference ID or info as a parameter

[nightowl]

Hi NeoInJS,

To create this click highlighting behavior:

1. Please edit the list/gallery report DataPage inside Caspio Bridge.
2. Then on the Search and Report Wizard - Configure Results Page Fields screen, please create a Header and Footer section.
3. Once you've done that, please paste the following code snippet inside the Footer section:

<style type="text/css">
.item-highlight
{
    background-color: red;
}

.item-highlight:hover
{
    background-color: red;
}
</style>

<script>
var oddItems = document.getElementsByClassName("cbResultSetListViewTableOddCell");
var evenItems = document.getElementsByClassName("cbResultSetListViewTableEvenCell");
var lastClicked = null;

function highlight()
{
    // Remove previously highlighted item
    if (lastClicked !== null)
    {
        lastClicked.classList.remove("item-highlight");
    }

    // Update the lastClicked tracker
    lastClicked = this;

    // Add the highlight
    this.classList.add("item-highlight");
}

var attachEvent = function (item, value)
{
    item.addEventListener('click', highlight);
};

Array.prototype.forEach.call(oddItems, attachEvent);
Array.prototype.forEach.call(evenItems, attachEvent);
</script>

 

As for the ID referencing part, I still have to find a way on how to do that. :-)

[nightowl]

Regarding the ID referencing part, here's what worked for me:

1. On the Search and Report Wizard - Configure Results Page Fields screen, add a new HTML block.
2. To insert your own HTML or JavaScript code you must go to the Source view as shown below.
3. Then, inside that HTML block, create a hidden input field that captures the value of the ID field:

   <input class="record-id" type="hidden" value="[@field:ID]" />

4. Don't forget to replace [@field:ID] with the actual name of your ID field. For instance, if you're using SS_ID as the table ID, then use [@field:SS_ID] instead.
5. Once you've done that, you can now use the following code snippet to retrieve the ID of the selected item:

   var lastClickedID = lastClicked.querySelector(".record-id").value;

   This reference ID (lastClickedID) can now be passed as a parameter value in a JavaScript-generated redirection link.