Replace long wrapping text example

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