Getting Started with Event Functions

Configure an Event Function and associate it with an Event Listener

Set up an event function that will send automated onboarding emails to the users when they sign up for the Catalyst client application

Code the Event Function

Let's now work on the event functionevent_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.

Since we have already initialized the functions directory for an event function in the Node.js stack, we can start configuring the function directly. Please go through the codes given in this tutorial to make sure you understand the logic. 

Note: If you had skipped installing the Node dependencies during the function initialization process, you must add Catalyst Node.js SDK in your project separately. To do so, navigate to the root of the functions directory (CATALYST_FUNCTIONS_HOME) in your terminal and execute the following command:
$ npm install --save zcatalyst-sdk-node
You can configure your function after including the Node.js SDK in your project, you can start configuring your function.

The index.js is the main function file of the event_app function. This function obtains data from the event listener such as the email address of the user, and sends an onboarding message with a link to that email address. The content of that email is defined in a file named "Invite.html". This function reads the content from this file and processes it in the onboarding email. 

Copy the code of the function given below and paste it in index.js using Visual Studio editor or the IDE that you are using. You can find this file in the functions/event_app directory where it was initialized earlier. 

  • View code for index.js

    Copied 
    const catalyst = require('zcatalyst-sdk-node');
    const fs = require('fs');
    const path = require('path');
    module.exports = (event, context) => {
    
     const app = catalyst.initialize(context);
     const EVENT_DETAILS = event.getSourceDetails();
     let source = EVENT_DETAILS.type;
     let action = EVENT_DETAILS.action;
     if (source === 'UserManagement' && action === 'SignUp') {
      try {
       let eventData = event.data;
       let userEmailId = eventData.user_details.email_id;
       let email = app.email();
       let config = {
        from_email: 'emma@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();
      }
    
     }
     else {
      console.log("Not a Sign up Event");
      context.closeWithFailure();
     }
    }
    
Note: Replace the value of from_email with the email address that you configured for your application in the previous step.

Create a HTML file in the same function's directory as the index.js file and name it "Invite.html". Copy the code given below and paste it in the Invite.html file and save it.

  • View code for invite.html

    Copied 
    <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;">
    
    
            <table style="display: table;width: 100%;" cellspacing="0" cellpadding="0">
                <tr>
                    <td style="background-color: #e80f28;height: 2px;width:25%;"></td>
                    <td style="background-color: #e80f28;height: 2px;width:25%;"></td>
                    <td style="background-color: #e80f28;height: 2px;width:25%;"></td>
                    <td style="background-color: #e80f28;height: 2px;width:25%;"></td>
                </tr>
            </table>
            <div style="padding: 8% 5%;border: 1px solid #f3f3f3;line-height: 1.625em;">
                <div style="font-size: 0.8125em;color: #3c3c3c;">Hey there!</div>
                <br />
    
                <div style="font-size: 0.8125em;color:#5d5d5d; line-height: 1.625em;padding-bottom: 20px;">
                </div>
                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.
                <div style="font-size: 0.8125em;color: #5d5d5d;line-height: 1.625em;padding-bottom: 20px;">
                    <a href="https://eventapp-687259092.development.zohocatalyst.com/app/tour.html">Take the tour!</a> //Replace the Project Domain Name and delete this comment
                </div>
                <div style="font-size: 0.8125em;color: #5d5d5d;line-height: 1.625em;padding-bottom: 20px;">
                    If the link doesn't work, please copy the following address and paste it in your browser.
                </div>
                <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;">
                    <div style="margin: 0.0px 10.0px;color: rgb(0,0,255);">
                        <a
                            href="https://eventapp-687259092.development.zohocatalyst.com/app/tour.html"> https://eventapp-687259092.development.zohocatalyst.com/app/tour.html</a> //Replace the Project Domain Name and delete this comment
                    </div>
                </div>
                <br />
                <div style="font-size: 0.8125em;color: #5d5d5d;line-height: 1.625em;">
                    <div>Regards,</div>
                    <div>EventApp Team</div>
                </div>
            </div>
        </div>
    </div>
    

Before you proceed to the next step, replace "eventapp-687259092.development" in the code with the Project Domain Name of your project. This appears in 3 places in the code as indicated by comments. You can obtain the Project Domain Name from the general settings page in your Catalyst console. Replace the values and save the file.

The functions component is now configured successfully. You can upload the function package to the Catalyst remote console manually or deploy it from the CLI. We will be deploying the function from the CLI later on in this tutorial.