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
Customer Support