Axure Substring Function Tutorial

Axure Substring Function Tutorial

It formats, it verifies, it makes Julien fries!

Alright, so fries aren’t a possibility, but the other two are. Axure substring function is one of those cool features that has as many creative uses as there are Axure users. This Axure tutorial adds onto Learn to Dynamically Set Widget Values from the Axure’s How To section.

In case you’re wondering, the little girl is not a substring.

Paul S. of Axure defines substring() as a function that returns the characters from a string, between the start index (“from”) and the end index (“to). I’ve always wondered how different people imagine an index in their heads.

Here’s my interpretation:

axure substring visual 1

The word Axure contains 5 letters and each letter represents a square, or space, in the index. As a rule of thumb, 0 is always the starting point of an index, not 1. This means that the total number of spaces in an index will always equal the total length of the indexed value plus one for the zero value.

Now that you know this not-so-classified information, consider yourself a little more dangerous. Below are different examples of how the substring function can be used. We’ll use the same value of “Axure” as the local variable LVAR1:

[[LVAR1.substring(0,5)]] returns “Axure”

axure substring visual 2

[[LVAR1.substring(0,2)]] returns “Ax”

Axure substring visual 3

[[LVAR1.substring(2,5)]] returns “ure”

Axure substring visual 3

Let’s mix it up a bit

We already know that [[LVAR1.substring(0,LVAR1.length)]] returns “Axure” and this is because[[LVAR1.length]] equals 5, the total number of letters in the word Axure. Since it is in the end index, the above variable expression is essentially the same as [[LVAR1.substring(0,5)]].

Using the same concept, [[LVAR1.substring(0,LVAR1.length – 1)]] returns “Axur”

Axure substring visual 4

Let’s say that instead of “Axure,” LVAR1 equaled the number value “12345” and we wanted to format that value by inserting a comma making it 12,345. Using the substring function, here are two ways to achieve this:

Way 1

[[LVAR1.substring(0,2)]],[[LVAR1.substring(2,5)]]Notice the comma placed between the two substring declarations.

Way 2

[[LVAR1.substring(0,LVAR1.length – 3)]] , [[LVAR1.substring(LVAR.length – 3, LVAR1.length]]

dynamically insert comma into substring value in Axure


Substrings are fun. So fun I didn’t need to end the last sentence with an exclamation mark. In an upcoming tutorial, we’ll join the substring function and dynamic panels in holy matrimony and show you how to format math values with dollar signs, commas, and decimal points like Microsoft Excel does.