To date I have created four Trello Power-Ups that I use every day to fill a gap that I need in order to scrum my life’s “backlog.” I was first turned towards Trello when I read Deep Work by Cal Newport. Since then I created:
And I am working on another for Outlook Calendar integration – with a possible companion OfficeJS Add-in to boot.
Each time I created a Power-Up, I found myself going back to the documentation over and over again for the most trivial items. So, I finally sat down and hacked out a type definitions file based on the existing Trello Power-Up Documentation.
You can find all the information about the type library I created here:
Recently, I have been working with a tool from Microsoft Garage which allows you to quickly develop OfficeJS projects in Word, Excel and PowerPoint. It is called Script Lab. You can find more information about it here:
To install Script Lab, open Word, Excel or PowerPoint and on the Insert tab, click Store.
Type “script lab in” the search box and hit enter. Then select Script Lab from the list and click Add.
Once added, you will see a new Script Lab tab. From there, you click the Code button to open the task pane.
This tool comes with a lot of options:
If you click the hamburger menu you will see an option to Sign Into GitHub. This will allow you to create Gist’s and access and save code snippets to GitHub.
You can import Samples from GitHub (with a URL) and access Snippets.
There are options to change the color in the editor at the bottom from Dark to Light.
And once in your solution, you can change the template (the html page), the CSS Style and any references libraries.
NOTE: You are dealing with a subset of the whole solution here. You cannot create Ribbon buttons or dialogs. You can only develop task pane add-ins. You can work with Script Labs in Word, Excel and PowerPoint, but not Outlook (yet).
Script Lab allows you to test things in a quick fashion. Here is what the code pane looks like:
One of the more difficult part of working in OfficeJS is to be able to quickly test how some feature of function or a block of code will work. In the VSTO and VBA days, I would pop open the Visual Basic Editor in Word, Excel or PowerPoint (ALT+F11), then open the Immediate Window (CTRL+G) and then start typing away to test specific object model items. There was nothing similar to this with OfficeJS, until now.
Script Lab is just that, a laboratory for you to test your ideas, your snippets, your work in progress. It is a way to test something before you put it into your full blown solution. You can then save code snippets as Gist (on GitHub) and export the solution.
And once you have written your code and are ready to test it, you very easily run it in the Taskpane or (my favorite) you can run side-by-side. From the Ribbon click the Run button and then you can still edit your code/html and then refresh and reload it in the side-by-side Run window. This makes developing a solution or just testing ideas VERY easy:
Once you are running you (kind of) have debugging tools, can see the DOM and see console messages. And my favorite part, is that once you have hacked out a basic add-in concept with buttons and text in the HTML and code in the script file, you can export your solution (Export for publishing). This will create a ZIP which will contain the XML manifest and HTML (with script inline), which is very similar to the minimalist add-in I outlined in a previous blog post:
NOTE: If you do write async/await code the exported result will be very ugly and hard to follow. This is why you might want to export to GitHub if you use async/awat code (TypeScript) so you can keep the original source and then transpile to ES5 later.
However, I really like VS Code and the power of NPM and Browser-Sync, so I worked on converting a Script Lab project into an NPM project. This took quite a lot of work and that will be a topic for a future blog post, but the gist of it is to create a new Office Yeoman (yo office) project for the same application and then gut and Frankenstein it with the Script Lab code.
Bottom line, I love Script Lab. If you are working on an OfficeJS project and/or planning on creating an OfficeJS project and/or want to learn how to develop in OfficeJS, this is definitely THE tool to have.
I have been using VSCode a lot lately. I have recently started delving into TypeScript and wanted to use VSCode to begin developing my first project. I was following a tutorial on Lynda.com and for the life of me could not get it to “transpile” my TS project. I setup everything according to this site and it failed. What I kept getting was this error:
error TS5042: Option ‘project’ cannot be mixed with source files on a command line.
This error is all over the web and not a single solution helped. I am guessing it is caused by the fact I have VS2015, VS2017, and VSCode installed on my box. But, this is the weird thing, if I go to the PowerShell in the Terminal window and paste the EXACT command that VSCode uses… IT WORKS!!! What? I started puling my hair out at this point…
Ok, now that really sucked. So, I got fed up and just build my own tasks.json using the “Other” option and here is what I entered:
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"taskName": "DaveCra TSC Task for VSCode",
"command": "tsc -p tsconfig.json",
Once I set this up, it was the default build task and a CTRL+SHIFT+B ran fine. Right after that I was able to go to the PowerShell terminal and type “node ” and it ran like a charm.