Office Development – Coding in Script Lab

clip_image002

One of the nice things in Script Lab is that you can connect it to GitHub allowing you to share your code snippets or import code snippets from other people. If you opened the Script Lab Task Pane you will notice this little person icon with an even smaller plus sign.

clip_image004

With this button you can authorize Script Lab to access your GitHub account where it needs read and write access to read or write Gists. According to GitHub:

Gists are a great way to share your work. You can share single files, parts of files, or full applications. You can access gists at https://gist.github.com.

A great option to either store your scripts that you created by Script Lab for your own use but even better: to share the code with others. Get feedback, or simply make someone happy by providing the code to the community!

Clicking the button will ask you for your permission on your GitHub account. The permissions are not all that shocking, you just give permission to create, edit and get Gists from your account to be able to show it in Script Lab.

clip_image006

After providing your authorization you can go into your GitHub account and see the permission you just granted to Script Lab:

clip_image008

From there you can also revoke the permissions if you think they shouldn’t need the access anymore. In general, it is a good idea to go in there every now and then to evaluate who can access your code and are they still in the position where they need access. Over time the number of permissions can grow while maybe you don’t use many of the services anymore. If so, time to clean up while you are at it!

Now that you provided access to your Gists you’ll notice the little person icon changed into your profile icon:

clip_image010

Clicking the little profile icon will allow you to see the attached GitHub account and if you like, just to sign out of your account. Cancel will bring you back into Script Lab (I probably would have titled the button “Close” instead of “Cancel”, not it gives you the impression that Cancel will disconnect the GitHub account from Script Lab, but it doesn’t).

clip_image012

Now, your GitHub account is connected to Script Lab you can share your code snippets to Gists on GitHub. This is done through the “ Share” button. The share button has options to:

Publish a new Public Gist (for everyone to see), a new Private Gist (for your eyes only), Copy to Clipboard or to export the snippets:

clip_image014

Using the option “New public gist” will push the content you created in Script Lab to GitHub. Make sure that before you do this the title property of the Script Lab project is what you want to call it. This will be adopted by GitHub as you’ll see a bit further down in this blogpost. The confirmation looks like this and will provide you the URL of the Gist that you just created. With this URL you can import the Gist at a later time.

clip_image016

If you take the URL and open it in the browser you’ll see your code on GitHub:

clip_image018

It created a new Gist, nicely formatted on GitHub and the menu changed into “Update existing gist”. If you edit your code, push the “Update existing gist” option Script Lab will go out to GitHub again and save the changes.

clip_image020

This is how it looks like on GitHub. Going into the revisions tab you can see that the line where I changed the color was updated. The line with color red was removed and replaced by the line with the color blue in it.

clip_image022

How to restore your gist?

On GitHub if you navigate to your gist you can find on the top right the URL that comes with the gist. Obviously you can also just use the URL you just used to navigate, but GitHub will provide you several other options such an embedded url to put it on your website or clone the code. Here we copy the URL:

clip_image024

Next you go into the Script Lab menu (the ‘hamburger’ menu top left) to show you the Import option. Clicking the Import option provides you with a new dialog where you can enter the snippet URL or GitHub Gist ID:

clip_image026

Enter the URL and import the snippet. Now your Script Lab is filled with the code from the Gist, ready for you to continue your coding.

In follow-up blogposts, I will use this to test and experiment with some of the JavaScript for Office (aka OfficeJS) APIs. I really like this export option to gists. Maybe I will build a small collection of snippets for all the tested APIs for later reference.

Office Development – Installing and Running Yeoman

Office Development - Yeoman

In the previous two posts around creating your first Word add-in we installed Node JS in the first post Office Development – Installing Node.js and installed Git in the second post Office Development – Installing Git. If you haven’t done this already move along and do that first.

In this post, third in the series of building your first Word Add-in (based on the JavaScript API for Office) we will install and use another tool called Yeoman.

Yeoman

Yeoman used to be a member of the social class in late medieval to early modern England (source wiki: https://en.wikipedia.org/wiki/Yeoman) but these days it is the name for an open source scaffolding tool, released at Google I/O 2012. Yeoman runs as a command-line tool and will provide you with a boiler plate project for several different solutions. Because the software is open sourced you can find it on GitHub: https://github.com/yeoman

Over time there have been created many generators for Yeoman to do all sorts of things such as creating website starters and more. The reason why we discuss it here is because they (the Office Dev Team) also created a generator that allows you to quickly build a Microsoft Office Add-in project using the Yeoman scaffolding tool.

You can use this if you simply want to start creating an add-in with a basic text editor other than Visual Studio. Of course, you can also use more advanced text editors including Visual Studio of Visual Studio Code but just to show you that you don’t need much to create your first add-in you can use this option.

Installation is easy (provided you installed the tools from the other two blogposts):

Open a Command window (Windows Flag, Command) and run:

npm install -g yo generator-office

This will globally (-g) install the Yeoman (yo) package and the Office Generator (generator-office) on your machine. The routine ends in an automatically engaged final check by yodoctor:

clip_image002

You can also check it yourself by running the command:

npm list -g -depth=0

clip_image004

If all went well you should see, as you can see in the picture above, at least yo@<version> and generator-office@<version>.

Now will be the time to generate our first Word Add-in … hooray!

Enter the command line command:

yo office

This will kick off a series of questions needed to create your add-in based on your input:

clip_image006

Except for the name I opted to keep the defaults. You can select other than the defaults but for now keeping the defaults is ok.

Yeoman starts generating the add-in for you and in the meantime a website is opened with instructions. The instructions take you by the hand and will guide you through the process when the add-in finished generating.

clip_image008

At this time generating your add-in is probably finished, so follow the instructions from the webpage by clicking Next

According to this page the next command should be:

npm start

This will start the local server hosting the add-in at:

https://localhost:3000

As you can see it will be hosted at a ‘secure’ site (https) on port 3000. This ‘secure’ site could give you some headache however. Initially the site needs the firewall to be opened:

clip_image010

I’d recommend unchecking the Public Networks checkbox and only to allow it on your Private Networks for now.

Continuing the process will result in another security issue:

clip_image012

Another no-go? Well, maybe … but let’s click “Details” first and find out what this is all about. So far not a real smooth experience for the novice office add-in developer don’t you think? Go ahead, click “Details”:

clip_image014

Ah! What it says is that your PC doesn’t trust the website’s security certificate … and to be more specific it found that the name of the hostname on the security certificate is different than the one you are trying to visit.

This is quite logical because you are visiting your localhost and the website’s security certificate, as you will find out a bit later, is signed to by “Internet Widgits Pty Ltd” so against all recommendations continue and click the “Go on to the webpage” link.

clip_image016

And there you have it! Your first Word Add-in!

“Well, hel-lo … there is no Word here, what do you mean” you might say … and you are right (again).

Although I explained in my earlier blogposts that Add-ins built by using the JavaScript for Office APIs basically are websites hosted in the Office client such as Word you’ve seen here that your really are building a website.

The security issues will however throw a big issue loading this website in the Word client. It will simply be rejected as it appeared to be unsafe to run.

Solving the certificate issue is a story on itself so I will put this in a separate blogpost.

What you’ve seen so far is that you built your new add-in by simply using some web development tools. No Visual Studio installations, nothing of this all. Obviously, you can use Visual Studio to create Office Add-ins, and I will show you that in another series of blogposts. For now we still need to finalize our first journey of creating this Word Add-in but we need to overcome our security issues first.

And therefor, to be continued …

SDN Cast 58 – Inspire, API’s en Web Assembly

SDNCast 58-800

Last week it was the week of the Microsoft Partner Conference called Inspire, the conference where Microsoft invites all partners to come over to the special partner conference to get into the new fiscal year and to realign the partner plans for the upcoming year. It appears there is a slight change in policy where the Microsoft wants to include the partners more in their sales flow for selling their cloud products like Azure and Office 365. In previous years much of the sales was often done directly through Microsoft. The new strategy is to include the partners more in this process sharing the revenue processed by these sales initiatives. An important change is thinking in scenarios of specific industries.

Microsoft was always very much integrated at the level of the technology specialists, but when it came to selling the product at the board level there was an issue. The new strategy is to explain more how Microsoft fits in the process of the business itself. How can they extend their services in a way where the business improves by providing better quality and better services to their customers together with Microsoft.

New was the announcement to bring Microsoft 365 to the market for business and enterprise subscribers. An extension to the Office 365 program where Windows is now included next to several other services like security services. In our Dutch webcast we dive into this, this week.

This week we also bring the annual list of free e-books published by one of the Microsoft guys who made a hobby of collecting all the available free e-books and this is a huge list by now! Look at the links from the show-notes below for the URL to get the e-books. The link also contains a couple of links for instance to download the full list to your local machine. Not that this is advised, it really is a huge amount of data to pull in, but if you really want you can do it.

Also two AI APIs became available, one for General Availability (the Bing Entity Search API) and one in preview (Project Prague). The links are like all others in the list below. We discussed the APIs in depth, but in Dutch … sorry for that .

Fanie prepared another demo for us, and this week he is showing the Web Assembly and what you can do with it. If you want to explore by yourself here are some links:

WebAssembly Community Group

https://www.w3.org/community/webassembly/

Github:

https://github.com/webassembly

Where can you find our 58th episode of our Dutch SDN Cast?

https://youtu.be/TuNcLjT1RlA

Did you subscribe our Dutch SDN Cast channel already?

Subscribe your YouTube channel if you don’t want to miss a single broadcast. Usually we will broadcast on Thursday evenings at 8 PM but there can be a change of plans where we need to move to another time or day. So to be sure Subscribe to our channel on YouTube or go to http://www.sdncast.nl to see when the next episode is due.

Other news:

 

More layoffs
https://www.scribd.com/document/35351…

Community Leader Zone
http://clzinvite.kickoffpages.com/?ki…

Largest FREE Microsoft eBook Giveaway
https://blogs.msdn.microsoft.com/mssm…

Introducing Microsoft 365
https://blogs.office.com/en-us/2017/0…
https://www.microsoft.com/en-us/micro…
https://www.microsoft.com/en-us/micro…

Announcing UWP Community Toolkit 1.5
https://blogs.windows.com/buildingapp…

Samsung Releases 4th Preview of Visual Studio Tools for Tizen including support for .NET Core 2.0 Preview
https://blogs.msdn.microsoft.com/visu…

The State of Developer Ecosystem in 2017
https://www.jetbrains.com/research/de…
https://insights.stackoverflow.com/su…

Calling all game devs: The Dream.Build.Play 2017 Challenge is Here!
https://blogs.windows.com/buildingapp…

Bring rich knowledge of people, places, things and local businesses to your apps
https://blogs.bing.com/search-quality…

Project Prague
https://labs.cognitive.microsoft.com/…

Events

This week’s events

Inspire July, 9-13 – Washington D.C.
https://partner.microsoft.com/en-us/inspire/
https://partner.microsoft.com/en-us/inspire/sessions

Next Week events

Faculty Summit 2017: The Edge of AI – July 17,18 Redmond, WA
https://www.microsoft.com/en-us/research/event/faculty-summit-2017/

Upcoming events

Agile 2017 – August 7-11 2017, Orlando FL

https://www.agilealliance.org/agile2017/

Wazug – September 7 2017, Hilversum

Ignite 2017 – September 25-29 – Orlando
https://ignite.microsoft.com

Hybrid IT Event – September 26 – Maarssen, NL
https://events.global.fujitsu.com/r7/runtime/fujitsu/events/registration.php?event=raqvmqdf125d&l=en&s=login&ref_s=registration

SDN Event 3 – 6 October 6, Zeist, NL

https://www.sdn.nl/EVENTS/6-oktober-2017

TechDays October 12-13, 2017 RAI Amsterdam

http://www.techdays.nl/
https://techdays.msnlevents.net/content/eventselection.aspx?eventid=26152

SharePoint Unite – October 24-26 2017, Haarlem

https://sharepointunite.com/

Visual Studio Live! November 12-17 2017 Orlando, FL

https://live360events.com/events/orlando-2017/vslive.aspx

As usual we are always looking for presenters for our own events and Meetup’s so if you want to share something about hot technologies or just about something you implemented at work or in an App that could be interesting to our audience let us know so we can schedule you for one or our next SDN events or Dutch .NET Group Meetups.

This off course also goes for if you want to write a great article for us to publish in our SDN Magazines or at our SDN Website. The downside of publishing a magazine article is that there can be some time between writing the article and publishing the magazine. So, if it is time critical sometimes the best option is to publish it on the www.sdn.nl website to get more speedy attention to the article.

As you see, options enough to address your audience with top notch information. You can even, if you like, be our guest in our SDN Cast shows to discuss the projects you are working on or other topics you master. We will instruct you how to connect with us and what it is you need to join the show.

Hopefully we will see you at our weekly web cast, for the schedule go to www.sdncast.nl for next week’s announcement to find out the day and time of our next broadcast or go to www.sdncast.nl/youtube to watch old episodes and videos that we recorded at our events. Don’t forget to subscribe our YouTube channel www.sdncast.nl/subscribe or go directly to YouTube not to miss any of our shows!