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