Discuss

Working with Arrays

On this page

The Array component in Wappler allows you to store items in arrays and manage them. Here we will show you a simple example of how to use an array in order to create a tags input, where you enter tags and display them below the input. Remove tag functionality is also available, so that it removes the selected tag from the array.

tags|582x322,100%


Adding Tags List

We created a simple Bootstrap 4 page, which contains a form input:

Screenshot_3|690x405

Select the text input and click the insert after button:

Screenshot_4|690x405

We need to add a repeat region, after the input. It will show the tags as buttons. Open the Data menu and select Repeat Children:

Screenshot_5|690x405

Then with the repeat children region selected, click the Add Inside button:

Screenshot_6|690x405

Open Forms and select Button:

Screenshot_7|690x405

Setup the Button style:

Screenshot_8|690x405

And its size - we select small:

Screenshot_9|690x405

We have the tags repeat region and the button set up, now let's add the Array Component and add the functionality to the input.

Adding Array Component

Select App in the App Structure and add a new component:

Screenshot_10|690x405

Open the Data menu and select Array:

Screenshot_11|690x405

You can see the Array Component options in the properties panel:

Screenshot_12|690x405

Now as we have the Array Component added on the page, we can setup the text input functionality.

Tags Input Setup

We want to add the tags in the tags array, when we hit the Enter button. First select the text input, then add new dynamic event:

Screenshot_13|690x405

Open the Keyboard category and select Key Press:

Screenshot_14|690x405

Click the dynamic event picker:

Screenshot_15|690x405

You will see all the dynamic actions available for the Array Component. We select Add Unique Item action - this will add new items to the array, but only if they are unique. If the value already exists it won't be added:

Screenshot_16|690x405

Click the dynamic data picker to select what value to add to the array:

Screenshot_17|690x405

This should be the value of the text input:

Screenshot_18|690x405

We also need to clear the text input value, once the tag is added to the array. So we select Set Value action under the text input:

Screenshot_19|690x405

And enter ''(two single quotes) as a value. This will clear the value of the text input, so you can add more tags. Click the select button:

Screenshot_20|690x405

We only want to add the tag and clear the text input value, when the Enter button is pressed. Open the Modifiers dropdown and select Enter:

Screenshot_21|690x405

We are done setting up the input, now let's bind the array values to the page.

Displaying Array Values on the Page

Select the repeat children region, wrapping your tag button and select the dynamic data picker for the expression:

Screenshot_22|690x405

Select Items under the Array component. This will repeat the button as many times as the items in the array are:

Screenshot_23|690x405

Let's bind the array values to the button so you can see the entered tags. Select the button inside the repeat and add new Dynamic Attribute:

Screenshot_24|690x405

Open the Display category and add Inner Text:

Screenshot_25|690x405

Then click the Dynamic Data picker for the inner text:

Screenshot_26|690x405

And select $value under the Repeat Children:

Screenshot_27|690x405

Removing Array Items

We will setup out buttons to remove the tags from the array when clicked. Select the button and add new Dynamic Event:

Screenshot_28|690x405

Select Mouse On Click:

Screenshot_29|690x405

Then click the dynamic action picker button:

Screenshot_30|690x405

And select the Remove Item At action. This allows you to remove a specific item in the array, by providing its index:

Screenshot_31|690x405

Select the dynamic data picker, to add the index:

Screenshot_32|690x405

And select the $index returned by the repeat children:

Screenshot_33|690x405

Click Select:

Screenshot_34|690x405

And you are done. Now when you enter some text and hit enter, it's added in the array and displayed under the text input. Clicking on any of the tag buttons will remove it:

tags|582x322