18
Views
12
Comments
Solved
Cell-Highlighting in a Table Records widget using JavaScript
Application Type
Traditional Web
Service Studio Version
11.8.13 (Build 32892)

I have a table of Therapists (see below).  The user selects the therapist. The on-click event highlights the cell as shown.

If the user selects another Therapist, the cell is also highlighted but the previous selection needs to return to white (un-highlighted).  This is what I cannot get right with a limited knowledge of JavaScript.

I tried to work with a local variable called PastCellId but could not achieve anything with it.

Thanks

Leon

Rank: #68
Solution

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

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.

Rank: #68
Solution

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

Rank: #3661

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

Rank: #68

Hi Leon,


Have you added the class selected-cell in your Theme?


The rest I have it like you and it works.


Cheers,
João

Rank: #3661

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.

Rank: #68

Hi Leon,


On your Theme, you have .Selected-Cell with capital S and C, which doesn't match the class in the Javascript where you have selected-cell. Can you change it to .selected-cell on your Theme?


Hope it helps.


Cheers,
João

Rank: #3661

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

Rank: #68

You showed the same class defined in two themes. Perhaps you just have just adjusted it in one of them?

Can you share your OML?

It should be easier to pinpoint what is missing.  

mvp_badge
MVP
Rank: #75

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

Rank: #3661

Benjith,

Thank you for your solution. Unfortunately I have resolved the issue using the solution that João offered.  It is working perfectly, but I will examine your code.  I am sure I will learn something from it.

Regards,

Leon

mvp_badge
MVP
Rank: #75

You are welcome, Leon.

Happy to help you... Glad you got it solved :)


Kind regards,

Benjith Sam

Rank: #3661

João,

Your solution is working!  Thank you.

Leon