Adding Lines of Text to a Text field without erasing existing Text

Axure RP 8
1

Hello! I want to have a button click send the selections of several drop down menus to a text field below. However I would like for it to be able to do this continuously without reseting the values already added. So each time the button is clicked, it will add the selected values to a new line in the text field:

First set of selected values

Second set of selected values

User input notes

Third set of selected values

Any type of iteration of this would work. I imaging it is probably easier to have it keep populating from the first line and shifting each item down as it happens? I really don’t know how to go about it other than selecting “Set Text” .

2

Hi Kevin,

One way to retain (and not replace) the original text is to use the [[target.text]] property, which accesses the text of the widget that’s on the receiving end of a triggered interaction. It also sounds like you may already be familiar with adding text of a droplist selection; and so I’ve included a screenshot putting these steps together:

You’ll see I created three Local Variables within this Action. And you can read about more ways to use local variables, below:

https://www.axure.com/support/reference/variables

HTH!
SetText.rp (59.1 KB)

2 Likes
3

Thank you for the input… unfortunately I am using Pro 7… so I can’t open the file you attached.

I have attempted what you have shown me, but it doesn’t seem to be working. I have used [[target.text]] (with both T and t) and it inputs “undefined” at the start of the text in the text area and does not maintain this text when more is added. The button press continues to overwrite what is already in the text area.

4

Yep, here’s a v7 copy:

SetTextv7.rp (57.9 KB)

FWIW, since Axure RP 8 was released as a free upgrade for all license holders, you can use your existing licensing information to activate the new version. Feel free to head over to www.axure.com/download, launch the new version, and enter your licensee name and key. With RP 8, you can view both current v8 files and pre-v8 files.

Let me know whether you get the interaction working, though; if you could attach your current RP file of your progress, I’d be happy to take a look and suggest possible edits as well. Thnx!

5

Hi Alex!
Thank you for your helpful solution here.

I was wondering if was possible to alternatively remove one of the list items after it was added?

I’ve attached my axure file for reference. Ideally I’d like to keep everything in one text box rather than break it up because I will eventually have 30+ options to select from.

Thank you for your help!

  • Cat

SelectWithCheckboxes.rp (98.5 KB)

6

Hi Cat!

I like how you’re currently simulating this interaction by way of creating pre-set text widgets in the Display area. If you’re going for something more realistic, it can jump right into more advanced prototyping (e.g. using JavaScript string functions or potentially using repeaters).

As an example, you can try using the following string function in each checkbox’s OnUnselected Set Text action that targets the “OptionString” label:

[[target.text.substring(0,target.text.indexOf(this.text))]][[target.text.substring(target.text.indexOf(this.text)+this.text.length+1)]]

Here are a couple screenshots showing where you can set this up:

For more context at this stage, check out the following docs on the substring() and indexOf() Javascript methods:

https://www.w3schools.com/jsref/jsref_substring.asp

https://www.w3schools.com/jsref/jsref_indexof.asp

https://www.axure.com/support/reference/math-functions-and-expressions#common_functions

Feel free to refer to this edited RP file as you read along:

SelectWithCheckboxes_Edit.rp (98.1 KB)

The substring expression in the first set of double-brackets takes the value of target.text (i.e. the text on OptionString) and returns a portion of the string between a defined numeric start point and end point. With this part of the function, we want to capture any options that exist in front of the string all the way up to the portion of text that should be left out (via OnUnselected):

[[target.text.substring (0,target.text.indexOf(this.text)) ]]

The substring expression in the second set of double-brackets returns the text from the point where the matching text is positioned all the way to the end of the entire string (+1 to accommodate the extra space between list options on the OptionString widget):

[[target.text.substring (target.text.indexOf(this.text)+this.text.length+1) ]]

Hopefully some of these tips can help get you a step closer!