Skip to content

ColinEberhardt/openfin-examples-notifications

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

z# OpenFin examples: Notifications

OpenFin allows native desktop notifications, the system-level windows which briefly appear as alerts at the bottom right of the screen, to be created and interacted with.

To run this example, clone the repository, run:

$ npm install

There is a simple Node/Express server which will need to run. Navigate to the root directory of the project and run:

$ node server

then click the link below to download the installer:

Installer

##Create a new notification A new Notification may be created as shown below:

var notification = new fin.desktop.Notification({
	//The HTML page containing the content of the Notification/
	url: "exampleNotification.html",
	//'message' is where you may pass initial parameters
	message: {data: "hello world!"},
	onClick: function () {
		console.log("clicked");
	},
	onClose: function () {
	// Invoked when the 'close()' method is called.
		console.log("closed");
	},
	onDismiss: function () {
	//This is invoked when the notification is swiped right to dismiss. 
	//It is esentially the same as clove via a different method.
		console.log("dismissed");
	},
	onError: function (reason) {
		console.log("error: " + reason);
	},
	onMessage: function (message) {
	//Invoked when the 
		console.log("message: ", message);
	},
	onShow: function () {
		console.log("shown");
	}
});

##Setting initial state Initial properties may be passed to the Notification window. They are sent via the 'message' property of the Object passed as an argument to the 'fin.desktop.Notification({})' constructor (see above).

To access the properties within the Notification itself a global JavaScript function named 'onNotificationMessage' must be available. It will receive the Object, as an argument, and from there you may set the state of the Notification, for example:

Passing the argument to the constructor like this...

var _obj = {
	message:"link copy",
	link: "http://www.somelinkaddress.com"
};

fin.desktop.Notification(_obj);

and adding the following javaScript code to the HTML of the Notification...

function onNotificationMessage(obj){
    _data = obj;
    document.querySelector("#main").innerHTML = "<div id='link'>"+obj.message+" </div>";

    document.querySelector('#main').addEventListener('click', function(e){
        fin.desktop.System.openUrlWithBrowser(_data.link, function () {
            console.log("successful");
        },function (err) {
            console.log("failure: " + err);
        });
    })
}

will add a hyperlink to the Notification.

##Communication between app and notification ####App to Notification To send a message to the Notification from within the Application use:

notificationInstance.sendMessage({value: "some value"});

Inside the Notification a global 'onNotificationMessage' function is required (as per 'Setting initial state').

####Notification to App From within the Notification use:

var notification = fin.desktop.Notification.getCurrent();
notification.sendMessageToApplication(passedMessageObject);

In the Object passed as an argument to the 'new fin.desktop.Notification' constructor function, pass the function to be invoked as the 'onMessage' property, like so...

var notification = new fin.desktop.Notification({
	onMessage: function (message) {
		console.log("message = ", message);
		// do stuff with the 'message' object
	},
});

About

OpenFin examples of desktop notifications

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 65.0%
  • HTML 23.1%
  • CSS 11.9%