How to make list of objects in Netlify CMS using list and object Widget

featured Image

Here in this Netlify CMS tutorial we will how easily we can make a list of objects using list and object widgets. This will allow us to add multiple objects to the list.

To create an object field in the list field we need to use the object widget inside the list widget. A widget in Netlify CMS means the data type or the interface of the entry fields. Netlify comes with several in-built widgets that you can check here: NetlifyCMS Widgets

Here we will create an example of the FAQ section of a website. Follow the steps to create the list of objects for your site.

Step 1: Open the config.yml file of your project.

Step 2: Create the fields as below:

 - label: FAQS
        name: faqs
        widget: list
        fields: 
          - label: FAQ
            name: faq
            widget: object
            fields:
              - { label: Question, name: question, widget: string, default: "Question" }
              - { label: Answer, name: answer, widget: string, default: "Answer" }

Here we have used is the list widget with the name ‘faqs’ and then inside it, we have created another field ‘faq’ which is an object widget.

The object widget has two fields of string widget, one for the question and the other for the answer. You can specify default values for both fields as you like.

Step 3: Once done with the config.yml file, you can build the project to see the change in your Netlify Dashboard.

That’s how you can create a list of objects in your netlify cms.

Related Posts

git commands with example

Top 40 Git commands with Examples

GitHub has become an essential tool for developers to manage, store, and collaborate with other developers on software projects. With its simple powerful git-based version control system, GitHub allows users…

Read more
Check GitHub Account in the Terminal

Check GitHub Account in the Terminal

GitHub is an integral tool for developers to store, manage, and collaborate on software projects with other developers. And as we work more and more in the command line it…

Read more
featured Image

Your Git Gateway backend is not returning valid settings – Fix

In this article, we learn about the quick fix about an error “Your Git Gateway backend is not returning valid settings. Please make sure it is enabled” in NetlifyCMS. What…

Read more