Dynamically Adding Text To End Of A Text Box Or Text Area

Anvil Q&A
1

What I’m trying to do:
I have a repeating panel with buttons and a text area/box. When the user clicks on one of the buttons, I want that text to go the end of the already existing text in the text box/area.

For example, I am typing. The Green Bay Packers are averaging ____

I have a button that says points_per_game

I want to points_per_game to be inserted where ___ is.

What I’ve tried and what’s not working:

2

From your description, I’m having trouble picturing how you want the app to work. It may be helpful to draw a picture and share that (after taking a picture of it with your phone or webcam, perhaps).

You may be able to do what you want more simply without using a repeating panel.

Forgive me if you’ve already worked through some tutorials like this, but if not you might find this one helpful: Anvil | Write client-side Python

3

Thanks for response. I’ll take a picture here shortly. But basically, I want the text from the button i press to be appended to the current text in the text box. And then the user could continue writing, and pressing buttons with the next word being the text from the button they press.

4

You can get the current text from the box, append the desired text, and set the focus back onto the box, something like:

self.text_area_1.text += text_to_append
self.text_area_1.focus ()
1 Like
5

Thank you. I’ve never heard of the .focus() option. I’ll give this a shot.

6

Thanks for the suggestion. I was not able to get this to work when the buttons are in a repeating panel. However, it works when I just have a single button on the page. Any suggestions? I appreciate your help on this.

7

https://KQTN67WEW5MF35TC.anvil.app/LIQH2KUGAGSHBUJ7MONYZ2YF

Here is the link, to the example if this helps.

8

There’s a technique when you want a click inside a repeating panel row to affect something on the outer form. You create an event handler on the repeating panel itself that points to a function in the outer form. Then in the repeating panel rows, you can trigger that event.

Something like this in the outer form (untested, just to give you the general idea):

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    
    self.repeating_panel_1.set_event_handler('x-append', self.append)

  def append(self, text, **event_args):
    self.text_area_1.text += text
    self.text_area_1.focus ()

Then inside the repeating row template’s button click function:

    self.parent.raise_event('x-append', text="Text to append")

You can pull the text to append from the button text, or wherever.

3 Likes