so in this video we'll show how you can
create a two-sided card layout that is
animated when you flip the card from the
front to the back so you can see here we
have a view box that's got a two-sided
card layout so when I tap on this icon
over here we flip the card to its back
and then we can see the contents that
has been put on to the back so you can
put contents on the front of the card
and you can put contents on the back of
the card and the actual animation is a
3d CSS transition so this two-sided card
effect is available in the view box in
the freeform HTML layout and also in the
list control so let's go take a look now
at how this was done so let's go here
and start from scratch we'll create a
brand new view box and let's go over
here to view box we'll add our new view
box in and then we'll go to the Layout
tab on the view box and we'll say load a
template from the library and here all
of our templates and we're going to go
all the way down here to the two-sided
chord layout with animation and when you
select that you can see you get a dialog
asking you to set properties of each
side of the card so we can specify the
size of the card
the ID the background color the
foreground color and then that icon to
use to move from the front to the back
and then from the back to the front so
I'll just go ahead and click OK and here
is the HTML template that got inserted
for us here is the CSS that got inserted
for us and here is the a5 item that
flips the card from front to back so
let's go ahead now and just click OK and
then we'll run the card
so here we go there and there's the
front and there's the back of the court
so we can put any content that we want
over there so let's go now and look at
how we can add a two sided card layout
to a list control so we'll go over here
we'll create a new list we'll just use
some static data for this list so I'll
go here and I'll choose say the
Northwind sample over there and then I'm
going to go to list properties and I'm
gonna go and sit my list to a free-form
layout so I'll go there and I'll choose
freeform and then I'll go to the layout
here and I'll start out by taking a
template so I'll start out with
basically using one of these templates
so then I'll go here and just click OK
so that puts in and then I'll just
choose what when I use their template
I'll just say that the context is going
to be the customer ID that level 1 will
be company name level 2 will be say
contact name the summary will be
basically contact title and the detail
just will be address so I'm just
basically creating a row template here
that uses one of the existing template
styles so that's what my list looks like
right now you can see there's my list
basically over here so now let's go and
basically add a two sided card template
over there so I'm going to go back to
the layout I'm gonna copy all of this to
the clipboard then go back to predefined
templates go to more templates and go
yeah and stick in the two-sided template
I'll just accept all of these defaults
over there and then where we have put
front of card over here I'm just going
to go there and paste in the original
template that I had and then for the
back of the card I'm gonna go there and
just choose say some of the fields I'll
go here and
the country-region and postal Carlisle's
has put a space in between them and then
I'm going to just go back to my list
properties and choose a sub-theme for
this list I'm gonna choose a subtle and
click OK and now go over to work and
preview to see what this list looks like
so he has our list you can see there's
the first row using a template and then
if I click on the button we switch to
the back and within Germany and the
postal code so there's the front and
then we can go to any row in the list
and flip from front to back so you can
see here that using the two-sided card
layout in the list is just as easy as
using it in a view box and then finally
the third place where you can use a
two-sided card layout is a free-form
layout template you can go there and
then click on the insert HTML template
and scroll down to the two-sided card
accept all the defaults close this down
and let's move this to the top of the
list and run it now so here you can see
our to our freeform layout now also has
a two-sided chord we I can put any
content that I want on the front and any
content that I want on the back so what
we've shown in this video is how you can
create some very attractive 3d animated
transitions with cards showing a front
and a back of a card thanks very much
for watching
Customer Support