Guide to configure actions using custom JavaScript code

Introduction:
This guide provides detailed instructions for configuring actions within your application using JavaScript code. By following this guide thoroughly, you can easily set up actions using custom JavaScript code.

Steps to Follow:

1. Create an action inside your application that utilizes JavaScript and navigate to "Action Event API Configuration".

• Example 1: I have created an action to "convert the paragraph to UC (Upper case) and extract sentences out of it."
  
  

• To configure the action event, select the method as POST and enter the following in the API endpoint field:
  https://connect.pabbly.com/api/custom_js
  . Ensure you select "Set Body/Query/Path Parameters" and "Request Body (Raw JSON)."
  
  

• Now enter your custom javascript code in JSON (Key-value pair) format.
  

  {
  "code" : "your code comes here"
  }

• Here is the sample JavaScript code to convert the paragraph in Uppercase and extract sentences out of it:

• var para = "Code by Pabbly is a freedom to process data in my own way. It allows me to perform multiple tasks in a single step. It supports JavaScript and Python."
  
  var modification1 = para.toUpperCase();
  var modification2 = modification1.replaceAll('. ', '.*');
  var sentences = modification2.split('*');
  
  return sentences;

• Refer to the provided example in JSON format for better understanding. The JavaScript code provided converts the given sentence to uppercase and separates it.
  

  {
  "code": "var para = \"{{paragraph}}\";var modification1 = para.toUpperCase();var modification2 = modification1.replaceAll('. ', '.*');var sentences = modification2.split('*');return sentences;"
  }

  
  
• Additionally, You can check your JSON code validation on this website:

  JSON Online Validator and Formatter - JSON Lint

  JSONLint is the free online validator, json formatter, and json beautifier tool for JSON, a lightweight data-interchange format. You can format json, validate json, with a quick and easy copy+paste.

  jsonlint.com
  
  
  
  
• (NOTE: If your JS code contains double quotes or backward slashes, escape them using a backward slash. For example: If your JS code is "My JS Code," write \"My JS Code\").
  
  
• Now we will enter the same code mentioned above in the "Request Body (Raw JSON) and mention the parameter.
  (NOTE: Parameters are utilized for capturing dynamic values entered by users. The dynamic value is defined by {{}}. For e.g. {{paragraph}})
  
  

• Run this action in your workflow. As you can see, the JavaScript code has been executed successfully.
  
  

2. Example 2: Let's consider another scenario where we need to find the date of the upcoming Monday from today.

• Follow the above-mentioned steps to configure the action using the custom JavaScript API endpoint.
• Here is the sample JavaScript code to get the date of the upcoming monday:
  

  function getNextMondayDate() {  var today = new Date();
    var day = today.getDay();
    var daysUntilMonday = 1 + (7 - day) % 7;
    var nextMonday = new Date(today.getTime() + daysUntilMonday * 24 * 60 * 60 * 1000);
  
    // Formatting the date as YYYY-MM-DD
    var year = nextMonday.getFullYear();
    var month = String(nextMonday.getMonth() + 1).padStart(2, '0');
    var day = String(nextMonday.getDate()).padStart(2, '0');
  
    var formattedDate = year + '-' + month + '-' + day;
  
    return formattedDate;
  }
  
  var nextMondayDate = getNextMondayDate();
  return  "Next upcoming Monday is on: " + nextMondayDate;

• Enter the below javascript code in JSON format in the "Request Body (Raw JSON)" section.
  

  {
      "code": "function getNextMondayDate() {var today = new Date();var day = today.getDay(); var daysUntilMonday = 1 + (7 - day) % 7; var nextMonday = new Date(today.getTime() + daysUntilMonday * 24 * 60 * 60 * 1000); var year = nextMonday.getFullYear(); var month = String(nextMonday.getMonth() + 1).padStart(2, '0'); var day = String(nextMonday.getDate()).padStart(2, '0'); var formattedDate = year + '-' + month + '-' + day; return formattedDate;} var nextMondayDate = getNextMondayDate(); return  \"Next upcoming Monday is on: \" + nextMondayDate;"
  }

  
  
• Additionally, You can check your JSON code validation on this website:

  JSON Online Validator and Formatter - JSON Lint

  JSONLint is the free online validator, json formatter, and json beautifier tool for JSON, a lightweight data-interchange format. You can format json, validate json, with a quick and easy copy+paste.

  jsonlint.com
  
  
  
  
• (NOTE: Here we do not need parameters as we do not need any dynamic value that needs to be entered by the user).
  
  

• Now view the response in your action step within the workflow.
  

Successful Setup:
By following the above steps, you can successfully configure your action which contains custom javascript code.


Another Tutorial on JavaScript Actions:
https://forum.pabbly.com/threads/how-we-built-javascript-based-action.17797/#post-84563