Jump to content
  • 0
NeoInJS

How to change background of the item being Selected

Question

2 answers to this question

Recommended Posts

  • 0

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. :-)

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...