Code Your Event Function

Let’s now configure the Event function, event_app, that will send automated onboarding emails to the user with a link to a form. This form enables the user to provide their personal details to register for the client application. This function will be executed when the event listener triggers it.

The functions directory, functions/event_app contains:

The index.js main function file
The catalyst-config.json configuration file
Node modules
package.json and package-lock.json dependency files

You will be adding code in the index.js file.

Copy the Node.js code and paste it in index.js in the functions/event_app directory of your project, and save the file. You can use any IDE of your choice to work with the application’s files.

Note: Please go through the code given in this section to ensure you fully understand it.

index.js
copy

const catalyst = require("zcatalyst-sdk-node");
const fs = require("fs");
const path = require("path");
module.exports = (event, context) => {
  try {
    const app = catalyst.initialize(context);
    let eventData = event.getRawData();
    let userEmailId = eventData.email;
    let email = app.email();
    let config = {
      from_email: "emmy@zylker.com", // Replace this with the email you configured
      to_email: userEmailId,
      subject: "We welcome you on board!",
      content: fs.readFileSync(path.join(__dirname, "invite.html")).toString(),
      html_mode: true,
    };
    let mailPromise = email.sendMail(config);
    mailPromise.then((mailObject) => {
      console.log(mailObject);
      context.closeWithSuccess();
    });
  } catch (err) {
    console.error(err);
    context.closeWithFailure();
  }
};

Note: Replace the value of from_email in line 11 with the email address that you configured for your application through Catalyst Mail previously.

Deploy Your Project

You need to deploy your project to the Catalyst console to ensure the event function and the application URL are available to use while configuring the Rule.

Note: We will be deploying the entire project to the Catalyst console one more time once we configure the client for your application and complete testing the application.

To deploy the project to the console, enter the following command in your CLI and execute it.

copy
$catalyst deploy

The project has been deployed to the console.

You can copy the application URL from the CLI, or you can copy it from the Web Client Hosting component.

Note: We will learn more about deploying your application to the console and to production when we reach Step 6 of the tutorial. You can also learn more about deploying catalyst resources to the console form this help documentation.

Configure Your Product Tour

Now, create a html file in the functions/event_app directory and name it invite.html.

The invite.html page will contain the product tour.

Copy the following code and paste it in the invite.html file.

invite.html
copy

<div class="mT" style="background-color: #f2f2f2;padding: 4%;">
    <div style="width: 100%;max-width: 750px; margin: 0px auto;padding-bottom:10px;">
        <img src="" alt="">
    </div>
    <div
        style="width: 100%;max-width: 750px;font-size: 16px; margin: 0 auto;background: #fff; font-family: lucida grande,lucida sans,lucida sans unicode,arial,helvetica,verdana,sans-serif;">
    &lt;table style="display: table;width: 100%;" cellspacing="0" cellpadding="0"&gt;
        &lt;tr&gt;
            &lt;td style="background-color: #e80f28;height: 2px;width:25%;"&gt; &lt;/td&gt;
            &lt;td style="background-color: #e80f28;height: 2px;width:25%;"&gt; &lt;/td&gt;
            &lt;td style="background-color: #e80f28;height: 2px;width:25%;"&gt; &lt;/td&gt;
            &lt;td style="background-color: #e80f28;height: 2px;width:25%;"&gt; &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
    &lt;div style="padding: 8% 5%;border: 1px solid #f3f3f3;line-height: 1.625em;"&gt;
        &lt;div style="font-size: 0.8125em;color: #3c3c3c;"&gt;Hey there!&lt;/div&gt;
        &lt;br /&gt;

        &lt;div style="font-size: 0.8125em;color:#5d5d5d; line-height: 1.625em;padding-bottom: 20px;"&gt;
        &lt;/div&gt;
        Welcome to Event App! We have a range of interesting and innovative features for you to explore. Please take the time to read through our product tour document.
        &lt;div style="font-size: 0.8125em;color: #5d5d5d;line-height: 1.625em;padding-bottom: 20px;"&gt;
        &lt;a href="https://eventapp-779513891.development.catalystserverless.com/app/tour.html"&gt;Take the tour!&lt;/a&gt; &lt;!-- Replace here --&gt;
        &lt;/div&gt;
        &lt;div style="font-size: 0.8125em;color: #5d5d5d;line-height: 1.625em;padding-bottom: 20px;"&gt;
            If the link doesn't work, please copy the following address and paste it in your browser.
        &lt;/div&gt;
        &lt;div style="font-size: 0.8125em; line-height: 1.625em; width: 100%; padding:10px 0px; background-color: rgb(241,241,241);border: rgb(253,253,253) solid 1.0px;margin: 0.0px auto;"&gt;
            &lt;div style="margin: 0.0px 10.0px;color: rgb(0,0,255);"&gt;
             &lt;a href="https://eventapp-779513891.development.catalystserverless.com/app/tour.html"&gt; https://eventapp-779513891.development.catalystserverless.com/app/tour.html&lt;/a&gt; &lt;!-- Replace here --&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;br /&gt;
        &lt;div style="font-size: 0.8125em;color: #5d5d5d;line-height: 1.625em;"&gt;
            &lt;div&gt;Regards,&lt;/div&gt;
            &lt;div&gt;EventApp Team&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</div>

Note: Replace "https://eventapp-779513891.development.catalystserverless.com" in the code with the Project Domain Name you generated for your project in lines 25 and 32.

The Event function is now configured.

Last Updated 2025-06-17 17:46:43 +0530 IST

Event Functions Functions Directory Structure Web Client Hosting