How To Use The Accordion - XMPRO App Designer Toolbox

In this video, you’ll learn how to use the accordion 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 accordion component as

its prerequisite I recommend looking

through the video on how to create data

sources before watching this one

the accordion can be found in the layout

section of the blocks an accordion is a

group of accordion items that can be

expanded and collapsed to add more

accordion items click on one accordion

item and press the plus button in the

toolbar or click on the accordion itself

and there's also a plus accordion items

can be renamed and they can have I can

icon is applied to them you can select

from a library there are many icons in

here or you can select from a URL or you

can upload an icon you can also disable

specific accordion items on the

accordion itself you can either you can

get there by clicking on an accordion

item and then pressing the up arrow in

the toolbar or by going into the page

layers and selecting the accordion in

its properties we have a tooltip

visibility which is self-explanatory and

then we have allow expanding multiple

which if unchecked allows you to only

expand one accordion item and if checked

it allows you to expand multiple items

collapsible which allows you to collapse

all the accordion items if checked and

then disabled for the entire accordion

selected index is the index of the

accordion item to be selected by default

so

would be the first accordion item one

would be the second accordion item and

so on and you can add any other

component inside the accordion items so

for instance I can add a field set to

the first accordion item I can add a

circular gauge to the second accordion

item and a color selector to the third

accordion item and then if we save this

and launch it by default we have the

second accordion item selected with the

circular gauge inside of it and because

the accordion has a collapsible checked

we can collapse all the items and we can

also open more than one so this is the

field set that we've added to the first

one and the third one has a different

name and an icon so if I add another

accordion to the page

and then select the accordion itself so

I clicked an accordion item and press

the up arrow to select the accordion and

then go into block properties and data

source and I've created that a data

source previously for this so we select

the data source and then if I click on

the Audion item and go into appearance I

can make the title the name of the

person for each row and then if I want I

can add a field inside the accordion

item or something like that and then I

can change this to dynamic value and

select the ID note that if you do this

the you can't add anymore

accordion items in here and any

accordion items that you have had in

there will be made invisible and you

won't be able to access them until you

turn the data source off again so what

this is going to do is it's going to

create accordion items per data item so

we've got Bob Rachel and etcetera and

then each of these is going to have the

ID put in the field at the label of the

field set this is how you attach a data

source to an accordion this has been how

to use the accordion component