How To Use Tabs - XMPRO App Designer Toolbox

In this video, you’ll learn how to use tabs 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

tabs control and how to use it in app

designer so as you can see I have a

blank page here and under the layout

controls there's a control called tabs I

can drag that across if I want to use it

and that will give me a control over as

the name suggests I will have the option

to create multiple tabs and then each

tab can can have a content unique to

that tab when I drag it you will notice

that it has one tab and the place holder

where the content for that tab needs to

go I can very quickly add more tabs by

clicking on the header and then clicking

the plus button that gives me another

tab now when I click on the header I

have a few options to configure its

appearance with first of course is if I

want to change its its text or the title

that it is displaying for example I can

call it summary I can also choose an

icon for it out of the preset icons that

are available which can be anything and

then for the second tab I can do the

same stuff

so that gives me 2 unique tabs now each

tab has a content area as you can see

it's when I hover over it it says

summary content and over there I can add

the content for that tab let's say I

want to display a quick gauge over here

and the details 1 maybe I want to

display a grid one more option that I

have is if I click on the tabs control

itself which is over there I can either

go to layers and then then find it and

select it all I can click on the header

and then when I click the arrow above it

gives me the same tabs control I can

then look at the config options for the

tabs control as a whole and there I have

some options like tooltip I can also

choose which index or tab index should

be selected when the page loads 0 is the

first one would be the second one

visible or invisible is basically if you

want to hide the control in behavior we

just have an option if you want to

disable the control altogether so I'll

save this much and launch the app and we

can see what it means so as you can see

I have two tabs the first tab is the

sling the gauge that I put in and the

next tab is displaying a grid but of

course we did not mat that grid to

anything so it says no data now one last

thing we can do with the tab control is

that instead of displaying static tabs

we can bind the control itself so I'll

choose the tabs control and in block

properties you'll see I have a

datasource option but that allows me to

do is that I can choose a data source

and then whatever content or header

template I design over here will be

replicated on runtime for every data

item that is received from the data

source

so you can design one tab but on the

runtime you will see a tab for every row

or every item returned by your dinosaurs

now this option is very useful if you

want to create a bit of a template so if

I click on the header now you'll see I

can instead of giving it a static title

I can give it a dynamic title and choose

an item which is coming from my data

source like name so what will now happen

is that for every row that is returned

it's name will be a tab will be added

for it and and the name of that item

will be displayed for each tab header

then in the content area I can define

some template for example I put a field

set and then I put for example a text

control you will see that it will let me

find its value to a dynamic value that

is coming from the data source and that

will then display the health score for

the row or the data item that this tab

is representing and now when the page

loads you will notice that it has loaded

a tab for every row or that icon that it

received from the data source the

headers reflect that and then each one

of them has content based on that row so

that's how you use a tab control in app

designer thank you so much for watching