Hello,

you don't need to use JS for that. You can add an identifier type variable to your therapist table. And match this variable to the therapist selected in an action. And in the list put in the extended properties, style = if (list.current.id = ItemSelectedId, "background-color: blue;", "")

This should solve your problem.

Hi Leon,

May I suggest that you work with classes instead of styles? It's way easier to identify the elements after.

So I would create on the theme, a class selected-cell with background-color: LightBlue;

And then the Javascript would be:

function Highlight(CellId) {

    var selectedCell = document.getElementsByClassName("selected-cell")[0];

    if(selectedCell !== undefined)

        selectedCell.classList.remove("selected-cell");

    document.getElementById(CellId).classList.add("selected-cell");

}

It simply identifies the element with selected-cell class and if it finds one, it will remove the class and after adds the selected-cell class to the new cell you want to highlight.

Hope it helps.

Cheers,
João

João ,

Thank you for your response.

I tried to implement your suggestions but I am not getting it right.  This is what I did but there is no change in color of the cell.  Please can you help me see what I have done wrong?

Thanks.

Leon

I have place the Selected-Cell in the style sheets as shown below.  The first is the Web Screen Style Sheet and the second is the Theme Style Sheet.  I am not sure which one is superfluous. However, it still does not work.

I made the change but still no change of color on the click.  I must be missing something.

Hi Leon,

For the mentioned use-case, I also tried out a solution...

Steps:

1) Add the below CSS in the Screen Style Sheet section

.TableRecords .selected-cell {
    background: yellow;
    color: black;
    font-weight: bold;
}

2) Add the below JS in the Screen JavaScript section

function markCell(e) {
    const selectedTableCell = document.querySelector('td.selected-cell');
    if(selectedTableCell) {
        selectedTableCell.classList.remove('selected-cell');
    }
    e.target.classList.add('selected-cell');
}

3) On every Cell define the onClick handler call in the extended property as shown below

See this sample app-EmployeeList

Hope this helps you!

Kind regards,

Benjith Sam

João,

Your solution is working!  Thank you.

Leon