How to disable the selected element in the combo box

How to disable the selected element in the combo box

  

Hi, 

I want to disable the selected element in the combo box. How can i do that one. Can anyone have a solution for it.I am also sending the images how i want to display the combo box

Regards,

Koushik

hi Pra,

here u go:

You can set the enable property to false  - either directly or by using a variable. So assign the enabled property to a variable of type boolean, say it isEnabled.

For web application, may be you need to Ajaxize the widget.

regards,

indra


 

Hello Koushik

In HTML, hou have the following, for options:

https://www.w3schools.com/tags/att_option_disabled.asp

But there is no way to accomplish this directly in OutSystems, other than using JavaScript, and probably will not be easy also.

I recommend to instead remove the element from the list.

If you are using an aggregate to provide the items list, you can filter it and refresh the aggregate to remove the item and refresh the combo box to reflect that change.

Cheers.

Eduardo Jauch wrote:

Hello Koushik

In HTML, hou have the following, for options:

https://www.w3schools.com/tags/att_option_disabled.asp

But there is no way to accomplish this directly in OutSystems, other than using JavaScript, and probably will not be easy also.

I recommend to instead remove the element from the list.

If you are using an aggregate to provide the items list, you can filter it and refresh the aggregate to remove the item and refresh the combo box to reflect that change.

Cheers.

Hi Eduardo,

if i make a filter then the option will not show but i have to show the old option and i have to disable it. see in attachment  i have selected element "bbb" and after that the element in combo box its disabled.like that i have to implement.is there any solution for it.

Regards,

Koushik.


Indra Budiantho wrote:

hi Pra,

here u go:

You can set the enable property to false  - either directly or by using a variable. So assign the enabled property to a variable of type boolean, say it isEnabled.

For web application, may be you need to Ajaxize the widget.

regards,

indra

Hi Indra,

I have to disable the element inside the combo box,not the combo box.Thanks for your reply.

Regards,

Koushik

 



koushik prathi wrote:

Eduardo Jauch wrote:

Hello Koushik

In HTML, hou have the following, for options:

https://www.w3schools.com/tags/att_option_disabled.asp

But there is no way to accomplish this directly in OutSystems, other than using JavaScript, and probably will not be easy also.

I recommend to instead remove the element from the list.

If you are using an aggregate to provide the items list, you can filter it and refresh the aggregate to remove the item and refresh the combo box to reflect that change.

Cheers.

Hi Eduardo,

if i make a filter then the option will not show but i have to show the old option and i have to disable it. see in attachment  i have selected element "bbb" and after that the element in combo box its disabled.like that i have to implement.is there any solution for it.

Regards,

Koushik.


Hi Koushik,

Your requirement in general provides a worse UX than the solution Eduardo suggests, not showing invalid options is in most situations a better approach than not allowing the user to choose displayed choices. Can you explain why you have to implement it like that?

Jorge Martins wrote:

koushik prathi wrote:

Eduardo Jauch wrote:

Hello Koushik

In HTML, hou have the following, for options:

https://www.w3schools.com/tags/att_option_disabled.asp

But there is no way to accomplish this directly in OutSystems, other than using JavaScript, and probably will not be easy also.

I recommend to instead remove the element from the list.

If you are using an aggregate to provide the items list, you can filter it and refresh the aggregate to remove the item and refresh the combo box to reflect that change.

Cheers.

Hi Eduardo,

if i make a filter then the option will not show but i have to show the old option and i have to disable it. see in attachment  i have selected element "bbb" and after that the element in combo box its disabled.like that i have to implement.is there any solution for it.

Regards,

Koushik.


Hi Koushik,

Your requirement in general provides a worse UX than the solution Eduardo suggests, not showing invalid options is in most situations a better approach than not allowing the user to choose displayed choices. Can you explain why you have to implement it like that?

Hi Jorge,

We Are implementing the previously developed system now in outsystems. They implemented like that because  they want to avoid the user to selects  the same element multiple times and in below we are displaying the list of selected elements in list. If you removes the element from list and again the element will be in enabled in combo box list of elements.so can you help me with any solution.

Regards,

Koushik.


Koushik,

Assuming you have two queries one that returns the list of available options (I'll call it the Available query) to be displayed in the dropdown and another query that shows the selected options (I'll call it the Selected query) in a Table/List Records.

The solution is to follow Eduardo's suggestion:

  • Set the Source Record List of the Drop Down to be the Available query.
  • Set the Source Record List of the List/Table Records to be the Selected query.
  • When the user selects a new option from the Drop Down, the "Add" Screen Action that handles it should save the new selection to the database and, if it's an Ajax Submit:
    • Use Data Refresh tool with the Selected query (so it includes the newly selected option)
    • Ajax Refresh the Table/List Records that show the selected options.
    • Use Data Refresh tool with the Available query (so it does not include the newly selected option)
    • Ajax Refresh the Drop Down, so it shows only the available options.
  • If the user removes one of the existing selected options, you'd do the opposite, the "Remove" Screen Action that handles it should delete the selection from the database and, if it's an Ajax Submit, do exactly the same as described above for the "Add" Screen Action.

This will guarantee that only possible choices show up on the drop down, and selected choices show in a list/table somewhere else on the screen.

Jorge Martins wrote:

Koushik,

Assuming you have two queries one that returns the list of available options (I'll call it the Available query) to be displayed in the dropdown and another query that shows the selected options (I'll call it the Selected query) in a Table/List Records.

The solution is to follow Eduardo's suggestion:

  • Set the Source Record List of the Drop Down to be the Available query.
  • Set the Source Record List of the List/Table Records to be the Selected query.
  • When the user selects a new option from the Drop Down, the "Add" Screen Action that handles it should save the new selection to the database and, if it's an Ajax Submit:
    • Use Data Refresh tool with the Selected query (so it includes the newly selected option)
    • Ajax Refresh the Table/List Records that show the selected options.
    • Use Data Refresh tool with the Available query (so it does not include the newly selected option)
    • Ajax Refresh the Drop Down, so it shows only the available options.
  • If the user removes one of the existing selected options, you'd do the opposite, the "Remove" Screen Action that handles it should delete the selection from the database and, if it's an Ajax Submit, do exactly the same as described above for the "Add" Screen Action.

This will guarantee that only possible choices show up on the drop down, and selected choices show in a list/table somewhere else on the screen.

we cannot delete the selected element from the list, just we have to disable that element .Once see the above image i sent you will get an idea.


Hi koushik prathi,

                             In the preparation of the page run the below Script by using run run java script action, pass the id of the the drop down and  the index of the element which you want to disable.

<script>
function myFunction()

{
    document.getElementById("DrpdownID").options[Itemindex].disabled="disabled";  
}
</script>

if you want it dynamically traverse the loop through the JavaScript action and pass index of the item which you want to disable. it will work.



Thanks

Rajendra Singh

Hi Koushik and Rajendra,

Though I understand that business demands sometimes put unjust burden on the developer to develop a specific kind of UI, you must understand that OS is meant as a low-code tool, that you can leverage to create functionally great apps quickly, but that also imposes some limits on what it can do with regards to UI components. Yes, of course you can drag JavaScript onto every screen to customize UI components, but that will seriously defeat the advantages of using OutSystems (JavaScript is not low code).

Though it's great there's an apparent solution to Koushik's problem, I would urge you both to try to solve things the OutSystem's way - which sometimes means telling your boss or customer that no, you just can't do that with OS - instead of shoehorning JavaScript into a low-code tool, and basically derailing the way people should use the tool to its proper advantage.

Rajendra koranga wrote:

Hi koushik prathi,

                             In the preparation of the page run the below Script by using run run java script action, pass the id of the the drop down and  the index of the element which you want to disable.

<script>
function myFunction()

{
    document.getElementById("DrpdownID").options[Itemindex].disabled="disabled";  
}
</script>

if you want it dynamically traverse the loop through the JavaScript action and pass index of the item which you want to disable. it will work.



Thanks

Rajendra Singh

Thanks Rajendra, if you don't mind can you send a demo .oml at context of dynammic disabling

Thanks,

Koushik.


Hi Koushik,

You can use JQuery or Javascript (as suggested by Rajendra), and for JQuery here is the code:

where:

a)

"1" in the option[value=1]  is the value of combo element to be disabled.. off course you can get change the value dynamically by concatenating the string (like as shown by TestName.Id.. 

b)

c)

and i try:

where He has ID of value "1".

regards,

indra


Indra Budiantho wrote:

Hi Koushik,

You can use JQuery or Javascript (as suggested by Rajendra), and for JQuery here is the code:

where:

a)

"1" in the option[value=1]  is the value of combo element to be disabled.. off course you can get change the value dynamically by concatenating the string (like as shown by TestName.Id.. 

b)

c)

and i try:

where He has ID of value "1".

regards,

indra

Thanks Indira, can you help me with making multiple elements disable at run time. 

Regards, 

Koushik.



hi Kousik:

What you need to do is just loop the RunJavaScript action:

How it works:

1. Web application logic is in the server, so before it is sent back to the browse, all must be complete.

2. Once in the browser, the JQuery will be executed.

 I try, now all these three items are disabled:

regards,

indra

Indra Budiantho wrote:

hi Kousik:

What you need to do is just loop the RunJavaScript action:

How it works:

1. Web application logic is in the server, so before it is sent back to the browse, all must be complete.

2. Once in the browser, the JQuery will be executed.

 I try, now all these three items are disabled:

regards,

indra

Thanks indra, My point of view is when user selects "he" then the "he" has to disable. if user for second time selects the "you" now both "you" and "he" has to disable like this i want. Can you help me with this things

Regards,

Koushik.


Hi Koukish,

The logic is the same. When you click the HE.. you can update the Data entity in the OnChange Action:

Just add another column to the Data enity, say it IsSelected, and when you select, update it to True, than after that just filter in the GetData aggregate (see above) where ISelected=True. All the rest is the same.

regards,

indra


Indra Budiantho wrote:

Hi Koukish,

The logic is the same. When you click the HE.. you can update the Data entity in the OnChange Action:

Just add another column to the Data enity, say it IsSelected, and when you select, update it to True, than after that just filter in the GetData aggregate (see above) where ISelected=True. All the rest is the same.

regards,

indra


Thanks indra, if we filter the aggregate with ISelected by default its value is false and list we are assigning to combo box so then list will be empty so it will not show any elements in combo box.how to resolve this issue. can you help me out with it

Regards,

Koushik. 


Hi, Koushih,

The combo is populated with all records in the Data entity. The JavacScript selects the records that have been selected .. isselected = true (you must update in the OnChange Event...). 

Here in the .oml attach, i use static entity (you can make it entity as it is not updated; i add another column, IsSelected and set you and me .. true, and he false).

See the code, and you will see. GOod luck.

regards,

indra

Indra Budiantho wrote:

Hi, Koushih,

The combo is populated with all records in the Data entity. The JavacScript selects the records that have been selected .. isselected = true (you must update in the OnChange Event...). 

Here in the .oml attach, i use static entity (you can make it entity as it is not updated; i add another column, IsSelected and set you and me .. true, and he false).

See the code, and you will see. GOod luck.

regards,

indra

Thanks indra, i am forwarding my oml file i am not able to make the selected item disable can you see once

Regards,

Koushik.


Hi Koushik sorry for the late reply,

                  highlight bracket is missing in the jquery please see the image.


Thanks

Rajendra Singh

Rajendra koranga wrote:

Hi Koushik sorry for the late reply,

                  highlight bracket is missing in the jquery please see the image.


Thanks

Rajendra Singh

Thanks Rajendra, But i am not able to achieve the desired output.Now the selected options Are not displaying in the combo box.Can you help me with any solution

Regards,

Koushik.

 


Indra Budiantho wrote:

Hi, Koushih,

The combo is populated with all records in the Data entity. The JavacScript selects the records that have been selected .. isselected = true (you must update in the OnChange Event...). 

Here in the .oml attach, i use static entity (you can make it entity as it is not updated; i add another column, IsSelected and set you and me .. true, and he false).

See the code, and you will see. GOod luck.

regards,

indra

Thanks indra, But i am not able to achieve the desired output.Now the selected options Are not displaying in the combo box.Can you help me with any solution

Regards,

Koushik.


Solution

Hi Prathi,

here is my solution. Good luck!

I try:


regards,

indra

Solution