Configure the 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.

    

        
index.js
        

            
copy
            

                

            
        
    
    

    

         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: 'onboarding@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();
 }
}

         
View more
    

Create a New File

The event_app 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 HTML file. This function reads the content from this file and processes it in the onboarding email.

We must now create this new HTML file in the functions/event_app directory and name it invite.html.

Before we add code to the file, we need to deploy the project to the console, to obtain the domain name of the project. The domain name is required to complete the code present in the invite.html file.

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

Now we have the required domain.

Once the application is deployed, the required domain name can be retrieved at any time using the Web client Hosting component.

Now, copy the code given below and paste it in invite.html, and save the 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;">


        <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-779513891.development.catalystserverless.com/app/tour.html">Take the tour!</a> //Replace the Project Domain Name
            </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-779513891.development.catalystserverless.com/app/tour.html"> https://eventapp-779513891.development.catalystserverless.com/app/tour.html</a> //Replace the Project Domain Name
                </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>

         
View more
    

The Event function is now configured.