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 Client Component

The next step is to code the client component that contains the signup page, and the background script which obtains the data from the user and passes it on to Catalyst. 

You can host the client component independently in the Catalyst remote console or deploy it from the CLI. We will be deploying the client from the CLI in this tutorial. To learn about hosting the client from the console, refer to the Web Client Hosting help page.

The client home directory (CATALYST_CLIENT_HOME) includes the following files by default: index.html, main.js, client-package.json, main.css. These files were created automatically in the boilerplate structure when you initialized the client. In addition to these, you will be creating two new files in the client directory. 

index.html will be the sign-up page of the client; main.js will contain the script for the sign-up page; main.css will contain the CSS content of the redirect page. The client-package.json contains the configuration information of the client directory by default. 

Copy the code below and paste it in the index.html file. You can find this file in the client directory of your project. 

  • View code for index.html

    Copied 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>signup - label</title>
    <script src="https://www.zoho.com/crm/js/js-lib-file.js"></script>
   <script src="https://static.zohocdn.com/catalyst/sdk/js/2.0.0/catalystWebSDK.js"></script>
   <script src="/__catalyst/sdk/init.js"></script>
<style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        html {
            overflow-y: scroll;
        }

        body {
            background: #c1bdba;
            font-family: 'Titillium Web', sans-serif;
        }

        a {
            text-decoration: none;
            color: #1ab188;
            transition: .5s ease;
        }

        a:hover {
            color: #179b77;
        }

        .form {
            background: rgba(19, 35, 47, 0.9);
            padding: 40px;
            max-width: 600px;
            margin: 40px auto;
            border-radius: 4px;
            box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
        }

        .tab-group {
            list-style: none;
            padding: 0;
            margin: 0 0 40px 0;
        }

        .tab-group:after {
            content: "";
            display: table;
            clear: both;
        }

        .tab-group li a {
            display: block;
            text-decoration: none;
            padding: 12px;
            background: rgba(160, 179, 176, 0.25);
            color: #a0b3b0;
            font-size: 20px;
            float: left;
            width: 50%;
            text-align: center;
            cursor: pointer;
            transition: .5s ease;
        }

        .tab-group li a:hover {
            background: #179b77;
            color: #ffffff;
        }

        .tab-group .active a {
            background: #1ab188;
            color: #ffffff;
        }

        .tab-content>div:last-child {
            display: none;
        }

        h1 {
            text-align: center;
            color: #ffffff;
            font-weight: 600;
            margin: 0 0 30px;
        }

        label {
            position: absolute;
            -webkit-transform: translateY(6px);
            transform: translateY(6px);
            left: 13px;
            top: 8px;
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.25s ease;
            -webkit-backface-visibility: hidden;
            pointer-events: none;
            font-size: 16px;
        }

        label .req {
            margin: 2px;
            color: #1ab188;
        }

        label.active {
            -webkit-transform: translateY(50px);
            transform: translateY(50px);
            left: 2px;
            font-size: 14px;
        }

        label.active .req {
            opacity: 0;
        }

        label.highlight {
            color: #ffffff;
        }

        input,
        textarea {
            font-size: 16px;
            display: block;
            width: 100%;
            /* height: 100%; */
            padding: 12px 10px;
            background: none;
            background-image: none;
            border: 1px solid #a0b3b0;
            color: #ffffff;
            border-radius: 0;
            box-sizing: border-box;
            transition: border-color .25s ease, box-shadow .25s ease;
        }

        input:focus,
        textarea:focus {
            outline: 0;
            border-color: #1ab188;
        }

        textarea {
            border: 2px solid #a0b3b0;
            resize: vertical;
        }

        .field-wrap {
            position: relative;
            margin-bottom: 40px;
        }

        .top-row:after {
            content: "";
            display: table;
            clear: both;
        }

        .top-row>div {
            float: left;
            width: 48%;
            margin-right: 4%;
        }

        .top-row>div:last-child {
            margin: 0;
        }

        .button {
            border: 0;
            outline: none;
            border-radius: 0;
            padding: 14px 0;
            font-size: 20px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .1em;
            background: #1ab188;
            color: #ffffff;
            transition: all 0.5s ease;
            -webkit-appearance: none;
        }

        .button:hover,
        .button:focus {
            background: #179b77;
        }

        .button-block {
            display: block;
            width: 100%;
        }

        .forgot {
            margin-top: -20px;
            text-align: right;
        }
    </style>
</head>

<body>
    <div class="form">
        <ul class="tab-group">
            <li class="tab active"><a href="#signup">Sign Up</a></li>
            <li class="tab"><a href="#login">Log In</a></li>
        </ul>
        <div class="tab-content">
            <div id="signup">
                <h1>Sign up to Continue to EventApp</h1>
                <form>
                    <div class="top-row">
                        <div class="field-wrap">
                            <label> First Name<span class="req">*</span> </label>
                            <input id="firstname" type="text" required autocomplete="off" />
                        </div>
                        <div class="field-wrap">
                            <label> Last Name<span class="req">*</span> </label>
                            <input id="lastname" type="text" required autocomplete="off" />
                        </div>
                    </div>
                    <div class="field-wrap">
                        <label> Email Address<span class="req">*</span> </label>
                        <input id="email" type="email" required autocomplete="off" />
                    </div>
                    <button onclick="signupAction(this)" class="button button-block" />
                    Get Started
                    </button>
                </form>
            </div>
            <div id="login">

            </div>
        </div>
        <!-- tab-content -->

    </div>
    <!-- /form -->
    <script src="main.js"></script>
    <script>
        $(document).ready(function () {
            $('.form').find('input, textarea').on('focus', function (e) {
                var $this = $(this),
                    label = $this.prev('label');
                label.addClass('active highlight');
            });

            $('.form').find('input, textarea').on('blur', function (e) {
                var $this = $(this),
                    label = $this.prev('label');
                if ($this.val() == '') {
                    label.removeClass('active highlight');
                } else {
                    label.removeClass('highlight');
                }
            });

            $('.tab a').on('click', function (e) {
                e.preventDefault();
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
                target = $(this).attr('href');
                $('.tab-content > div').not(target).hide();
                $(target).fadeIn(600);
            });
        });
    </script>
</body>
</html>

Let's now configure the main.js file. Copy the code below and paste it in the main.js file in the client directory. This will obtain data from the form and pass it on to the event listener that listens for the user sign-up event.

  • main.js

    Copied 
function signupAction(ele) {
    debugger;
    var firstName = document.getElementById("firstname").value;
    var lastName = document.getElementById("lastname").value
    var email = document.getElementById("email").value;
    var data = {
        "first_name": firstName,
        "last_name": lastName,
        "email_id": email,
        "platform_type": "web"
    };
    var auth = catalyst.auth;
    var signupPromise = auth.signUp(data);
    signupPromise
        .then((response) => {
            console.log(response.content);
        })
        .catch((err) => {
            console.log(err);
        });
}

Create a new HTML file in the client directory (CATALYST_CLIENT_HOME) and name it home.html. Copy the code given below and paste it in the home.html file and save it. This file contains the code of the page the user will be navigated to, from the onboarding email they receive.

  • View code for home.html

    Copied 
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="description" content="">
 <meta name="author" content="">
 <title>Welcome to Eventapp</title>
 <!-- Bootstrap core CSS -->
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 <!-- Custom styles -->
 <link href="product.css" rel="stylesheet">
</head>
<body>
 <nav class="site-header sticky-top py-1">
  <div class="container d-flex flex-column flex-md-row justify-content-center">
   <a class="py-2 d-none d-md-inline-block" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-inline-block align-self-center"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
        </a>
  </div>
 </nav>
 <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
  <div class="col-md-5 p-lg-5 mx-auto my-5">
   <h1 class="display-4 font-weight-normal">Welcome to Event App</h1>
   <p class="lead font-weight-normal">Your one-stop destination to create, organize, and manage events!</p>
   <a class="btn btn-outline-secondary" href="#features">Features</a>
  </div>
  <div class="product-device box-shadow d-none d-md-block"></div>
  <div class="product-device product-device-2 box-shadow d-none d-md-block"></div>
 </div>
 <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3" id="features">
  <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
   <div class="my-3 py-3">
    <h2 class="display-5">Trouble-free event management experience</h2>
    <p class="lead">Event App makes sure you have a seamless and an experience in organizing events by automating your tasks</p>
   </div>
   <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
   <div class="my-3 p-3">
    <h2 class="display-5">Create and manage events of all types</h2>
    <p class="lead">Create events, group them in categories, customize them and add details as you need</p>
   </div>
   <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
 </div>
 <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
   <div class="my-3 p-3">
    <h2 class="display-5">Invite people and keep track of their RSVPs</h2>
    <p class="lead">Invite people through various platforms to your events, record their RSVPs and obtain a final count of the attendees to your events</p>
   </div>
   <div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
  <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
   <div class="my-3 py-3">
    <h2 class="display-5">Customize your event invites in your own creative ways</h2>
    <p class="lead">Embedd images, videos, and links in your event invitations, and customize the designs of the event invites based on their contexts</p>
   </div>
   <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
 </div>
 <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
  <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
   <div class="my-3 py-3">
    <h2 class="display-5">Integrate Event App with various social media platforms</h2>
    <p class="lead">Share your events on Facebook, Twitter, Instagram, Yelp, LinkedIn and other social media platforms</p>
   </div>
   <div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
   <div class="my-3 py-3">
    <h2 class="display-5">Track sales analytics and performances of your events</h2>
    <p class="lead">Event App also provides you reports and statistics of your event performances for your convenience</p>
   </div>
   <div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
 </div>
 <footer class="container-fluid py-5">
  <div class="row">
   <div class="col-md-7 p-lg-5 mx-auto text-center">
    <h3 class="display-6 font-weight-normal">Get started with Event App today!</h3>
   </div>
  </div>
 </footer>
</body>
</html>

The CSS content of the home.html page must be included in the main.css file that was created in the client directory during the project initialization. Copy the code given below and paste it in main.css.

  • View code for main.css

    Copied 
html,
body {
	scroll-behavior: smooth;
	-webkit-scroll-behaviour: smooth;
}

.container {
	max-width: 960px;
}

.site-header {
	background-color: rgba(0, 0, 0, .85);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

.site-header a {
	color: #999;
	transition: ease-in-out color .15s;
}

.site-header a:hover {
	color: #fff;
	text-decoration: none;
}

.product-device {
	position: absolute;
	right: 10%;
	bottom: -30%;
	width: 300px;
	height: 540px;
	background-color: #333;
	border-radius: 21px;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}

.product-device::before {
	position: absolute;
	top: 10%;
	right: 10px;
	bottom: 10%;
	left: 10px;
	content: "";
	background-color: rgba(255, 255, 255, .1);
	border-radius: 5px;
}

.product-device-2 {
	top: -25%;
	right: auto;
	bottom: 0;
	left: 5%;
	background-color: #e5e5e5;
}

.border-top {
	border-top: 1px solid #e5e5e5;
}

.border-bottom {
	border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.flex-equal > * {
	-ms-flex: 1;
	-webkit-box-flex: 1;
	flex: 1;
}

@media (min-width: 768px) {
	.flex-md-equal > * {
		-ms-flex: 1;
		-webkit-box-flex: 1;
		flex: 1;
	}
}

.overflow-hidden {
	overflow: hidden;
}

Now create another new file in the client directory (CATALYST_CLIENT_HOME) and name it redirect.html. After the user completes setting up their password to access Event App, they will be redirected to this page. Copy the code given below and paste it in redirect.html.

  • View code for redirect.html

    Copied 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>redirect.html</title>
</head>
<body>
	<h2>Please check you email for a product tour</h2>
</body>
</html>

You must now enable the redirection to redirect.html. To do so, you must configure the contents of the client-package.json file in your client directory. Copy the code given below and replace it with the default code present in the client-package.json file.

  • View code for client-package.json

    Copied 
{
    "name": "EventAppClient",
    "version": "0.0.1",
    "homepage": "index.html",
    "login_redirect":"redirect.html"
}

The client component of your Catalyst project is now configured successfully. 

PreviousNext
Code the Event FunctionDeploy the Components