Multi Select with User Input for Each Selected Item
Question
Application Type
Reactive

Hi All, 

I am new to OutSystems, and trying to create a reactive app. One section of the form i'm creating requires the following:

  • A display of list of items that the user can select. The user might select none, one, or multiple items.
  • For each item selected, the user is required to input the quantity of that item.
  • User can select 'other' where the item does not appear on the list. If the user selects 'other', they will be required to input the name of the item as well as the quantity of that item.
  • User might have multiple 'other' items. If this is the case, user needs to input the name and quantity of each 'other' item. 

The current paper form shows something along the lines of this: (text in red is an example of what the user might fill in)


Item NameQuantity
Apple       1
Banana       4
Cantelope
Donuts
Eggs
Fish
Grapes
Honeydew
Ice Cream
Jelly
Kiwi Fruit
Lemon
Mango
Nectarine       2
Orange
Pickles
OtherQuantity
Lychee      5
Durian      2




I have 40 items to list and had considered a multi-select list, but being that quantity needs to be input, i wasn't sure how to achieve this..! 

Hoping there is a super easy solution out there that someone could recommend as i'm very very very new at this and might not be able to cope with anything too difficult! :) TIA!!


Hello Howie Bennetts,

From what I understood, you can use a list of records with IntemName and Quantity. 

This list would be firstly filled with the existing items, and you would use the list append when you want to add a new one ('Other' case).

Let me know if that fits you.

Regards,

Tomás Dionísio

Hi  Howie Bennetts,

check this oml file, trying to represent what has been explained above. 

Best regards,

Tomás Dionísio.

MultiInput.oml

Thank-you very much for this! I am looking at it now to learn how to apply this :)
Is it correct to say that the 'save' button is where i will save all the information into the database that I create so that i can save the information? 

Hi Howie Bennetts, 

Yes. On that save button you are supposed to submit your list to the Database.

Best regards,

Tomás Dionísio. 

Hi Tomas,
Is it possible to alter this solution so that the initial 40 item list is a dropdown list where a user selects an item, inputs the corresponding quantity, then if needed, clicks 'add another item' and continues on. Each of these items are displayed each time an item is selected.
Then below that we have the 'other' item and it's functionality?

The dropdown functionality for the 40 items would save a lot of real estate on the page as a user would usually only select 2-3 from the list of 40 items..


Thanks!!

Hi Howie,

Yes. You can do it by creating a static entity 'Item' with all the 40 values.

Next step is to use dropdown to list the records on static entity, with an input for the quantity.

For the 'Add other' logic, you can reuse what is represented on the oml file!

Hope it helped you! 

Regards,

Tomás Dionísio.


MultiInput.oml

Hi Tomas,

I am almost there, so thanks very much for your help with this! One more (hopefully the last) question!
Would you know how to clear the '0' that appears at initial run of the form? I tried the customer function 'listclear' at the start of 'AddOtherOnClick' but of course then it will never display the appended list(!). I then tried to add in 'listclear'On Initialize but that hasn't worked for me either... 

Hi there again,

Seems to me that all you need to do is delete the first append on 'GetItemList' screen action. 

You can append all records that you have already saved on your Database instead.

Hope that solves this your challenge! 

Best regards,

Tomás Dionísio

Thank-you so much and apologies for all the silly questions!! 

Hi Howie,


Welcome to the OutSystems community :).

Actually there is no direct component you can simply use for this use case. What you can do is to create a Block which it has a list includes the item name as expression and next to it you can drop an input widget and link its variable to one of the list items properties.

This list can be appended with additional items which will be two inputs, one for the "other" item name and one for the quantity. You can also add a checkbox to determine whether the quantity should be input (to be filled) or empty.


Regards,

Hasan

Thank-you for responding Hasan! I must admit I will need to reread your post a few times to get my head around the terminology and concepts and will then give it a go. :) 

Oh sorry for that, I didn't know that you still exploring the platform.

I recommend to attend the courses in this training path before working on OutSystems, so we can understand the terminologies as starters.


Regards,

Hasan

Thanks for the guidance Hasan! I am currently 1/4 of the way through that training path so i'm glad to see that i am on the right track :)

Hi Howie,

I'd create a list exactly like the aggregate you're fetching but adding an "IsSelected" and a "Quantity" properties.

I'd have to create a screen action that would run on the OnAfterFetch event of your aggregate to set up the list with the information on the Aggregate. You can iterate the aggregate and use a listappend to add the information you need to each list postition.

The IsSelected is so that you can place a checkbox on each row of your list that will have the IsSelected value (False by default). And the Quantity property will have the quantity (0 by default) on an input widget.

On the On Change of the IsSelected you'll change its value from False to True or vice-versa and if it is true you can show the input widget for the Quantity if it is false you will erase the quantity. (On the widget's visible property set it to IsSelected)

You can then add a button to add a new entry to your list using the listappend!

I hope I was clear enough, and that this helps you on your quest to master Outsystems! You can do this, welcome to Outsystems!

Thanks for responding Luis! Outsystems is a great product - but a bit of a learning curve for someone that is not too technical (i.e. someone like me) so I am slowly trying to wrap my head around it all!
I will definitely give this a go (once i can follow the steps properly!) :)

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