Es5 getting started in EJ2 JavaScript Message control

7 May 20254 minutes to read

This section explains the steps required to create a simple JavaScript (ES5) Message control and configure its available functionalities in the TypeScript using the Essential® JS 2 quickstart seed repository. This seed repository is pre-configured with all the Essential® JS 2 packages.

Dependencies

The following list of dependencies are required to use the Message control in the application.

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

Setup for local development

To get started with the Message control, clone the Essential® JS 2 quickstart project, and install the necessary npm packages by using the following command line scripts.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

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 the 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/29.2.4/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>