Create and Import Data to Webflow

so over on the panel here on the left

property panel

you'll click on cms so let's click on

create a new collection i'm going to

call these

all these entries webflow gives you some

templates you can use from

so these templates are the common things

or ways that you could use in any

project

so like having a listings a recipe shows

songs

but right now i'm gonna do this with a

database that i've already pulled

so we can actually see how it works

second thing i see is the entry

url that's just a folder name where that

template page is going to be created

so we'll see that in a little bit um so

let's jump in and start adding our

fields

when you click on add a field this is

referring to a form

field this is the type of fields that

they provide us they give us some

plain text rich text or an image maybe a

gallery we can use multi-image

a video link if we want to refer to the

trailer in this instance

so let's go ahead and select that and

i'm just going to call this label

i'm going to label this the trailer so

on the right side you can see the

preview

of what i'm creating this is very

helpful because you can see right away

what type of field you're gonna get okay

and

let's save that then we create a new

field we're gonna call these

this one the number because this number

is going to be the

the year of the movie so when that movie

came out this one is just to give you

some help

text so if you're working on a project

for a client

and you want to explain to the client

hey uh this

is for the movie year that little label

that you've added will

appear on the editor so they can

understand what this field was maybe

they don't remember

or maybe the label is not clear enough

you can set a minimum number or a

maximum number so it's just some

limitations

and a format if it's integer decimal or

any other format

right now we don't really need to worry

about that

and also there's some additional

settings if you want to make a field

required or not so say maybe you want

to show you want to make sure that this

field is never empty you want to toggle

this on

that way that field is even though

if they start creating fields like

maniacs

they won't be able to because webflow

will tell you hey that field is

is required i'm going to add another

field

this one's going to be

the plain text field for the summary or

the plot

of the movie this can be in a single

line

format or it can be a multi-line format

that way it's a little bit easier to

start

typing longer descriptions okay so let's

make a field for the score

so that can be a number score this can

be the imdb

score that we're pulling from the

database because we have score

we might want to give also another we

want to create another field called

the grade field and this is going to be

three

options that the user can choose from so

let's select an

option which gives us the ability to add

multiple

options in our drop down so over here

i've selected the grade and i'm going to

add the option

low okay or medium

and then this one is going to be high

this is okay and finally we're going to

add

genre we're just going to make this a

normal text plain text field

for now and another one for actor

okay so now that we have that collection

let's go ahead and create it

right away we get no entries but again

webflow gives us the ability to add

some temporary or dummy items as they

call it

because i've already downloaded that csv

i'm going to import that

the first thing it does it asks me if

you want to upload the csv

and if it has a header if we if we have

created that csv

manually typically you would have a

header row

just for the name what the secondary

column is

etc etc so if it does have a header you

want to

toggle this on if it doesn't just toggle

it off

then when you go to continue you'll see

something like this

a little bit overwhelming but it's

actually pretty simple

on this side it's asking you to

configure the field

from that database notice that we have

displaying items one two three four five

this is from the database that or the

csv file

and all it's doing it's it's asking us

where does this

field that is called name where do you

want to assign it to

so you want to create a new field or do

you want to map it to an existing field

in this case we do because the name want

we want to map it to the field that we

have created already

which is actually called name so we want

to do that

and on the right we have kind of a

preview of that same

data being stored on our form fields

so maybe we don't need to have all this

published on these are these are other

fields we don't need so we can omit just

ignore those

and then for the cover over here we

could have this map to an existing

we want to change that to our thumbnail

so right away we see that image being

applied to that

that specific item we can swap this out

like this just by going through

each one and over in general

we want to make sure we had map this

over to

our genre field this one we're going to

ignore for now because this is using the

multi-reference field we haven't seen

that yet

okay so we're going to skip that and the

summary we're gonna make sure we add the

summary

over here the year we want to map it

to the year the score

to the score

if we have a link to trailer that will

pop up in there

all right let's go ahead and import

these items

all right once you've uh imported all

the entries into your

collection you can toggle each one of

these all the fields that we have

created are now filled in

with the appropriate data let's go and

check out how this would look like

in a normal page all right i'm going to

create a new page here

called entries just to try this out i'm

going to create it

and from here i can start adding the

component

collection list so from collection list

this is the only way we can start

pulling and

pulling the feed or the entries into our

pages

so once you've selected this it's going

to display a couple demo placeholders

and it's going to ask you the source

where do you want this data to come from

so you select the entries that we just

created

so it gives us just a couple of

placeholders but

right now we've called the collection

list what we need to start doing

is putting some of the elements that

represent each of those field types

so notice right away on the navigator i

have

three different wrappers the con the

collection list wrapper which contains

all the settings

we have the collection list and we have

the collection

item so this particular wrapper or this

little element here is what's going to

be repeated

uh 50 times because that's how many

items we have

in our entries bucket so

over here in this collection item that's

where we want to start adding some

basic elements like so let's say we want

the title here

this one we're using the titles h1s

just to try it and you get a little

purple

checkbox that asks you where you want to

pull this text from so you select that

and then it drop down appears so you can

choose

out of all the fields that you just

created which field do you want to

use to replace this h1 with

so right now it's we're only going to

see two of these

entry fields because the rest of the

entries that we have

are set as drafts until we set these

or publish these gonna just do a couple

of these and stage them

for publish just to show you guys a

little bit

a couple more items or examples

over here

okay and then and if we go back into our

collection list we can see some of these

items showing up here

on the right panel we can see the layout

we can play with

depending on how many items you have you

can start aligning

items in a column in different

columns but because we don't want to use

this type of layout

we actually want to start using our own

type of layout so

we could use the grid we can use the

flex and we can stylize right now let's

just keep them all vertical so we can

start

looking at the different data fields

that we've created

let's add another element i'm going to

add this element as a paragraph

and i'm going to pull the summary or the

plot

so we can see here we have the title the

plot

we can start adding as many fields as we

need

in this case we want to have a text

label

for the year so we have here the year

and we could even put in here an

image it's going to pull the source

from the thumbnail that we have created

and of course you're going to see this

huge image being pulled from the

and source it across you might want to

set a size for that

just for the demo there we go

so as you can see this is how we're

actually utilizing the power of webflow

collections right you can just

pull in that element drop it into your

into your page select the settings of

where that source is coming from or

where the data is coming from

and then start playing around with how

you want to display that

with simple elements like the paragraph

the titles

and and so forth

‍