- Dependencies
- Setup for local development
- Adding CSS reference
- Add Message control
- Run the application
Contact Support
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>