Example: Connect JSON Content to Your Community

Let’s say you have a WordPress site called Capricorn Cafe. This example shows how to configure a CMS Connect (JSON) component that pulls blog content from that site into your community.

Set Up JSON in Your CMS Connection

Suppose that you want to pull in a series of blogs with links to the individual blogs in full.

1. Create a CMS connection.
2. Under Connection Details, provide the following information.
   • Name—Capricorn
   • CMS Source—WordPress
   • Connection Type—Public
   • Server URL—https://public-api.wordpress.com
3. Because you’re adding JSON content, don’t enter an HTML root path, CSS, or scripts. Those sections are for CMS HTML connections.
4. In the JSON section, click Add JSON.
   1. For Content Type Name, enter Blog Feed.

      A content type name groups lists and items for easy management. You can have up to five content types, each with up to one content item and 10 content lists.

      Note

   2. Click Add content list and provide the following information.
      • Name—Blog List
      • Path—rest/v1.1/sites/capricorncafeblog.wordpress.com/posts?number={itemsPerPage}&page={pageNumber}

        The path has two variables used for pagination. {itemsPerPage} is the number of items to display on a page. {pageNumber} is the current page number. The variable {offset} also applies to pagination and specifies a page offset. Variable values are computed dynamically when the CMS Connect (JSON) component is displayed.

        Note

      • Node Path—posts

        Because a JSON expression is expected in the Node Path, don’t enter an @.

        Note

   3. To generate a detail page and a link for each blog in the list, make sure that the content type has both a content item and a content list. Click Add content item and provide the following information.
      • Name—Blog Item
      • Path—rest/v1.1/sites/capricorncafeblog.wordpress.com/posts/{component}

        The {component} variable adds the component path dynamically. It uses the component path entered for the CMS Connect (JSON) component in the Community Builder.

        Note

      • ID Path—ID
      • Title Path—title

      Because JSON expressions are expected for ID Path and Title Path, don’t enter them with an @. JSON expressions are case-sensitive, so ID is different than id. Match what’s used in your JSON response.

      Note

5. Click Save.

Add the Blog Series to Your Page

1. In the Community Builder, drag a CMS Connect (JSON) component to a page.
2. Open the property editor, and configure the connection.

   Use the @ symbol to denote JSON expressions.

   Note

   • CMS Source—Capricorn
   • JSON Content—Blog List
   • Component Path—For a content list, leave this field blank.
3. Under Content List Layout, select Grid, and provide the following information.
   • Items Per Page—Enter a value, for example, 5.
   • Columns—Enter a value, for example, 2.
4. Under Content List Item Layout, select Card, and enter properties for the layout.
   • Title—@title
   • Author—@author/name
   • Published On—@date
   • Body—@content
   • Image Source—@featured_image
5. Under Navigation, set up how the list redirects to a specific blog.
   • Link Text—Read More
   • Type—Community Page
6. Click Save in the property editor. After saving, you see the name created for the detail page, for example, Capricorn-Blog_Feed. The detail page shows the full blog item in the series.

   To change the name or URL of the detail page, locate the page in the Pages menu in the top toolbar. Then modify its properties.

   Note

Your community page now displays the blog series using your CMS content. After you publish the changes, you can click the Read More link under a blog item in the series. The link takes you to a detail page generated dynamically for the blog.

After you publish your community, you can change your CMS connection settings. For example, suppose that you modify a content list path to point to news items instead of blog items. Because CMS connections are cached for the guest user, republishing your community allows the guest to see the update without a delay.

Add a Single Blog Item to a Page

But what if all you need is a single blog or news item that you want to feature on your community page?

1. Create a CMS connection. In this example, let’s reuse the same connection.
2. In the Community Builder, drag a CMS Connect (JSON) component to a page.
3. Open the property editor, and configure the component.
   • CMS Source—Capricorn
   • JSON Content—Blog Item
   • Component Path—Enter the ID for the blog, for example, 38

     When you specify the component path for a content item, you can also use a dynamic variable, such as {!id}. When you click a Read More link, for example, an ID value replaces the variable.

     Note

4. Under Content List Item Layout, select Detail, and enter properties for the item’s layout.
   • Title—@title
   • Author—@author/name
   • Published On—@date
   • Body—@content
   • Image Source—@featured_image
5. Click Save.

Congratulations! Your community page is now configured to display your blog item.