HelpBot Assistant

How can I help you?

Getting started in EJ2 JavaScript Message control

10 Feb 20264 minutes to read

This section explains the steps required to create a simple Essential® JS 2 Message and demonstrate the basic usage of the Message control in a JavaScript application.

Dependencies

The list of dependencies required to use the Message component in your application is given below:

|-- @syncfusion/ej2-notifications
  |-- @syncfusion/ej2-base
  |-- @syncfusion/ej2-buttons
  |-- @syncfusion/ej2-popups

Setup for local environment

Refer to the following steps to set up your local environment.

Step 1: Create a root folder named my-app for your application.

Step 2: Create a my-app/resources folder to store local scripts and styles files.

Step 3: Open Visual Studio Code and create my-app/index.js and my-app/index.html files to initialize the Essential® JS 2 Message control.

Adding Syncfusion® resources

The Essential® JS 2 Message control can be initialized by using either of the following ways.

  • Using local script and style.
  • Using CDN link for script and style.

Adding CSS reference

The combined CSS files are available in the Essential® JS 2 package root folder. This can be referenced in the [src/styles/styles.css] file using the following code.

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-notifications/styles/material.css';

To add the individual control CSS, refer to the individual control theme section. To use the combined control styles, make use of Syncfusion® CRG (Custom Resource Generator) in the application.

Add Message control

Now, start adding the Essential® JS 2 Message control to the application. To get started, add an HTML <div> element to the index.html file.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Message control</title>
    <link rel="stylesheet" href="./styles/styles.css">
    <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/ej2-notifications/dist/global/ej2-notifications.min.js" type="text/javascript"></script>
</head>
<body>
    <!--Element which will render as Message-->
    <div id="msg"></div>
</body>
<script>
    var msgObj = new ej.notfications.Message({
        content: "Please read the comments carefully"
    });
    msgObj.appendTo("#msg");
</script>
</html>

Run the application

Run the application in the browser using the following command.

npm start

The following example shows a basic Message control.

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Essential JS 2 Message control</title>

    <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
    <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css">

    <!-- Essential JS 2 Message material theme (Control Styles) -->
    <link href="https://cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet" type="text/css">

    <!-- Essential JS 2 Base's global script (Dependency Script) -->
    <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

    <!-- Essential JS 2 Message global script (Control Script) -->
    <script src="https://cdn.syncfusion.com/ej2/ej2-notifications/dist/global/ej2-notifications.min.js" type="text/javascript"></script>

<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <!--Element which will render as Message-->
    <div class="msg-default">
        <div id="msg"></div>
    </div>

    <script>
        var msgObj = new ej.notifications.Message({
            content: "Please read the comments carefully"
        });
        msgObj.appendTo("#msg");
    </script>
    
    <style>
        /* Sample level styles */
        .msg-default .e-message {
            margin: 100px;
        }
    </style>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>