Multi Select List Box like in Salesforce


#1

I would like to emulate the Multi-Select List box function of Salesforce Multi-Select List box. This looks like selections on the left that are loaded in, You can then multi-Select them and then use the arrow buttons to move the to the right. Is there a tutorial out there that covers this case?

Thank you in Advance

Bene’t


#2

Hi @Benetg, are you trying to create something like that? If so, you can do that by placing a few repeaters on the canvas and copying the rows with the selected state to the target repeater. I’ve attached the file that illustrates this approach. Currently, it works only for the right arrow, but you can do it and vice versa if you copy the interactions. I hope this helps, and please let me know if you have any additional questions!Multiselect_Salesforce.rp (61.9 KB)


#3

Tanya,
Thank you this is exactly what I was looking for.

I do have a couple clarifying questions, if you don’t mind?
You are increasing the size of the TextArea by height of “target_r”+10
a) why increase the text area by height +10 but not increase the Target_DP but the same height?
b) why did you have to create a local variable to put the value of the widget into the variable?

Now for the big one:
I feel like I am missing something essential that I imagine everyone would like to know how to do. Once I select the object and add it to the opposite box, How do I delete if from its origin box? I tried marking the row and then deleting marked rows but the debugger does not give me insight into if I am setting that correctly.

How would I delete the items from the origin box as they move to the target box?
Multiselect_Salesforce v2.rp (96.7 KB)

Thank you for all your effort here. I am getting the sense that multi-select is a bear for a lot of folks.

Bene’t


#4

@Tanya_Axure sorry forgot to tag you


#5

Hi @Benetg, if you want to delete the items from the source box when you click on the arrow, you will need to add a couple of tweaks. Specifically, you will need to mark the rows in the source repeater whenever the Source_Item is selected and unmark them when this item is not selected. Furthermore, you will need to add “Delete rows” applied to the marked rows on the Click or Tap interaction for the right line.

For the other question, I set the size of the target text area to the height of the target repeater plus ten px because I wanted to see the whole target repeater plus this gap between the target text area and the target repeater at the bottom. You can try deleting this action to check what changes and decide whether it’s something you’d like to keep. I used the local variable to be able to access the target repeater parameters and use them in my Set Size calculation. You might also just delete these calculations and mark “Fit to Content” for the dynamic panel and the repeater on the Style Pane if you’d like them to be as they are, as I did in this sample file. I hope this helps!Multiselect_Salesforce_delete.rp (63.5 KB)


closed #6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.