Show details for Dynamic fields in custom Content Templates | ID: BG_ADV_CCT_002

Dynamic fields in custom Content Templates | ID: BG_ADV_CCT_002

In this tutorial, we will learn how to apply dynamic fields to our custom Content Templates. These will create input fields for our administrators to populate when utilising our custom template. This could be, for example: An embedded code snippet An image A body of text

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

00:00:13:08 - 00:00:14:12
In this tutorial will

00:00:14:12 - 00:00:18:17
learn how to apply dynamic fields
to our custom content templates,

00:00:19:08 - 00:00:22:13
so these will create input fields
for our administrators to

00:00:22:13 - 00:00:25:10
to populate
when utilizing our custom template.

00:00:25:25 - 00:00:29:15
And this could be, for example,
an embedded code snippet

00:00:29:19 - 00:00:33:18
could be used for an image,
a body of text file upload

00:00:33:18 - 00:00:36:13
and so much more.

00:00:38:06 - 00:00:41:01
So what will we be doing in
this tutorial is replacing

00:00:41:01 - 00:00:46:03
these two pieces of static text
that we created in the last tutorial.

00:00:46:03 - 00:00:48:14
So we're going to have one
which is a page title

00:00:48:14 - 00:00:51:16
which we want to be able to populate
as part of the content template,

00:00:52:02 - 00:00:55:25
and one which is a description
which again we want to be able to populate

00:00:55:25 - 00:01:00:09
when using the content template itself.

00:01:00:09 - 00:01:03:19
And the way in which we do this is
with these fields down at the bottom.

00:01:04:13 - 00:01:06:24
So these provides
an area for our administrators

00:01:06:24 - 00:01:09:29
to input data
when utilizing our content templates.

00:01:11:20 - 00:01:11:26
So if

00:01:11:26 - 00:01:14:28
I click on Add New Field,
the only information it needs at

00:01:14:28 - 00:01:24:24
this stage is a field name
and a field type.

00:01:24:24 - 00:01:28:04
So I put in a field name
and then the field type you see

00:01:28:04 - 00:01:32:08
we've got multiple things we can
choose from, including text box, text area

00:01:32:19 - 00:01:35:10
checkboxes, images, file uploads

00:01:35:19 - 00:01:38:28
and much more.

00:01:38:28 - 00:01:41:02
In this case,
I'm going to choose a text box

00:01:42:16 - 00:01:46:04
and click on Create
and that will create our initial field.

00:01:47:02 - 00:01:49:21
I'm going to create a second one,

00:01:49:21 - 00:01:57:03
which is for the description, and this one
is going to be a paragraph of text.

00:01:57:13 - 00:01:59:26
So it could be a text area or a WYSIWYG,

00:02:00:16 - 00:02:06:09
depending on what you require.

00:02:06:09 - 00:02:10:09
Now, if we expand these fields,
they do have their own specific

00:02:10:09 - 00:02:13:13
set of additional control.

00:02:13:13 - 00:02:17:04
So things like if you want to specify
a default value which is in there,

00:02:17:24 - 00:02:19:25
when you first
utilize the content template,

00:02:20:04 - 00:02:23:15
if you want to put a description,
if you want to change the placeholder,

00:02:23:26 - 00:02:28:15
which is the text that gets put
into the actual HTML markup, you can do.

00:02:28:15 - 00:02:32:24
So some of the more advanced controls here
we're going to cover in

00:02:33:13 - 00:02:36:25
future tutorials further down the line.

00:02:36:25 - 00:02:37:11
So next,

00:02:37:11 - 00:02:41:27
we need to make sure these dynamic fields
are referenced in our HTML markup code.

00:02:42:10 - 00:02:45:15
So as mentioned a second ago,
we take these placeholders

00:02:45:15 - 00:02:49:04
which can also be taken
from this column here

00:02:49:15 - 00:02:52:11
and then put those directly
into a hex HTML markup

00:02:53:04 - 00:02:56:05
so I can just copy the place
holder and paste it

00:02:56:05 - 00:03:08:25
exactly where I want
its contents to be able to appear.

00:03:08:25 - 00:03:10:13
We'll click Save and continue,

00:03:11:29 - 00:03:13:19
and then we're
actually going to take a look at what

00:03:13:19 - 00:03:18:27
those changes
have done to our content page set up.

00:03:20:16 - 00:03:23:29
So first off, I'm going to go
to the actual content page set up itself.

00:03:25:00 - 00:03:28:08
If you reload, there's no problem,
but you might need to refresh

00:03:28:08 - 00:03:29:21
if you've already got the tabs open.

00:03:29:21 - 00:03:33:10
So I'm just going to refresh that.

00:03:33:10 - 00:03:36:22
And you can see now that we're still using
the same content template,

00:03:36:29 - 00:03:42:13
but now we have a couple of
additional fields available to input data.

00:03:42:13 - 00:03:45:04
So we've got our page title,
which we just created as a field

00:03:45:13 - 00:03:47:23
and our description

00:03:51:25 - 00:03:55:01
and these are already linked to our HTML
markup code.

00:03:55:11 - 00:03:58:23
So the contents of these should now, once
I save this,

00:03:58:23 - 00:04:01:02
be placed on the actual content page
itself.

00:04:01:27 - 00:04:03:00
So let's give that a go.

00:04:03:00 - 00:04:10:10
If I save that particular content
page, refresh the front end

00:04:12:04 - 00:04:12:12
and we

00:04:12:12 - 00:04:19:19
see that
it's now being populated as expected.

 

Incomplete