Multi Select Drop Down?

Anvil Q&A
21

Sorry, was AFK.
Does the event hander fire?

22

Is there a way to find out I donā€™t see anything in the log output when I click the link

23

You need to pass the event handler as an object, so use the function name without the parentheses,
eg

morph.set_event_handler('click', self.myeventhandler)

Not sure where that event handler is defined, but I would just to be safe, create a method in your form class :

def myeventhandler(self, **params):
  print("Clicked by : ",params['sender'])
  # Then delete like this : 
  params['sender'].remove_from_parent()

(edited a few thousand times!)

24

Alsoā€¦

I havenā€™t used it myself but if you use a ā€œflow panelā€ then I think the links will line up in a row until the page wraps. Iā€™m going to try it ā€¦ works! See below ā€¦

25

Have a look at this :

https://anvil.works/ide#clone:SROWXGWPCEAYCZSK=5D6WQP4OOPXACJU3YXBBUZLH

Needs some styling but is the basis for a lozenge type thinggy.

(just updated it - 14:34 uk time)

5 Likes
26

Thatā€™s beautiful!

1 Like
27

I love this exactly what I was hoping to do :slight_smile:

1 Like
28

@david.wylie works great Iā€™ll just have to add some validation stuff in so it doesnā€™t duplicate genes

morph_menu

29

while on the subject even with using spacers anyone have suggestions on making the input boxes line up correctly, normally I always did CSS for this sort of thing using divs.

Thanks

30

They should line up naturally.
If you drag a textbox to the right of a label then do it again underneath, they should line up perfectly.

I can see however that yours do not. How did you build that?

31

They are just setup using spacers between the label and the inputs so that way I could make them not be super long, without using the spacers the input boxes were crazy long and still are on the mobile version of it too.

32

Have a look at what Iā€™ve done here :

https://anvil.works/ide#clone:PHGIFUJ6HCBOO3QM=52FPYJT3VU7XFJ6ILYI7T4AU

I have text boxes, drop downs and the flow panel, all lining up

33

yea I see what I did wrong I made a card but didnā€™t put them into a column panel, thanks for showing me

34

Another way is to limit the size of the card using roles.

See form 2 :
https://anvil.works/ide#clone:PHGIFUJ6HCBOO3QM=52FPYJT3VU7XFJ6ILYI7T4AU

35

Yea this works a lot better :slight_smile:

image
image.png959Ɨ599 27.3 KB

2 Likes
36

I love this! Itā€™s so visual. Just like putting boxes in a shopping cart.

How did you capture this video? I would like to do something similar for tutorials, walk-throughs, and the the like.

37

Yeah, Iā€™d like to do this too.

38

I develop on linux so I got the http://www.maartenbaert.be/simplescreenrecorder/ and created a video you can select a rectangle even around the area you want to showcase, then I took that and went over to https://ezgif.com/video-to-gif and created it as a gif. Just save the video as mp4 format and you are golden.

1 Like
39

I plan to use these on my main site for the app to showcase what it can do etc then just link off my Wordpress site to the sign up page for the app, etc so I donā€™t have to make a splash page for it per say

40

So now Iā€™m trying to go the other direction with my morph gene menu but for some reason it keeps holding onto the old data for some reason in the panel not sure what Iā€™m doing wrong here.

image
image.png727Ɨ283 16.5 KB

Notice how it has all the morphs there but in the output it should only have:

This is the morph: harlequin
This is the morph: lesser
This is the morph: yellow belly
This is the morph: pastel

Code:

def update_snake_name_dropdown_change(self, **event_args):
    """This method is called when an item is selected"""
    snake_name = self.snake_name_dropdown.selected_value
    snake_record = anvil.server.call('get_snake_record', snake_name)
    self.gender_dropdown.selected_value = snake_record['sex']
    self.hatch_date_picker.date = snake_record['hatchdate']
    update_morphs = snake_record['genes']
    print("This is the morphs panel: {}".format(self.update_morphs_panel))
    for morph in update_morphs:
      print("This is the morph: {}".format(morph))
    for morph in update_morphs:
      l = Link(text=morph)
      l.icon="fa:times"
      l.icon_align="left"
      l.background="#eee"
      l.role="lozenge"
      l.border="1px solid #888"
      l.set_event_handler("click",self.remove_morph)
      self.update_morphs_panel.add_component(l)
      print(self.update_morphs_panel)
    self.type_dropdown.selected_value = snake_record['snake_type']
    self.producer_dropdown.text = snake_record['producer']
    if snake_record['alive'] == True:
      snake_alive = 'yes'
    else:
      snake_alive = 'no'
    self.alive_dropdown.selected_value = snake_alive
    self.snake_image.source = snake_record['snake_pic']
    self.snake_image_preview.source = snake_record['snake_pic']

So the general idea is when someone changes the pulldown I via another function update the values here from the db but for some reason its not clearing out the morph section, everything else is fine. Iā€™m sure I have something stupid in here somewhere but Iā€™m banging my head against it trying to find it.