The Beginner’s Guide to Writing Sketch Plugins Part 2 — User Notifications
If you haven’t read Part 1, which helps you set up your coding environment, you can read it here.
Also, I’ve discovered a great text editor called Atom, which I’ve completely switched over to. I’m not sure why I haven’t discovered this until now, see you later old-school TextMate!
Continuing where we left off, we had a working plugin that displayed all the page names of your document in the Console. Now let’s look at a couple other ways besides the Console to display messages. These are useful when you want to alert users (or yourself) various things, like when a plugin is finished running, or if you need get some form of user input. It’s also nice not to have to constantly be switching to the Console to test your scripts.
There are 2 additional ways to notify users inside Sketch:
- A Message — a small unobtrusive message that displays at the bottom of the application, and fades away after a short period of time
- An Alert Box — a standard popup window that either requests user input or requires action to continue
Both have their use cases, and typically you don’t want to overload your plugin (or users) with multiple messages. So play around with both to see what feels right for your own Plugin.
Let’s go back to the plugin script from my first article to get reacquainted.
If you break down this code snippet, pageName refers to each name page name within the array of pages of the document. pages is an array, which is a data container that holds all the page information. For loops are typically used to access these arrays, iterating through each object to get or set values.
This line specifically, is what sends the the variable pageName to the Console.
Now let’s add a message to the bottom of the script, that will show a message inside Sketch when the script completes.
To do this we’ll add a line of code after the for loop bracket:
doc is a variable at the top of the script that refers to the document, and showMessage is a built-in function, where we can pass a variable or String to display a message.
Here is how adding it after the for loop looks in the context of the entire script:
Run MyPlugin from the Plugins menu to see the result, you should see this at the bottom of your Sketch application:
This type of message is useful when you don’t want to constantly refer to the console, or if you have a message you’d like the user to see, but not take action on.
If you do want a more prominent message, one that requires action to continue, you’d use an alert box. To add this, we’ll add a line of code at the beginning of the script and one after the in-app message displays.
The first line is added at the top, above the doc variable declaration, to refer to the application itself.
var app = [NSApplication sharedApplication];
The second line accesses this new app variable to send messages to the application.
[app displayDialog:"This is an alert box!" withTitle:"Alert Box Title"];
Here’s the entire code with the new lines added:
Run MyPlugin from the Plugins menu and you should see this:
Go ahead and change the messages (within the quotes) to anything you like and rerun the Plugin. Customization complete!
This is really the start of debugging and displaying data inside of Sketch. You can try moving these alert/message scripts around, or adding additional scripts to display different things, like variables or array counts.
To show how many pages there are in the document, you can create a message to display pages.count().
[app displayDialog:"This document has "+ pages.count() + "pages." withTitle:"Alert Box Title"];
This will show:
And that’s user notifications in a nutshell! These first two articles really focused on getting started. First getting your coding environment ready, then on debugging and displaying messages within Sketch. My next article will focus more on code snippets, how to find specific data and what to do with it. Thanks for tuning in!