How to use Microsoft Graph Provider in Visual Studio Connected Services

In this article, I am introducing the newly added Microsoft Graph Provider in Visual Studio 15.3.1. This article demonstrates how a developer can use this feature to work with Microsoft Graph API.

If you don’t know anything about Microsoft Graph API, then I suggest you read something about it here.

To make this article meaningful, I am explaining it using a new Excel add-in project. There is no coding involved though.

Prerequisites:

There are some prerequisites if you want to follow the exercise I have shown in this article. If you just want to read and don’t want to follow any steps by yourself, then please jump to Let’s Start section in this article.

  • Visual Studio 15.3.1 with Office Development Tools

On August 18, 2017, Microsoft has released Visual Studio 2017 version 15.3.1. For more on this release see release notes here.

This article assumes that you have already installed Visual Studio 15.3.1, if not then you can download it here.

For more specific content on how to install Visual Studio, please read my article here.

You will also need to have Office Development tools installed while you install Visual Studio. Please read my article on that here.

  • Office 365 Developer account

You may have access to Office 365 thru your corporate account provided by your employer. But it is strongly advised that you don’t use that account. Instead of that, get an Office 365 developer account here for free and enjoy 365 days of Office 365!

For more info on that, please read my article on Office 365 developer program here.

Before moving further, let’s make sure that you are using the correct version of Visual Studio for following instructions in this article, otherwise it will not work. Multiple versions of Visual Studio can be installed side by side, including preview version, so it’s necessary to make sure of correct version you are working with.

In Visual Studio, Open the menu Help -> About Visual Studio:

About Visual Studio

Please make sure 15.3.1 is the version of your visual studio:

VS version

If that’s the version of your Visual Studio, then let’s start.

 

Let’s Start

Open Visual Studio 15.3.1 and click on “Create New Project…”

In the “New Project” window, Select “Visual C#“ -> “Office/SharePoint” -> “Add-ins” -> “Excel Web Add-in”:

new project

Click on “Ok” to create a new project.

In the next window that appears, select the option “Insert content into Excel spreadsheets”, then click “Next”

office addin 1.png

Select “Basic Add-in”, then click “Finish”

office addin 2

Visual Studio will create a new Excel add-in project for you.

Once Visual Studio is ready, open Solution Explorer, find “Connected Services” under your project and double click on it:

connected services 1

You will see the following screen:

connected services 2.png

Click on “Access Office 365 Services with Microsoft Graph” which is the core of this article.

You will be shown a window to configure access to your Office 365 services:

connected services 3

If you have your Office 365 developer account, then enter the domain name you selected in the “Domain” textbox. Don’t forget to add “.onmicrosoft.com” too.

connected services 4

I have entered my developer account domain, but masked it for security.

If that was the correct domain you entered, the you will be shown a sign-in window where you will enter the details you used while registering for Office 365 developer account.

connected services 5

If your login information is correct, you will be shown “Configure Application” section:

connected services 6

Let it be “Create a new Azure AD application”, and click “Next”.

Now the wizard will ask you for permission to different Office 365 sections. It’s up to you what permissions you want to assign. You can change it later.

connected services 7

Following are the permissions I selected under “User” tab:

connected services 8

Similarly, I also selected some permissions in other tabs.

Once you are done selecting permissions, then click “Finish”:

connected services 9

It will take some time for Visual Studio to configure the access. Meanwhile you will see a window like below:

connected services 10

Once Visual Studio is done with configuring access to Office 365, that window will close automatically. If there was any error, it will be reported to you. Otherwise you will see success message in output window:

output window

Also, if you note – under “Connected Services” in Visual Studio, Office 365 Services will have a green tick mark:

green mark

There is also something more which happened.

Go to Solution Explorer. Do you see under “Connected Services” a new folder of “Office365” has been added?

solution explorer

Those two files under Office365 folder are not too important programmatically. One is a link to Microsoft Graph documentation, another is a JSON file with link to getting started documents. But we will leave those untouched as of now.

Open the Web.config file and see what’s changed here. You will see under the appSettings tag, Visual Studio has added some configuration details:

config details

You will see client id, client secret, tenant id and domain are automatically inserted in this file based on the information you provided while configuring access to Office 365.

Visual Studio also created an application under Microsoft Azure Application Registration for you.

To check that, login to portal.azure.com with the same account as you used for configuring access to Office 365 above.

Once logged-in to Azure, under search type “app reg”:

app reg 1

Click on “App registrations” link.

Under “app Registrations” you will see an app with the same name as your project in Visual Studio:

app reg 12

The GUID under application id is what you will see in your web.config file. You will not see the client secret anywhere though.

Also, if you note under package manager, Visual Studio has already added references to MS Graph SDK:

nuget

See how easy it has been made by Visual Studio now to kick start your Office 365 development using Microsoft Graph?

This article’s purpose was only to make developers aware of the addition of Microsoft Graph under connected services in Visual Studio. I will cover the actual code to be written in a project to call Microsoft Graph API in another article some time later.

Meanwhile if you want to see by yourself how you can call Microsoft Graph using Visual Studio, please go to this link.

For my more articles on Microsoft Graph, please visit here. Please also visit my home page nilesh.live for list of all my blogs.

Header image courtesy: Microsoft

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