How To Use Tags - XMPRO App Designer Toolbox

In this video, you’ll learn how to use tags in the XMPRO App Designer.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.

Transcript

hi and welcome to another training video

from XM pro today we will be looking at

how to use the tags component as a

prerequisite you should have already

gone through the video on how to create

data sources if you haven't done that I

recommend going through that video first

tags can be found in the basics section

of the blocks the tags component allows

you to tag specific items from a list in

order to get items into that list you

need to select a data source I've

created one previously and then you need

to select the display expression and the

value expression these can be the same

column if we save it now as is and run

it we can see that when we click here

it's going to load the data source and

then you'll be able to select out of the

items if you don't want one of the items

you can press the X and it will remove

it for you or you can click on it and

select the items you want the tags

component has many options to play with

in appearance we've got visible which is

self explanatory styling mode which you

can choose from outlined underlined and

field underlined will have a line

underneath the box filled or fill the

box an outlined is the default with an

outline around the box placeholder if

you saw if you put something else here

when you don't have a value it will sort

it we'll set this as the placeholder we

have tooltip

which when you hover over the component

it will pop up a tool a tooltip

multiline which means that when your

tags get to the end of the line they'll

start to enter more on the second line

etc the show Clear button option creates

a button on the tag box with an X in it

that allows you to clear all selections

show drop-down button shows a drop-down

button in the in the right side of the

box as you can see there and show

selection controls enables checkboxes on

the left side of the drop-down so we'll

run this oh we need to say first so save

and then run if we remove all the items

it says please select a website and then

the items have check boxes on the left

this is we have the drop down button on

the right and the Clear button for

behavior we have apply value mode use

buttons or instantly so if you say use

buttons then the drop down will have

buttons at the bottom saying OK and

cancel and if you say instantly then

whatever selection you choose that will

add it to the tag box we have search

enabled which if you check this it will

allow you to search in the tag box we

have read-only and disabled

self-explanatory and then we have value

which you can have a static value or a

dynamic value where you can select a

column from a data source on a container

if we save this and then run now if we

select an item in here it's instantly

reflected in the tag box this has been

how to use the tags component