JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Template in JavaScript Message control

08 May 2023 / 1 minute to read

The message supports templates that allows the user to customize the content with a custom structure. The content can be a string, paragraph, or any other HTML element. The template can be rendered through the content property or added directly to the HTML element.

In the following sample, the Message control content is customized with HTML elements and JavaScript Button controls, which are directly added to the HTML element.

Source
Preview
index.html
index.ts
Copied to clipboard
<html>

<head>
            
    <title>Essential JS 2 Message control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Message control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="msg-template-section">
            <div class="content-section">
                <button id="btn"></button>
                <div id="msg_template">
                    <p class="title">Merged pull request</p>
                    <p>Pull request #41 merged after a successful build</p>
                    <button id='commitBtn'></button>
                    <button id='closeBtn'></button>
                </div>
            </div>
        </div>
    </div>
    <style>
        /* Sample level styles */
        .msg-template-section .content-section {
            margin: 0 auto;
            max-width: 450px;
            padding-top: 20px;
        }

        .msg-template-section .e-btn.msg-hidden {
            display: none;
        }

        .msg-template-section .e-message .title {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.25;
        }

        .msg-template-section .e-message .e-msg-icon {
            padding: 0 4px;
            margin-top: 3px;
        }

        .msg-template-section .e-message p {
            margin: 8px 0 4px;
        }

        .msg-template-section .e-message .e-btn {
            padding: 0;
        }
    </style>
</body>

</html>
Copied to clipboard
import { Message } from '@syncfusion/ej2-notifications';
    import { Button } from '@syncfusion/ej2-buttons';

    let showButton: Button = new Button({ content: 'Show pull request', cssClass: "e-outline e-primary e-success msg-hidden" });
    showButton.appendTo('#btn');
    showButton.element.onclick = (): void => {
        msgTemplate.visible = true;
        showButton.element.classList.add('msg-hidden');
    }
    let msgTemplate: Message = new Message({
        severity: "Success",
        closed: () => {
            showButton.element.classList.remove('msg-hidden');
        }
    });
    msgTemplate.appendTo('#msg_template');

    let button: Button = new Button({ cssClass: 'e-link', content: 'Dismiss' });
    button.appendTo('#closeBtn');
    button.element.onclick = (): void => {
        msgTemplate.visible = false;
    }

    let commitButton: Button = new Button({ cssClass: 'e-link', content: 'View commit' });
    commitButton.appendTo('#commitBtn');
Previous
Next