showNotification

Task Pane notification


using JQuery


showNotification = function(header, text) { 
$('#notification-message-header').text(header);
$('#notification-message-body').text(text);
$('#notification-message').slideDown('fast');
}


using Fabric-JS Component (ms-MessageBanner)

Home.html

    <div class="ms-MessageBanner" id="notification-popup"> 
        <div class="ms-MessageBanner-content">
            <div class="ms-MessageBanner-text">
                <div class="ms-MessageBanner-clipper">
                    <div class="ms-font-m-plus ms-fontWeight-semibold" id="notification-header"></div>
                    <div class="ms-font-m ms-fontWeight-semilight" id="notification-body"></div>
                </div>
            </div>
            <button class="ms-MessageBanner-expand" style="display:none">
                <i class="ms-Icon ms-Icon--chevronsDown"></i>
            </button>
            <div class="ms-MessageBanner-action"></div>
        </div>
        <button class="ms-MessageBanner-close"> <i class="ms-Icon ms-Icon--x"></i> </button>
    </div>

Home.js

( function () { 

    var messageBanner;

    Office.initialize = function (reason) {
        $(document).ready(function () {

            // Initialize the FabricUI notification mechanism and hide it
            var element = document.querySelector('.ms-MessageBanner');
            messageBanner = new fabric.MessageBanner(element);
            messageBanner.hideBanner();
        });
    };

    function showNotification(header, content) {
        $("#notification-header").text(header);
        $("#notification-body").text(content);
        messageBanner.showBanner();
        messageBanner.toggleExpansion();
    }

})();



© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext