On this Webflow lesson we take a look at data relationships. How to setup an advanced multi-reference collection in Webflow and the difference between a reference field vs a multi-reference field on Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
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
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS