Canvas app UI element: tag box & list

I love opportunities to create “new” UI elements for a canvas app. Recently, I came up with the idea of creating a list of text values of variable size with the ability to easily remove items from the list. This could be useful when you want to add tags in a record or create some related records to a main record without filling in all fields immediately. You could also use this to have a variable amount of filters that you want to apply to a data source.

Since the concept I had in mind reminded me of when you filter items in a webshop based on tags, I called it a “tag box & list” component.

Desired behavior

The behavior that I want to achieve is relatively simple. In a text input control, I want to type my input and when submitting, it should be added to a list below the text box. I don’t want duplicate values in the list and I want to be able to easily remove items from the list.

Since I’m thinking about UI, I want this to look good as well.

Controls

To build this, we need a couple of controls:

• Text input
• 2 buttons
• Gallery, with inside
  • Label
  • Button
  • “Cancel” icon

The button inside the gallery will just be used for background of the item, so make sure it is at the bottom of the control hierarchy inside the gallery. In the below screenshots you can see the controls (I have renamed them to a descriptive name already).

Organize the controls as in the below screenshot (or a variation on it that best fits your application. Add the text “Add” to one of the buttons and “Clear” to the other. Of course you can style the controls according to your color scheme. I have made the “Clear” button gray so there is a distinction with the primary button to “Add” an item into the list below.

Basic logic

💡 In the function code, make sure to replace control and collection names with the names you are using.

o achieve the behavior described above, we’ll be working with a collection that is visualized inside the gallery. Items will be added to the collection using the text box (and “Add button”). To remove an item from the collection, the user presses the cancel icon inside the gallery, and the “Clear” button can be used to clear the collection with one click.

First thing to do is creating the collection by adding items into it. When a user presses the “Add” button we want to add whatever text is in the textbox to the collection. So, in the OnSelect property of the “Add” button, add the following code:

Collect(
        colText,
        txtTagToAdd.Text
    )

Clearing the collection is done by adding another piece of code into the OnSelect property of the “Clear” button.

Clear(colText)

To remove one item from the collection, add the following code into the “Cancel” icon’s OnSelect.

RemoveIf(colText,Value=ThisItem.Value)

Now we have defined the collection, and we can visualize it inside the gallery. Add the collection, in my case colText, in the Items property of the gallery. Next, set the Text property of the label inside the gallery to:

ThisItem.Value

You can now already test the tag box, and the basic functionality is complete: you can add tags into the list, remove one item from the list or clear the list completely.

The cherry on top

Now, there is some additional logic or functionality that I want to add.

1. The text box should automatically clear after adding a value into the list
2. Duplicate values should not be allowed
3. The “Add” button should only be active when the textbox is not empty

1. Automatically clearing the textbox

To automatically clear the textbox, we’re going to introduce a local variable that will be used as the Reset property of the textbox control.

In the “Add” button’s OnSelect property, add two extra lines to your function so it becomes the following:

Collect(
    colText,
    txtTagToAdd.Text
);
UpdateContext({locClearTextInput: true});
UpdateContext({locClearTextInput: false})

And set the Reset property of the textbox to

locClearTextInput

This ensures that the textbox will reset after the item is added into the collection.

2. Don’t allow duplicate values

When a user tries to add a duplicate value into the list, I want to display a warning and not add the item into the list. I don’t want to clear the textbox in this case, since it might be that they want two very similar items in their list.

To get this behavior, we will add onto the code we already have in the OnSelect property of the “Add” button – it’s really where all the magic happens. 😉 The complete function will be:

If(
    txtTagToAdd.Text in colText,
    Notify(
        "The item is already in the list, please try again with a different value.",
        NotificationType.Warning
    ),
    Collect(
        colText,
        txtTagToAdd.Text
    );
    UpdateContext({locClearTextInput: true});
    UpdateContext({locClearTextInput: false})
);

This checks to see if the text that is currently in the textbox is already in the list. If this is the case, a warning is displayed. Otherwise, the item is added and the textbox cleared, just as before. Below you can see what the warning looks like.

3. Deactivate the “Add” button when relevant

It doesn’t make sense to me to add empty items in the list, so I want to deactivate the “Add” button when the textbox is empty. This is possible by changing the DisplayMode property of the button to the following:

If(IsBlank(txtTagToAdd.Text),DisplayMode.Disabled,DisplayMode.Edit)

The result

You can see the resulting behavior in the below clip. The tag box behaves as expected: adding and removing items to and from the list is possible, there is a check for duplicates, and it’s not possible to add empty items in the list.

If you want to set this up even more quickly and/or experiment with it, I have uploaded an canvas app containing just this setup to my github here.