Webflow Multi-Reference Fields

all right guys uh just a quick recap

we created our collection list item

inside a page called

entries and we've also taken a look at

our entries template

where we would have the actual content

of the movie

and we can swipe through different

movies

simply by using the top panel now what

we want to do is add in

our actors or related data to this to

this dynamic template so the way i like

to do that

is by creating first a new collection

called

actors i've already done that and i've

created that called as

cast members so you can see right here

i have added a couple of entries and

under cast members and the entry fields

that we have

there is just a simple avatar the role

either a director an actor et cetera and

then

the entries are peter jackson in

mckellen eli

wood and al pacino so all these are just

the basic entries that i created

with their corresponding biography etc

let's go in here and add a collection

list

pull in the actors cast members i'm

pulling all the cast members or all the

members from our database and dropping

them

in here what i actually want is to just

show

the members related to this particular

movie in this case die hard

if i go into filters for example and i

try to search for

a way to filter it there isn't a

there isn't a field type for movies

within the cast members so that i could

filter by the name of it

but there's two ways we could do this we

could one is either by

going into our database into cast

members

click on the cogwheel and adding a field

we can add a field here called

reference it just asks you

what collection do you want to reference

this particular field to and then if

we select the movies of course i would

have to manually go into each actor

and start adding all the movies that

they are related to

can you guys see why this is not good

because

this would entail that i would have to

go into every single actor and add

all those movies that they are related

to which is a lot of pain

and very complicated instead what we

want to do is do it backwards

let's go into our entries

and into our field settings we want to

add a

field that is referencing

multiple actors so in this case we're

not using the reference we're using

multi-reference

this allows us to select multiple actors

in just single movie

so if we call this actors or cast

which is cast members also notice you

can drag these around so if you want to

access the cast

over on the form field menu you can do

that by simply dragging this all the way

to the top

then you can save the collection we can

go back into our movies

and then let's go ahead and find this

lord of the rings and then

attach some of the actors that are

related to this

movie so over here in the cast we are

going to add elijah wood

ian mckellen and peter jackson so just

like that we save that

and if we close this okay so if we go

into our

into the movie the lord of the rings

which is i think the first one

right here and select our collection

item list down in our source panel we

can drop we can select this

and choose to pull the source

from the cast that we have created in

our

database point so this multi-reference

field type we select that

and we will immediately see all the

actors related to

that movie so i think we've added that

to another one

okay sorry guys yeah so it's actually

the

the return of the king where we added

our

members there's no elements set as

placeholders so let's go into

our playground and pull in

the the style that we've created here

so we created this media grid and inside

the midi grid we have a couple of

cards so i'm going to copy this over

bring it into our entries template

i'm going to paste it in

let's get rid of this preview card

because that card specifically

for let me close this as well that's

that card specifically

for movies and this what we're looking

for is

actors all right so this is our

collection list

here there's no items but it's because

we're on the wrong movie so let's look

for the

correct movie right here so we have

three actors assigned but we don't have

any content

we can simply drag this into our

collection item

like that and then on our collection

list

we can call this list the media grid

that contain it

right so let's call that

the media grid

there we go and so now the media grid if

this is exactly like what's up there on

the navigator

but now the media grid is adding

multiple times the collection items

which we've made here so we can remove

this

and inside each each of these we can

start changing some of the values so for

example here

i want to select the text from the name

of the actor and on the role i want to

select the actual role

and then finally the image i just go to

the settings

and select the image from the avatar

and just like that now we have created a

simple way to bring our data

related to this movie and if i click or

change to another movie

then we're gonna have and no items found

and that's cool because we need to have

that backup

style for specifically this types of

movies where we don't have any

content if we go back to our settings

and select the different states for

example the empty state

we can create a class for this type of

instances where there's no uh results we

just call that class

we can select the element i've created

one just for

temporary it's called empty message and

boom

now that every time we go into any other

movie we're gonna see that

we're going to see that specific message

when we preview

our our layout so we have the movie

details the year

and then the related multi-reference

field type that we just applied

pretty cool

‍