Working with Arrays

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


Adding Tags List

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

Select the text input and click the insert after button:

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:

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

Open Forms and select Button:

Setup the Button style:

And its size - we select small:

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:

Open the Data menu and select Array:

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

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:

Open the Keyboard category and select Key Press:

Click the dynamic event picker:

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:

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

This should be the value of the text input:

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:

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:

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:

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:

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

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:

Open the Display category and add Inner Text:

Then click the Dynamic Data picker for the inner text:

And select $value under the Repeat Children:

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:

Select Mouse On Click:

Then click the dynamic action picker button:

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

Select the dynamic data picker, to add the index:

And select the $index returned by the repeat children:

Click Select:

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

8 Likes

Is it possible to use autocomplete properties with this text box?
Instead of just adding strings as tags, can I bind objects to tags?
How populate the tags with existing data in edit page ?
How to store data in separate joined table with primary Id, tag Id ?

  1. guess so, it can be done.
  2. not understood - what do you mean by objects?
  3. add a server connect on the page and link the array from it to the repeat div. you’ll want to have to separate repeat - one for server connect, another for the changes made by user on page.
  4. in the server action when you add a insert query, you can add more tables and define the JOIN relationship.

strongly suggest to do these things separately first, understand how it works, then you can cumulatively build this thing much easily.

1 Like