in this video we'll show how you can add

badges

to buttons and to also to buttons that

are inside control bars

so you can see here we have a button

with a badge and he has a control bar

with a button with a badge

and then i've got a slider over here

where i can change the value

in the control bar so you can see this

now it's the sliders at a value of 24.

now it's at 41. and you can see that the

the badge is

changing in both locations over here but

now i'm going to move the badge to

the slider to a value that's above 99

and you can see that the badge goes to

99 plus

and that's because we've set a maximum

value for the badge to be 99

so it'll never show a number that's

above 99 so

if it's above 99 it just becomes 99

plus so let's go and take a look now at

how we

configured the button the standalone

button and also the button in the

control bar

so for here we'll go to our ux builder

and here's our button

it's just a regular button i've set it

to be image only and i've chosen

an icon over here that is

pretty large 102

pixels and then you can see that i've

gone i've said that this

button has a badge so there's my

show badge and then here are my badge

settings so i can set a class name

an inline style the location of the

badge can be top or bottom and then the

horizontal location can be left or right

the badge itself can be positioned

inside or outside the control

in this case i've got it inside the

control and i've got an offset of 20

pixels from the edge of the

control the default badge text is 23 and

then the maximum number

is 99 and this tells me here how i can

programmatically change the value

in the badge so i'm using this

javascript here

in the on change event of the slider

control so the

slider has been set here to a range of 0

to 200

and then in the change event here i'm

basically getting a pointer to the

button

i'm getting a pointer to the slider well

actually i'm getting the value of the

slider

and then i'm calling the buttons set

badge method

so this is how i set the value of the

[Music]

the badge on the button and then this is

how we set the value of the badge in the

control box let's go and take a look now

at how the control bar was set up so

first of all you'll notice that for the

control bar we've gone ahead and we've

defined a data item

called badge value and then for our

button over here

we've said that it has a badge

and then we've set the badge text to be

the value inside that data variable

called badge text and we've also here

set the maximum number to 9

to 99 and we've got our offset as

2 pixels and we're displaying it inside

the

edge of the button this would be outside

the edge of the button

so having done that now we can go and

run it

and we'll see that as i move the slider

the

text in the badge updates and then when

i get above 100

it just goes to 99 plus over there

and this was done in the

the sliders on change event you can see

what we're doing over here is we're

getting a pointer

to the control bar and then we're

updating the value of the

badge value variable to whatever the

value of the slider is so what we've

shown over here is how you can

add badges to buttons that appear

both standalone and also inside

control bars thanks very much for

watching