Code the Event Function
Let's now work on 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.
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.
$ 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(); } }
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.