Skip to main content

Initialization

info

Download the DHTMLX Message package as a part of the DHTMLX Suite library

To add a message on a page, you should take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX Message</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <!--optional-->
        <div id="message_container"></div>
        <script>
            // creating DHTMLX Message 
            dhx.message({
                node:"message_container",
                text:"This is an error message",
                css:"dhx_message--error",
                icon:"dxi-close"
            });
        </script>
    </body>
</html>

Include source files​

Unpack the downloaded package into a folder of your project.

After that, create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container​

info

This is an optional step. By default a message appears in the top right corner of the screen.

Add a container for Message and give it an id, for example "message_container":

index.html
<div id="message_container"></div>

Create necessary message box​

Create a desired message box with the corresponding constructors. The listed constructors take an object with configuration options of message boxes as a parameter.

  • dhx.message(): {close() => void}; - to create a message. The constructor returns an object with the close() method:
const message = dhx.message({
    text:"Message text", 
    icon:"dxi-clock", 
    css:"expire", 
    expire:1000
});

console.log(message); // -> {close: function}

Related sample: Message. Show Message

  • dhx.alert() - to create an alert message box
dhx.alert({
    header:"Alert Header",
    text:"Alert text",
    buttonsAlignment:"center"
});

Related sample: Message. Show Alert

  • dhx.confirm() - to create a confirm message box
dhx.confirm({
    header:"Confirm Header",
    text:"Confirm text",
    buttons:["decline", "accept"],
    buttonsAlignment:"center"
});

Related sample: Message. Show Confirm

  • dhx.tooltip() - to create a tooltip. The constructor takes two parameters: 
dhx.tooltip("Current Value 1", {node: "first", position: "center"});

Related sample: Message. Show Tooltip

Configuration properties​

There is a set of properties you can specify for message boxes to optimize their configuration for your needs. Read details in the related article.