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();
}
})();
© 2023 Better Solutions Limited. All Rights Reserved. © 2023 Better Solutions Limited TopPrevNext