Skip to content

Instantly share code, notes, and snippets.

@Gr8Gatsby
Created June 29, 2015 00:46
Show Gist options
  • Save Gr8Gatsby/9ec6e3b4aa73c5849ba9 to your computer and use it in GitHub Desktop.
Save Gr8Gatsby/9ec6e3b4aa73c5849ba9 to your computer and use it in GitHub Desktop.
This Gist shows how to create a simple toast message on Windows using JavaScript.
function createToast(message, imgUrl, imgAlt) {
// Namespace: Windows.UI.Notifications
if (typeof Windows.UI.Notifications === 'undefined') {
return;
}
// Setup variables for shorthand
var notifications = Windows.UI.Notifications,
templateType = notifications.ToastTemplateType.toastImageAndText01,
templateContent = notifications.ToastNotificationManager.getTemplateContent(templateType),
toastMessage = templateContent.getElementsByTagName('text'),
toastImage = templateContent.getElementsByTagName('image'),
toastElement = templateContent.selectSingleNode('/toast');
// Set message & image in toast template
toastMessage[0].appendChild(templateContent.createTextNode(message || 'Demo message'));
toastImage[0].setAttribute('src', imgUrl || 'https://unsplash.it/150/?random');
toastImage[0].setAttribute('alt', imgAlt || 'Random sample image');
toastElement.setAttribute('duration', 'long');
toastElement.setAttribute('launch', '{"type":"toast","code":"info"}'); // Optional Launch Parameter
// Show the toast
var toast = new notifications.ToastNotification(templateContent);
var toastNotifier = new notifications.ToastNotificationManager.createToastNotifier();
toastNotifier.show(toast);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>http://jsbin.com/lidovo/29/edit?html,js,output</title>
</head>
<body>
<button id="toast">Toast</button>
<a href="http://jsbin.com/lidovo/29/edit?html,js,output">View on JSBin</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment