Validating Modular Blocks using Contentstack Webhooks and AWS Lambda

Modular Blocks allow us to dynamically create components of a page or app, while preserving design integrity and consistency. We can add multiple sets of fields within each block and on the entry page, we can choose any block of our choice (such as banner, disclaimer, and so on), add more blocks, rearrange them, or remove them to make changes to the web page or app.

With this flexibility, it is possible that more than required blocks are added in the entry, causing unnecessary addition of blocks. To avoid this, you can set up certain rules on modular blocks. In this guide, we will learn how to set these rules using Contentstack Webhooks and AWS Lambda.

Process overview: We will create a content type and add a modular block field in it along with a few other fields. We will name the blocks as Disclaimer, Banner, Testimonial, and so on. Then, we will set up a workflow with three stages: Draft, Rejected, and Approved.

We will then create an AWS Lambda Function which will validate the number of occurrences of “Disclaimer” & “Banner” blocks in the entry. For the “Disclaimer” block our rule will validate exactly one “Disclaimer”. Similarly, for “Banner” blocks the rule will validate one to three “Banners”.

If the validation fails, the entry’s workflow stage will change to “Rejected” and automatically assign it to the user who last updated the entry via an email. The email explains why the entry was rejected.

Let's get started!

Prerequisites

Steps for Execution

  1. Set up the essentials
  2. Generate Management Token
  3. Set up the Workflow
  4. Set up a lambda function
  5. Create a webhook in Contentstack
  6. Try out the set-up
  1. Set up the Essentials

    To set up the essentials, log in to your Contentstack account and follow the steps given below:

    1. Create a stack and import the content type that we have created for this exercise for quick integration.

      Download Content type

      After downloading, unzip the folder and import the content type in your stack. Once done, your content type schema should look like this.

      Modular_Blocks_validation_2.png

    2. Note that we have added a Modular Block field with the following details: 
      • Disclaimer: Contains an RTE field named "Body"
      • Banner: Contains a single line, a RTE and a file field
      • Testimonials (optional): Contains a single line and file fields

    Note: We will perform validations on “Disclaimer” and “Banner” blocks. Hence, these two blocks are mandatory while others blocks are optional. You can add blocks according to your preferences.

    With these steps we have the essentials ready, let's move ahead and create a workflow.

  2. Generate Management Token

    Management Tokens provide you with read-write access to your stack resources. Create a Management token as shown in the documentation. Note down the Management token and the stack API key. You will need these in the further steps.

  3. Set up the Workflow

    We need to set up a Workflow in Contentstack such that when the validation on modular blocks fail, the workflow stage should change from "Draft" to "Rejected" and the user should be notified via email about the rejection.

    Follow the steps given below to set up a workflow:

    1. Hover over the Settings gear icon and click on Workflows.

      Modular_Blocks_validation_1.png

    2. On the Workflow Settings page, click on + ADD WORKFLOW.

      Modular_Blocks_validation_3.png

    3. Name your workflow and add a description (optional). 
    4. Under the Scope option, select if this workflow should be applied to All Content Types or Specific Content Type(s). For our example, we will select the Specific Content Types(s) option and then select our content type, Blog, and then click on Add button.



    5. Add three stages in the WORKFLOW STAGES option, i.e. Draft, Rejected & Approved as shown below. Make sure to click the Enable Workflow checkbox and Save your settings.

      Workflow_Stages.png

    Note: For this exercise, we don't need Stage transition and access rules in any of the stages.

    We will need the UID of Approval and Rejected Workflow stages, which will be added as environment variables while setting up the lambda function.

    Proceed as follows to get the Approval (stageApprovedUid) and Rejected (stageRejectedUid) stage UID:

    1. Copy the Workflow ID from the Workflow Settings tab.

      Highlight_Workflow_UID_of_Validate_Modular_Block.png

    2. Open Postman or any other API collaboration & development platform and make a GET request on the following URL. Enter the Workflow ID (highlighted above) at the end of the URL:

      https://api.contentstack.io/v3/workflows/{YOUR WORKFLOW UID} 

    Note: While making the API call in Postman make sure to add headers i.e. your stack api_key & management token. Refer to the Get single workflow API request to learn more

    After successfully running the API request, you will get the following response:

    Hihlight_Rejected_UID_and_blur_api_key_and_authorization_key_values.png

    The Rejected stage UID is highlighted above, similarly you will get the Approval stage UID.

    Highlight_Approved_UID.png


    Note
    : Make note of the UID of both stages as highlighted above. We will need them in Step 4 when we set up our environment variable in the Lambda function.

  4. Set up a Lambda Function and an API Gateway Trigger

    We will use an AWS Lambda Function that will help us perform the required validation on our modular blocks. To do this, perform the following steps:

    1. Log in to your AWS Management Console, select Lambda from the service list.
    2. Click on the Create function button, and then the Author from Scratch option.
    3. Provide a name to your lambda function inside the Function name field, select Node.js 12.x or any other version of Node as your Runtime language, and click on the Create function button.
    4. For this exercise, we have created a sample code that will help you set up the system. You can download it from our GitHub repository.
    5. Once you download the code, upload the file named index.zip (as a zip file) by scrolling down to the Actions dropdown (in the Function code section) and selecting Upload a .zip file as shown below:

      Highlight_Upload_a_zip_file.png

      Note: The logic that helps us perform the validation is added in the example code.
      blockObj.banner > 0 && blockObj.banner <= 3 && blockObj.disclaimer == 1

      The above line of code validates that there should be less than or equal to 3 banner blocks and exactly one disclaimer block. If you want to have a different number of occurrences for them you can change the logic accordingly.
    6. Keep Handler as index.handler and click on Save.
    7. Goto Environment Variable section, under Configuration tab and add the following variables to it, by clicking on Edit and then Add environment variable.
    8. Next, set Environment variables for your lambda function as follows:

      Blur_the_value_of_ManagementToken_Variable.png

      • baseUrl : https://api.contentstack.io/ or https://eu-api.contentstack.com/
      • managementToken : {Enter your stack management token}
      • stageApprovedUid : {Enter the UID of the Approval stage that we generated while setting up the workflow in step 2}
      • stageRejectedUid : {Enter the UID of the Rejected stage that we generated while setting up the workflow in step 2}
    9. Save your settings.
    10. Your lambda function is now ready. Scroll up to the Designer section and click on + Add trigger.
    11. On the Add trigger screen, from the Select a trigger dropdown, select API Gateway.
    12. Select Create an API, from the API dropdown. Then, select REST API inside the API type block, select Open from the Security dropdown, and click on Add.

      API_Gateway.png

    13. An API for your lambda function is now created. Under the Designer block, click on API Gateway. Click on Details and you will find your API endpoint. Make a note of it as we will need it while setting up the webhook in Contentstack.

      Highlight_Details.png

  5. Create a Webhook in Contentstack

    Now let’s set up a webhook that will trigger the lambda function we created above to perform the validation on Banner & Disclaimer
    To do so, perform the following steps:

    1. Hover over the “Settings” gear icon and click on Webhooks.
    2. Click on + New Webhook.
    3. On the Create Webhook page, fill up the Name field (for example "Validate-mb").
    4. In the URL to notify the field, enter the URL (API endpoint) that you generated while setting up API gateway in step 3.
    5. Scroll down to the When section and set the conditions for the webhook as shown below:

      Highlight_the_full_When_section_and_blur_the_address_in_URL_to_notify.png

    6. Ensure that the Enable Webhook option is checked. Verify the settings and click on Save.

    Our webhook setup is complete. Now let’s proceed to see webhook in action when we create or update an entry of the “Blog” content type.

    Note: To get the desired output, leave the concise payload check-box unchecked in the webhook settings.

  6. Try Out the Set-Up

    We are now ready to test the setup by following the steps given below:

    1. Go to your content type Blog, and create or update an entry in the Modular Blocks field.
    2. Under Modular Blocks click on “+ Disclaimer” and “+ Banner” button to add blocks to your entry and click on the Save button. The webhook listener will validate the number of block instances in an entry and accordingly change the workflow stage to either “Rejected” or “Approval” stage.
    3. Refresh the page to see the updated workflow stage of the entry.
    4. If the entry is rejected then the user who last updated the content type is notified about the change. An email is sent to the user, stating the reason why the entry was rejected.

    Was this article helpful?

    Thanks for your feedbackSmile-icon

    On This Page

    ^