BG_ADV_CCT_002_Dynamic fields in custom Content Templates

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

Infigosoftware

  1. 1. We will be replacing the two pieces of static text in our boilerplate code with dynamic inputs

    We will be replacing the two pieces of static text in our boilerplate code with dynamic inputs

  2. 2. Click on Add new field

    To begin, we need to create a new field. These will provide an area for our administrators to input data when utilising our Content Template.

    Click on Add new field

  3. 3. Add a field name

    Add a field name

  4. 4. Select the type of field you wish to create

    There is a large selection of available field types, including:

    • Textbox

    • Text Area

    • Dropdown

    • Checkbox

    • File

    • Image

    • URL

    • etc

    Select the type of field you wish to create

  5. 5. Click on Create

    Click on Create

  6. 6. Click the > icon next to the newly generated field to reveal additional details

    Click the > icon next to the newly generated field to reveal additional details

  7. 7. Additional field details

    Additional field details are available for use. This includes information such as amending the placeholder, inputting a default value and changing the order of created fields.

    We aim to cover the more advanced field options and features in future tutorials.

    Additional field details

  8. 8. For our example, we will also create a second field

    This field will need to contain a body of text, meaning a Wysiwyg field has been selected.

    For our example, we will also create a second field

  9. 9. Next, we need to add these dynamic fields to our HTML Markup code

    Use the Placeholders, generated with each new field, as markers within your HTML code.

    Input the placeholders wherever you would like the content of that field to be displayed.

    Next, we need to add these dynamic fields to our HTML Markup code

  10. 10. Paste the placeholder into your HTML code

    Paste the placeholder into your HTML code

  11. 11. Paste the placeholder into your HTML code

    Paste the placeholder into your HTML code

  12. 12. Click on Save and Continue Edit

    Click on Save and Continue Edit

  13. 13. Navigate to the Content Page utilising our new Content Template

    This follows on from the previous tutorial "Creating Custom Content Templates" (BG_ADV_CCT_001)

  14. 14. Select your Content Template from the dropdown list

    The two newly created fields will appear as inputs, ready for our administrators to complete.

    Select your Content Template from the dropdown list

  15. 15. Enter information then click on Save and Continue Edit

    Enter information then click on Save and Continue Edit

  16. 16. Load the front-end Content Page

    The values entered into your two fields will now be displayed and formatting in relation to your HTML markup code and placeholders.

    Load the front-end Content Page