Office Development – Live Coding

SDN Cast - Live Coding - Office Development 1

Last two years I have been webcasting every Thursday at 8PM GMT+1/CET on our SDN Cast with my buddies Marcel Meijer, Fanie Reynders and recently added as fourth member Gerald Versluis. In this webcast we on a weekly base discuss the news, events on Software Development and added some demos. Usually the webcast was in Dutch but when we had international guests we shifted to English.

Running the webcast is fun, informal and sometimes high level on discussions when talking about Software Development. Last couple of weeks Fanie Reynders and I have been researching to extend our webcasts with actual live coding sessions. Fanie is focusing on his expertise dotNET Core and I am focusing on Office Development.

Hopefully we will also bring in Gerald Versluis coding on Xamarin and related stuff.

So, starting last Tuesday I started (and planned to do this every next Tuesday in the upcoming weeks) my first Live Coding session on Office Development. Basically I started with where I started blogging about the ‘new’ Office Add-ins

Older Office Development Blog Posts starting here:

https://maartenvanstam.wordpress.com/2017/07/20/office-development-2017/

A lot of time went by, and what I liked to do is looking back on my blogposts and see if they still can stand the shift in time all the way to 2019.

In my first Live Coding session I immediately jumped in to building the first Word Add-in in two ways, one in Visual Studio 2019 (Preview!) and one using Yeoman. I did realize however that I probably should have discussed a bit of starting information first, just like I did in my blog posts. I might jump back a bit in the next Live Coding session next Tuesday February 5 (Click <- to see when this will be in your location)

SDN Cast - Live Coding - Office Development 1 YouTube 

You can find the recording of my first Live Coding session here on YouTube:
https://www.youtube.com/edit?video_id=QivUh9Kyyos

Also you can find another recording on Twitch:
https://www.twitch.tv/videos/371899703##

If you want to follow our Live Coding events (and other SDN Cast webcasts) make sure you subscribe on YouTube or follow me on Twitch!

My weekly Live Coding – Office Development webcasts will always be in English (as far as my English goes that is, pretty sure you’ll get the Dutch dialect for free Smile) so everyone in theory should be able to follow what I am doing. It is still work in progress.

Fanie and I are still researching and working on the streaming tools, there is a lot going on producing live webcasts so don’t kill us if we get a crappy chatroom or other bad widgets in the first couple of weeks Winking smile.

Hope to see you in our next Live Coding sesions!

Office Development – Add-in Types, what did we have before?

Office-Development-VSTO_thumb.png

To research the ‘new’ Office JS Add-ins we need to know what types of add-ins there are. If you come from VSTO there is some similarity, add-ins can be divided in different types. Let’s see what we had before.

In VSTO you had the option to create Document Customizations aka Document-level customizations where the add-in was attached to the document or spreadsheet, Application-level customizations, here the add-in lives in the context of the host application like Word or Excel and Outlook Form Regions for customizations in Outlook

Project Type Feature Application
Document Level Customization Actions Pane Word

Excel

Custom Ribbon UI Excel

InfoPath

Outlook

PowerPoint

Project

Word

Visio

Backstage View Excel

InfoPath

Outlook

PowerPoint

Project

Word

Visio

Controls on Documents Excel

Word

Shortcut Menus Excel

InfoPath

Outlook

PowerPoint

Project

Word

Visio

Application Level Customization Custom Task Pane Excel

InfoPath

Outlook

PowerPoint

Word

Custom Ribbon UI Excel

InfoPath

Outlook

PowerPoint

Project

Word

Visio

Backstage View Excel

InfoPath

Outlook

PowerPoint

Project

Word

Visio

Outlook Form Regions Outlook
Controls on Documents Excel

Word

Shortcut Menus Excel

InfoPath

Outlook

PowerPoint

Project

Word

Visio

So, in general there are these options explained a bit:

  • Actions Pane/Task Pane (Depending Application or Document Level)

    This is the pane on the right of a document that allows you to interact with the document. In case of an Actions Pane this is attached to the document, while the Task Pane can be there independent of the document. They can both do arbitrary things, but the Actions Pane only appears with the document.

  • Ribbon UI adjustments

    Adding your own Ribbon with controls on it. VSTO can add almost every Ribbon Control available.

  • Backstage View

    Backstage View is the view that you see when you select the File Tab. This allows you to add a special tab in there for whatever you want to show there. Some limitations apply

  • Outlook Form Regions

    Outlook Form Regions extend the way you work with your mail. There are options to just add a small part on top of the mail item or take over the full real estate. You can specify when this happens, will it be only in compose or read mode? You decide.

  • Controls on Documents

    With this feature you can enhance the document with extra controls on top of the document surface. The controls are not always persistent and you may need to re-create the controls each time you open the document if you want them to appear again.

  • Shortcut Menus

    These are the context menus. Right click on the document and add extra function call options within the right-click-menu to allow the user to do specific tasks related to the position of the caret (insertion point where the cursor resides).

This is quite a lot of functionality and also keep in mind that from most of these features you can do the craziest things because you can extend the Task Panes/Action Panes with either Windows Forms but also XAML interfaces. The other features can use the full .NET Framework stack so you can do everything you want.

The challenge is now to see if we can get the same things with Office JS Add-ins. Obviously you don’t want to fall back into a limited feature set. On the other hand, there is the fact that it needs to run on multiple platforms. That can be a limiting factor.

Given this summary I now have a goal to what to look for in the ‘new’ world.

To be continued …

SharePoint Framework Extensions Developer Preview now available

SharePoint Framework Extensions Preview

Today the Office Team announced the availability of the SharePoint Framework Extensions Developer Preview. With this you can build site, list and command extensions.

To start building your own Extension Preview projects you can go and start looking at the Preview documentation. If you don’t already have an Office 365 Developer Tenant you can get one if you go to the Office Developer Program so there is no argument not to start using that.

The preview is obviously meant to serve as a way to collect feedback from the community and while the preview is running you can expect new SharePoint Framework Extension capabilities and changes based on your feedback.

If you want to provide your feedback you can do this by adding issues to the GitHub issues list but on the SharePoint tech community, the SharePoint Developer section on the Microsoft Tech Community site.

To give you an impression of what the SharePoint Framework Extensions Developer Preview brings, here are three:

1. Build your own Custom Banner using the ApplicationCustomizer.

Adding a Custom Banner is now one of your options to build your own banner with exactly the information you want to share on your list page.

1. Custom Banner SP

2. Create your own Custom Field Rendering using the FieldCustomizer.

In this example you see that the fields of the list are blurred to hide sensitive list information.

2. Custom Field Rendering SP

3. Adding Command Extensions with CommandSet

With this option you can add your own custom menu actions to be able to trigger your own custom actions.

3. Custom Extensions

If you are looking for more examples (extensions examples will be added soon) for what you can do with SharePoint there is a special SharePoint Showcase site for you to look at and to enjoy all the great options and examples.

Now go ahead, and build your own Extensions using the SharePoint Framework Extensions Developer Preview!