[support-michael]

Example: Dynamic Long Wrapping Text Replacement

Occasionally a user interface will need to dynamically replace or update the content of a Text widget. This example demonstrates using the Visual Designer to reserve space in your UI for long wrapping text that will be updated programmatically.

Step-1: Add a Text widget to your screen design

Step-2: Enter the default content of the text widget
– double click the text widget and type-in the text
– remember you can add new lines using Control key + Return

Step-3: Pad the text widget’s width and height with additional white space that you expect to need at runtime with longer text
See attachment replace-text-example-dcseries.png
Step-4: At runtime use a snippet of javascript code to update the text widgets content
In this example I use a button who’s OnClick handler is a Run JavaScript action that calls a text replacement function. The button cycles through 3 different length messages from single line text to a long multiline text.

example jquery code: $(‘#m1-replace-wrapping-text-text1’).text(longAssMsg);

Here is a runtime sequence of cycling through and replacing the default text with different length strings when user clicks the Update Text button.
See attachment replace-text-example-series.png

Source Code
See attachment dynamic-replace-wrapping-text.zip

Attachments:

You must be logged in to view attached files.

[Yann]

Hi Wayne
your example run as well in portrait mode but how i can do a auto resize in landscape mode?
i tried but my text is under screen right border
helpppppp
thanks
Yann

[support-michael]

@Yann

The original example was quick and dirty. It did not take into account different orientations or screen sizes. Here is a small tweak that enables the text widget to resize to maintain it’s left and right margins. I hope this helps with your layout.

Attachments:

You must be logged in to view attached files.

[Yann]

Ok Wayne, i found where is my problem
i placed a planel transparent widget to allow vertical scrollin for long remote texts.
i allow dynamic resize for panel and text widget like you screen capture but i’ve not the same result.

[support-michael]

@Yann

Can you post an example design file that exhibits the issue. Also let’s move this coversation back to the original thread on the Getting Help forum.

[nzeh]

I tried that ctrl + return and it doesn’t work for me to add another line. Is there a reason why it might now me working. Right now I have the trail version.

Thanks,
Nathan A. Zeh

[nzeh]

@nzeh wrote:

I tried that ctrl + return and it doesn’t work for me to add another line. Is there a reason why it might now me working. Right now I have the trail version.

Thanks,
Nathan A. Zeh

Found out it isn’t ctrl + return…. It’s shift + return…..

[Author]

Posts