Office 365 Development with Visual Studio 2017 – Part 2

When Visual Studio 2017 was launched earlier this year, I wrote an article to provide a glimpse of how to get started with Office 365 development with VS 2017 and different project templates available in VS 2017. You can read it here.

Let’s continue our journey of Office 365 development with VS 2017 in this article.

Objectives

In this article, we will walk through creating and running Office 365 projects in VS 2017. Along with that, I will explain Office 365 Add-in concepts side by side.

We will learn the following in this article.

  • Creation of Excel add-in projects
  • Brief intro of Office 365 Add-in
  • When you should choose which type of project

Prerequisite

This article assumes that you already have installed Visual Studio 2017 with Office 365 development option on your PC. If not, then please read part-1 and follow the installation steps. You will not see the project templates mentioned in this article if you don’t have the correct version of Visual Studio with Office 365 development option.

To make sure which version of Visual Studio you are using, go to “Help” menu and select “About Microsoft Visual Studio” sub-menu in Visual Studio.

Make sure you are using Visual Studio 2017.

Office Development

I’m using Community edition of VS 2017 which is “Free, fully-featured IDE for students, open-source and individual developers”.

Office Development
Image credit: Microsoft

You can download VS 2017 Community edition here.

The Office 365 development options are same in all editions of VS 2017, namely Community, Professional, and Enterprise. So, it will not matter whichever edition of VS 2017 you have for following the steps of this article.

Getting Started

Let’s start with creating a new Office 365 project for the add-in.

Either click on the menu “File” -> “New” -> “Project” or on the “Start Page” under “New Project” section, click on “Create new project…”:

Office Development

In the “New Project” popup, expand “Office/SharePoint” category under Visual C# and click on “Add-ins”.

Office Development

You will see project templates for Word, Excel, PowerPoint, Outlook, and SharePoint add-in.

Let’s briefly understand about Office 365 add-ins.

What is Office 365 add-in?

With Office 365 add-in or Office add-in, you can build program/solution that extends Office applications and interacts with the content in Office documents. You can add new functionality to Microsoft Office clients or create new rich, interactive objects that can be embedded in Microsoft Office documents. Office add-in runs in Microsoft Office across multiple platforms, including Office for Windows, Office Online, Office for the Mac, and Office for the iPad.

For more information on Office 365 add-ins, read on Microsoft website here. I will cover more on Office 365 add-ins in a separate article later.

In the New Project popup, select “Excel Web Add-in”, then click OK.

You will see a “Create Office Add-in” dialog with following two options:

  • Add new functionalities to Excel.
  • Insert content into Excel spreadsheets.

    Office Development

Let’s quickly see what this means. We will understand by inserting some add-in in Excel.

Open Excel and create a new workbook. Go to “Insert” -> “My Add-ins” -> “See All…”:

Office Development

“Office Add-ins” dialog will open. Click on “STORE”, enter “Wikipedia” in search, once Wikipedia add-in appears, click on “Add” button next to it.

Office Development

The dialog box will close and you will see now that the “Wikipedia” add-in is added under “Add-ins” ribbon.

Office Development

Click on it and on the right side, you will see a new section.

Office Development

Anything you can do on Wikipedia website, now you can do from inside Excel only using this add-in.

This is an example of “Extend functionality” type of add-in. These types of add-ins let you do some work right from Office applications without opening any other application. If you want to create this type of add-in, you should select “Add new functionalities to Excel” option in “Create Office add-in” dialog.

Now, let’s see some other add-in examples. Once again in Excel, go to “Insert” -> “My Add-ins” -> “See All…”. In the “Office Add-ins” popup, click on “STORE” tab and search on “bubbles”,

Office Development

Click on the first row “Add” button. You will see in the top right under “Insert” ribbon, a new “Excel Bubbles” add-in is available now.

Office Development

Click on it and a section with bubbles is added into current worksheet.

Office Development

Click on the “Sample Table” bubble in this section. It will add some sample data in worksheet and populate bubbles as per data,

Office Development

This is an example of “Content” type of add-in which adds some content inside an Office application. If you want to create this type of add-in then you should select “Insert content into Excel spreadsheets” option in “Create Office add-in” dialog.

Let’s go back to Visual Studio now. We were on this popup,

Office Development

Let the selection be “Add new functionalities to Excel”. Click “Finish”.

VS will create a new Excel add-in solution with 2 projects,

Office Development

Before understanding “what” these projects are and “why” they are created, let’s first understand the composition of an Office 365 add-in.

An Office 365 add-in consists of two components,

Office Development
Image credit: Microsoft

  • XML manifest file
    specifies settings and capabilities of the add-in
  • Web application
    interacts with Office clients and documents

Now coming back to Visual Studio, in VS 2017 Solution Explorer, you will see these two projects:

  • ExcelWebAddIn1
    This is the manifest project containing the XML add-in configuration/settings
  • ExcelWebAddIn1Web
    This is the project which has all code defining the add-in & its interaction with Office document. It has JavaScript and HTML files which define the UI of the add-in.

    To provide same look and feel in the add-in as Office 365 clients, it uses Office UI Fabric JavaScript. I will cover more on Office UI Fabric JS in separate article later.

Let’s now run the project to see it working. Press F5, VS will build the solution and launch Excel to make your add-in available inside it.

In Excel, “Show Taskpane” button will be focused with a tool tip message,

Office Development

Click on the “Show Taskpane” button. The task pane area will be loaded on the right side of Excel worksheet.

Office Development

Please note that when you created a new Excel add-in project, VS 2017 has included some sample code in it. That’s why you see the text and button here. Also, if you note the worksheet has been loaded with some sample data,

Office Development

This sample add-in is for finding and highlighting highest value cell among the selected ones. To see it in action, select the sample data and click on “Highlight” button,

Office Development

The JS code will get executed and highest value cell among the selected cells will be highlighted.

Stop the running project from Visual Studio and let’s now see the code which made it work.

In the Solution Explorer, double click the “Home.html” file.

This is the file which contains all UI elements. The texts and button you saw in Excel add-in are defined here,

Office Development

In the Solution Explorer, double click on home.js file.

This is the file which contains all code to interact with Excel.

Office Development

It sets the button text to “Highlight” and also sets the JS function which should be executed when someone clicks on it, among other things.

The load sample data JS function which populates the worksheet with some random numbers,

Office Development

The code for finding the highest value cell and highlighting it,

Office Development

See how simple it is to get started with Office 365 add-in development? You must give it a try yourself using VS 2017.

The purpose of this article was to make developers aware of Office 365 add-in development using VS 2017 which I have done above. You have to come up with the idea of your add-in to create a real-life Office 365 add-in which adds some value to the Office clients.

That’s it for this article. I will cover more add-in options in next article.

Note: This article was originally published by me on C# corner website here.

Featured image courtesy: C# Corner

Installation Of Visual Studio 2017, A Firsthand Explanation

This article tries to give a firsthand and quick introduction to installing Visual Studio 2017, highlighting some of its new features.

Today, Microsoft has launched Visual Studio 2017, the latest IDE for developing “mostly anything” in the Microsoft platform as well as developing apps and Websites, which target Android, iOS and Linux.

If you have already registered for the Microsoft Visual Studio 2017 launch event, then your mailbox may have an email from Microsoft regarding resources related to VS2017, else you can click here to get started with downloading VS2017.

Moreover, if you download VS2017 by March 14, you will get free 60-day access to Xamarin University, which will help you in a great way to enhance your Xamarin skills.

You can choose to install either community, professional or enterprise editions. This article explains the features of the enterprise edition. If you want to know what’s in the different editions, then you can read more here.

If you want to check the installation requirements, you can read more here.

Once you have clicked on your desired edition, the Browser should prompt you to save the installer file.

Visual Studio 2017

Click Save File button to save this installer file to your download folder.

Also, note that once download starts, your Browser will show a “thank you” page with this message related to “Xamarin University”.

Visual Studio 2017

In this article, we are not going to touch anything related to “Xamarin University” but will concentrate only on VS2017.

Meanwhile your installer file may have been downloaded, click on the file to run it. You will be prompted with the message given below.

Visual Studio 2017

Click Yes to continue. You will be prompted with yet another popup, as shown below.

Visual Studio 2017

Click again to Continue.

This release of Visual Studio will show you a new light weight installation approach, which is quite different from the past versions of IDE.

Clicking on “Continue” in the previous popup will show you the installation launch screen given below.

Visual Studio 2017

This is a new “modular” installation experience, where you can tailor VS to install only the components, as per your needs.

You can maximize the installation screen to see more details.

There are 3 tabs here: “Workloads”, “Individual Components” and “Language packs”.

Workloads

It contains a choice for which type of development work you are going to do with VS2017 e.g. Universal Windows Platform development, Desktop development (with Win Forms, WPF), Web development, Mobile development, Office365 development etc.

If you wish to install a development Workload, you can choose it by clicking on the top right checkbox.

Visual Studio 2017

Individual components

This section contains choices to install some tools, which were previously being installed separately as some “packs”. You can see different versions of .NET Framework here like Azure Cloud Explorer and some other MS Azure related tools like Azure Storage Emulator, Azure Data Lake Tools etc. Some SDKs for Android, Windows 10, Typescript  etc. are also there, where you need to choose the ones in which you are interested in by clicking the checkbox in front of the item.

Visual Studio 2017

Language packs

This section offers some language choices for VS2017. English will be selected by default. Most of you may not need any other language.

Visual Studio 2017
Some more points to be noted here  are given below.

There is no “Select All” feature in this new installation, which I really miss. You must go and manually select the components.

Check the right side of the installation Window and it shows Summary as you go on selecting the features.

Visual Studio 2017

You can expand individual items to see what’s inside that and there are some more choices.

Visual Studio 2017

If you need support of some of these sub-features, you can select them by clicking on the check boxes.

You can change VS2017 location at the bottom of the Window.

Visual Studio 2017

At the bottom-right of the installation Window, you can see the approximate installation size (which changes as per feature selection).

Visual Studio 2017

Once you have explored all 3 tabs and sub-features from the “Summary” section and when you are ready to go, click Install button.

You will be shown the screen, which shows installation progress as VS2017 is getting installed.

Visual Studio 2017
Let the installer do its work. While VS2017 is being installed, go and grab a cup of coffee.

Once the installation finishes, you will be prompted to restart.

Visual Studio 2017
It’s a good idea to restart your PC now, as the installer may have changed many things on your PC. Save your important documents, which may be open, click Restart.

Once restarted, find VS2017 in start menu, or type “Visual Studio 2017” in run prompt. There will not be any shortcut on the desktop.

Once loaded, you will be shown a welcome screen.

Visual Studio 2017

Now, again a prompt is there to choose developer settings and theme.

Visual Studio 2017

Make a selection as per your liking and click Start Visual Studio.

Congratulations.

You have installed Visual Studio 2017.

Visual Studio 2017

If you want to read the release notes for VS2017, click here.

Now, go and install the trial version of VS2017 by yourself, write some code, get your hands dirty!

Check for my next article on some new features in VS2017 here.

Note: This article was published by me on C# Corner website here.

Header Image credit: C# Corner

Visual Studio 2017 New Features

In this article, you will be acquainted with Visual Studio 2017 and its new features

Welcome to another article on VS2017. I’m sure that you have already read my article on installation of VS2017. If not, then read it here.

In this article, I will demonstrate some new features of Visual Studio 2017 IDE, which will help a lot in your day to day development.

Creating new project with VS2017

Open VS2017 and you will be shown a welcome page.

There are two ways to create a new project in VS2017.

You can write the type of project, which you want to create in the textbox below “New Project” header.

You will be shown the type of projects as and when you type in the textbox.

e.g. writing “console”:

When you write WPF:

There is also another way to create a new project. Click More project templates link just below the textbox. You will be shown a familiar dialog box to create new projects.

What’s new in Visual Studio IDE

Let’s start by creating a console Application. I will introduce some of the new features in VS2017.

Improved code navigation

After creating a console Application, go to Solution Explorer and right click on the project to add new class.

Let’s say that we are adding new Customer class given below.


Now, save the Customer.cs file and go to Program.cs.

Write Customer in the Main function, press either Ctrl + T (Control key followed by T key) or Ctrl + , (Control button followed by, key).

On the top right, you will be shown a pop-down dialog, which will help you quickly locate the referenced element. Notice that it will quickly launch the “Customer.cs” file too.

In this way, you can have a look at a referenced class and its properties quickly without the need to open the relevant file in IDE. You can simply press ESC key, the dialog, file and both will close.

“Fuzzy” matching

VS2017 introduces a new feature called “fuzzy matching”, which means when you type a name and even if you misspell it, VS2017 will show you the results, which are based on fuzzy match.

To experience it, let’s go to Program.cs -> Main method again.

Type “Cstomer” and see.

VS2017 will automatically suggest you “Customer” class and highlights it for you


Changes in References window

Write the line given below in Main method.

 

  1. Customer cust = new Customer();

 

Now, place the mouse cursor on “Custmer” word, press “Shift” + “F12” keys.

You will be shown a new “references” Window, which has been modified compared to “Find Symbol Results” Window in VS2015.

Notice in the “references” Window, there are many new things here like Filtering (on left side), Group by, Search, “Keep Results” button, Sorting and Colorization.

Let’s see each of them one by one.

Filtering references

In VS2015, when you find all the references on a class or property, you will be shown all the referenced results with no option to filter them. Now, in VS2017, you have filtering option in references Window.

See on the left side that there is a drop-down and by default Entire Solution is selected.

You can filter the references; based on which area you want to see and VS2017 will only show you the relevant references.

Grouping

With the “Group By” feature, you can change how the references are being displayed. It provides you the options given below, which helps you in quickly navigating to the reference; you are looking for,

Let’s say you select “Definition, Project then Path” option and you will see the references group, as shown below.



Search

On the top right section of “references” Window, you can search inside the “references” results.

Keep results

This is a new interesting feature. Remember in VS2015 when you are already looking at one references result and you want to find another class or property reference too. If you search in another class reference, your previous result will be overwritten. You can see only one reference result at a time.

If you press “Keep Results” button on the references Window and you search for another term, then your original result will be preserved and you will be shown references in a new Window.

Let’s say that you create a new “Order” class and reference it from Main method.

Press “Keep Results” button on the references Window of customer results, go to Order class and press Shift + F12. You will be shown references in another Window.

At the bottom of the Window, you will be able to find a tab for “Customer” references too.

Sorting

You can now click on the results column headers like Code, File, Line, Col and Project to have your references result sorted by these columns, which were missing in VS2015.

Colorization

Notice the references are displayed in different colors to help you in clear understanding of the references.

Structure Guide Lines

A dotted vertical line now runs between the curly braces to identify scope. If you mouse over the dotted line, then you will be shown the current scope.


Code Refactoring enhancements

VS2017 has improved refactoring a lot to make the code more readable.

Let’s consider some new improvements.

Object initialization

If you have written the code step by step to assign the values to an object’s property, VS2017 refactoring will now suggest you to use an object initialization.

Write the code given below in Main method.

Now, place your mouse cursor on Customer and press Cltr + . (Control key followed by .)

VS2017 will give you a message “Object initialization can be simplified”.

Click on the suggestion and your code will be modified, as shown below.


Also, there are some more such enhanced features, which you can try yourself:

Inline Out variable.

Simplify null checks.

Add missing case(s) to a Switch statement.

And much more

There are many more new features of VS2017 but for the scope of this article, I will restrict to above five only.

Go and install Visual Studio 2017 on your PC to find out more by yourself.

Happy coding!!!

Note: This article was published by me on C# Corner website here.

Header Image credit: C# Corner

Office 365 Development With Visual Studio 2017

In this article, I will explain how one can develop for Office 365 using Visual Studio 2017.

Microsoft launched Visual Studio 2017 earlier in March this year, which is the latest IDE to develop apps and Websites and mostly anything on the Microsoft platform. I had written a complete article on how to do installation of VS2017 here and an article about its new features here. If you are new to VS2017 and haven’t tried it yet, then I suggest you  read both of my articles too.

In this article, I will write about Office 365 development with Visual Studio 2017. For brevity, I will not touch VS2017 installation in much detail, which I did in my other article. The core of this article is Office 365 development and how you can utilize powerful tools in VS2017 for all the types of Office development.

This article is a part of multiple articles series, which I plan to write on Office 365 development. Some more articles will be published here in the future.

Following are the objectives of this article,

  • How to get started with Visual Studio 2017.
  • Office 365 options while installing VS2017.
  • Introduction to Office 365 tools in VS2017.

Thus, let’s start with the installation of Visual Studio 2017.

To download VS2017, go to the Website https://www.visualstudio.com under Download Visual Studio link, choose Professional 2017, as shown below.

Visual Studio
Image source: Microsoft

Once you click on the link “Professional 2017”, it will ask you to save the installer file, click “Save”, as shown below.

Visual Studio

You will be shown a confirmation dialog. Click Yes, as shown below.

Visual Studio

Once again, the installer will ask for your confirmation. Click Continue, as shown below.

Visual Studio

Allow the installer some time to configure. After a minute or so, it will show you the screen given below, which is the new improved modularized Visual Studio 2017 installer screen.

Visual Studio

Our focus here is the Office development section, so scroll down and you will notice a checkbox area named Office/SharePoint development. Select the checkbox and you will be shown the description on right side, as shown below.

Visual Studio

This will install Office Developer Tools for Visual Studio as a default choice.

Remember that Visual Studio Tools for Office (VSTO) is optional, so don’t forget to select the checkbox for it (in Summary section on right side of Installation Window), as shown below.

Visual Studio

Alternatively, the same options can be found in Individual Components tab of Installation Window under Development activities section, as shown below.

Visual Studio

Click Install on bottom right side to continue the installation. The installer will show the progress of the installation as and when its being made.

Relax and have a cup of coffee and let the installer do the work.

Let’s also see what is the difference between Visual Studio Tools for Office (VSTO) and Office Developer Tools for Visual Studio.

Visual Studio Tools for Office (VSTO)

It was launched earlier as bridge between Office and the Studio (as claimed by Microsoft) around the start of the year 2004, targeting Office 2003 development at that time.

Visual Studio

image credit: internet source

Originally, it was launched as a replacement for VBA (Visual Basic for Applications) for working with Excel and Word, but later numerous advances and enhancements were added to it in the later versions. VSTO provides developers the tools to build on top of Office as a platform, using which you can develop add-ins for Word, Excel etc. in C#/VB.NET.

Office Developer Tools for Visual Studio

These tools were launched to provide Microsoft developers; the latest Office development features in Visual Studio. You can use Office developer tools for the following.

  • Create Office add-ins (these add-ins have a small footprint compared to VSTO add-ins).
  • Integrate Office 365 APIs into your projects.
  • Create SharePoint add-ins.

Back to VS2017 now

Check Visual Studio installer now. It may have finished the installation, which you can know from its success message. If the installation is done, you can directly open VS2017 from the installer Window or go to run prompt and type Visual Studio 2017.

Once VS2017 opens, click Create new project link to create a new project.

Visual Studio

Once the New Project Window opens inside VS2017, click Office/SharePoint node, as shown below.

Visual Studio

It gives you 3 types of new project templates, as described below.

  • If you click on Add-ins link, you will be shown the options given below.Visual Studio

You can create Word, Excel, Outlook, PowerPoint and SharePoint add-ins with this selection.

  • If you click VSTO Add-ins link, you will be shown the options given belowVisual Studio

In addition to Word, Excel, Outlook, PowerPoint add-ins, with VSTO; you can also create add-ins for Visio, Project and InfoPath. Please note that SharePoint add-ins cannot be created, using VSTO.

  • If you click SharePoint Solutions link, you will be shown the options given below.Visual Studio

You can create different types of SharePoint solutions for SP2016 and SP2013.

For the scope of this article, I covered till New Project Window in VS2017 only. What happens when you create new projects of any of these types as well as how to do the actual coding for Office development will be covered in my future posts.

Happy learning!!!

 

Note: This article was published by me on C# Corner website here.

Header Image Source: C# Corner