How to highlight selected values

Priya Ruth

Question

Hello,

I have few containers containing values from entity. On selecting(click) the value the container need to be highlighted to show it as selected item. Again onclick it need to be deselected. I can select multiple items. How to highlight or change css when selected. I can attach a sample oml if needed.

Thanks.

12 Jul 2020

Rahul

MVP

Hi Priya,

you can do it by simple JS code-

On Page

put this code on JS property-

$(document).on('click','.CommonClass', function(){
    if($(this).attr('class').split(' ').pop()=='selected')
    {
     $(this).removeClass('selected');
    }
    else
    {
    $(this).addClass('selected');
    }
});

Put this css on Css property

.selected{
    background-color: #861b1b;
    color: #fff;
}
.CommonClass{
border: 1px solid black;
cursor: pointer;

}

Provide a name CommonClass for container.

See Demo- https://rahul-sahu.outsystemscloud.com/Email/Demo.aspx?_ts=637301428896480625

let me know if you want any other solution.

Hope this will help you.

Regards

Rahul Sahu

12 Jul 2020

1 reply

12 Jul 2020

Show thread

Hide thread

Priya Ruth

Rahul Sahu wrote:

Hi Priya,

you can do it by simple JS code-

On Page

put this code on JS property-

$(document).on('click','.CommonClass', function(){
    if($(this).attr('class').split(' ').pop()=='selected')
    {
     $(this).removeClass('selected');
    }
    else
    {
    $(this).addClass('selected');
    }
});

Put this css on Css property

.selected{
    background-color: #861b1b;
    color: #fff;
}
.CommonClass{
border: 1px solid black;
cursor: pointer;

}

Provide a name CommonClass for container.

See Demo- https://rahul-sahu.outsystemscloud.com/Email/Demo.aspx?_ts=637301428896480625

let me know if you want any other solution.

Hope this will help you.

Regards

Rahul Sahu

Hello Rahul sahu,

Thanks for suggestion, but i want to select multiple items and can't we achieve this without using jQuery or javascript? The link you provided for demo can you make it anonymous so that I can have a look .

Thank you

12 Jul 2020

Rahul

MVP

Hi Priya ,

Now you can check , i have made it anonymous.

Can you provide oml.

Regards

Rahul Sahu

12 Jul 2020

1 reply

12 Jul 2020

Show thread

Hide thread

Priya Ruth

Rahul Sahu wrote:

Hi Priya ,

Now you can check , i have made it anonymous.

Can you provide oml.

Regards

Rahul Sahu

Attached an oml. kindly check

Demo.oml

12 Jul 2020

Rahul

MVP

Hi Priya,

I have updated you oml find it but i didnt understand what you want achive.

why Every onclick you call db action for create or update?

Regards

Rahul Sahu

Demo.oml

12 Jul 2020

2 replies

Last reply 12 Jul 2020

Show thread

Hide thread

Priya Ruth

Rahul Sahu wrote:

Hi Priya,

I have updated you oml find it but i didnt understand what you want achive.

why Every onclick you call db action for create or update?

Regards

Rahul Sahu

Hi Rahul,

I want to save the selected value in my database. i don't want to toggle classname by js as it is not best practice anyways thanks for your suggestion.

Thanks

12 Jul 2020

Rahul

MVP

Priya Ruth wrote:

Rahul Sahu wrote:

Hi Priya,

I have updated you oml find it but i didnt understand what you want achive.

why Every onclick you call db action for create or update?

Regards

Rahul Sahu

Hi Rahul,

I want to save the selected value in my database. i don't want to toggle classname by js as it is not best practice anyways thanks for your suggestion.

Thanks

Hi Priya,

I have updated oml again it will work without js.also added some logic you can find in oml

As data Insert in Usercolor entity without Users idenetifire. you can modify according youur logic.

regards

Rahul Sahu

Demo1.oml

12 Jul 2020

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines