How To Use The Indicator - XMPRO App Designer Toolbox

In this video, you’ll learn how to configure an indicator 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

welcome to another training video from

XM pro today we will be looking at the

indicator controls and how it's used in

app designer so you can see that I have

a blank page here and in the tool box

under basic there is a control called

indicator if I drag that around it just

displays a black circle what that is is

that it it can display certain status

symbols or certain flags it has a few

appearance configuration options

starting with text you can decide what

text it should display which can of

course be bound to a data source

I'm or B static for example I wanna

display number 10 inside it you will see

that it is now displaying number 10

let's increase its size for the

visibility purpose and then I will

proceed with the rest of the options let

me increase the size and as you can see

it has now increase the diameter of that

circle another option we have is to

change the the mode should it be a

circle or triangle you can choose that

and triangle have its own sizing options

like that now quickly give it a better

color so it's more visible for you hey

there we go so if you choose triangle

you also have the option of choosing

that direction which can be up right or

down any there's this this is very handy

if you want to display a trend for

example a value which has increased from

last time or decreases and if decrease

means something wrong then you would

make it a red color and show a triangle

facing downwards next to a control or a

number or any other metric

so those are a few of the options here

I'll switch back to the circle now the

other option you will see over here is

that I can choose where it should appear

on the screen for example if I want it

to be at a certain location on the

screen I can do so by giving it an x and

y value and it will appear over there

this is very handy if you want to create

some sort of an image map or a HMI view

you would also notice that all these

options are bound able so you can

actually bind them to your data source

if the data was actually coming from a

data source now let's jump into the

action options you will notice that

these look very similar to the options

that are available in a hyperlink for a

button control so I will not be going

into too much detail over here um I

recommend you watch the button or a

hyperlink video and to understand how

the navigation options work but

basically if you choose and configure

the navigation over here then when the

user clicks on this indicator he will be

navigated to the other pages as you

would configure over here now what if I

want to display that as you can see all

I can figure here was static let's say I

want to display something based on what

my dad sources returning so I have a

data repeater here already mapped to a

data source let's go ahead and configure

it to display some data and using the

indicator so we will put an indicator

over there and let's also put some text

I'm over there and I can just strip to

get this right so I have some data

coming up I want to display it let's say

I want to bind this thing what's being

returned from my data source is an asset

ID a name a health score and status so

let's say I find name over there and I

find the health score over there and

lastly it is also returning me a status

color which I'm going to choose and

buying over here so and now if I save

this and I launch it but I expect to see

is that for every asset that is returned

that indicator will display and it will

display the color or the status color as

it was written by my data source so

these are a few of the options on how

you would use the indicator control

thank you so much for watching