Creating a Module for the Agility CMS Create React App

Follow

Modules are the functional components of a Page (Page Management in a Headless CMS?) in Agility CMS. Depending on your web app and your implementation, you may handle rendering modules in different ways. In this example, we'll cover how you can create new Modules and use them with the Agility CMS Create React App.

We will be creating a module that displays an image wrapped in an anchor. Super simple, but it will show you the basics of what you can do.

We'll cover:

You will need to have Agility CMS open in a web browser and your Agility CMS Create React App setup and running in your favorite IDE.

Part 1: Creating the Module in Agility

  1. First, we need to define our module definition. Navigate to the Settings page in Agility, and select Module Definitions.

  2. Click on New Module Definition. Give the new module a Name of “Image Link” - the Reference Name will be auto-populated. It is important to add a meaningful description here so that content editors know what to expect, so set the value to something like “Renders a clickable image.”

    mceclip1.png
  3. Now click on the Form Builder tab, so that we can start adding the fields/properties of the module.
  4. Click Add Field and the Field Properties dialog will appear. Give the first property a label of “Title”, the Name field will auto-populate. Leave the property type drop-down as “Text” and leave the default value empty. Make sure the “Required” checkbox is checked so that this property cannot be left blank by content editors.


    mceclip2.png
  5. Click on Save & New to apply this property and create another.

  6. Give the second property a label of Image, and set the property type to Image

    mceclip3.png

  7. Agility CMS, navigate to Pages and select a page.

  8. In a Module Zone, click on +Add and locate the newly-created Image Link module. This will open the module’s input form.

    mceclip0.png
  9. We need to populate the Title, Image and Link URL fields.

    • For the image, Upload to upload an image from your computer

    • Note that the Alt Text field is not mandatory, but it is good practice to have one for SEO and Accessibility.

  10. Next, populate the Link URL by entering a URL of your choice. Note that you can also utilize the URL field by selecting a document from the Media & Documents list or a page from your sitemap by clicking the Choose File or Choose Page Enter the title of the link as appropriate, and change the target drop-down to “New Window”.

  11. Click Save to finish editing this instance of the module.

Part 2: Coding a React Component to Render the Module

Finally, some coding!  Open your IDE (we like VS Code) to the folder with the project running.

Pro Tip: put the site in preview mode so we can get instant updates.  Set isPreview: true in your agility.config file.

mceclip1.png

  1. Each Agility Module is rendered using a Component in your React site.

    • Create a file called ImageLink.js in the /src/modules folder, and copy and paste the text below into it.  Take note that this.props.item represents the module as an object, so you can easily output its properties in your markup.

    • Create a file called ImageLink.css to hold the styles for our component.  Style it however you'd like.  Here's a quick screenshot:

      mceclip2.png
  2. Now we have to register the component so that Create React App knows about it.

    • Open up the agility.config file and add in the reference to ImageLink.

      Screen_Shot_2019-08-02_at_4.13.28_PM.png
  3. If you weren't already running your local web server, run it now.

    npm start
  4. Voila! You did it! You just created an Agility Module. Congrats!

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.