Office Generator: define office add-in start URL based on build definition.

Office Generator: define office add-in start URL based on build definition.

On Visual studio Code

In this post we will use a gulp-env and gulp-replace node packages to create two different gulp tasks (build-prod and build-dev) these tasks will generate two different manifest files for office add-in each will be suitable for different environment.
The tasks simply replaces a SITE_URL token in the manifest file with the predefined urls in the abovementioned gulp tasks.
In this walk-through we will use the Office-generator created by OfficeDev team to generate a simple outlook add-in, review my previous post for full walk-through of how to use Office generator

In order to use gulp-env and gulp-replace you need to install both modules using npm install as shown below:

after installing the two node packages , open the generated add-in folder using your favorite text editor, in my case I'm using Visual Studio Code

1. let's open gulp.js file which have been generated for us using the office generator 
2. let's define gulp-env and gulp-replace variables
   
3. now create a gulp task to add our web url to environment variables , one for each environment
   
4. open manifest.xml file and replace the generated url (https://localhost:8443) with SITE_URL string
5. create two gulp tasks one for prod build and other for dev build
   
6. now back to the command/termainal window and type
   
7. The manifest.xml file is generated under build folder and it has the production azure url 

Microsoft Graph: One endpoint to rule them all

Microsoft Graph: One endpoint to rule them all

On office365

Recently Microsoft has announced the Office365 unified APIs in its new form "Microsoft Graph" Microsoft Graph currently have two different versions of the APIs v1.0 and BETA version.  Today I will try to walk you through a quick overview and a quick way to try out the new Unified APIs
for more information regarding Microsoft Graph go to https://graph.microsoft.io

By looking at to the OfficeDev github account, you can find many comprehensive examples along with very detailed walk-through. Today I'll focus on the Angular connect @ https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect  The sample has a complete walk-through on how to setup and run the sample here.

What I did is simply forked then cloned the repo then I changed the UI little bit to give the user the ability to try different operations and see how the response will look like.

I've used json-formatter to display the response data in a friendly json format. json formatter can be added using bower command below:

just a minor change to the server.js file to serve assests in bower_components/json-formatter/dist folder

So we can add the Css and JavaScript as below

Now when you run the sample you can try out every single Graph API end point.

*Note: by default the sample is using a mutli-tenant azure AD app but you can create your own app and update the client Id when connecting to Office365 also
make sure that your app permission is allowing the operation you are trying through the console

this sample is available @https://github.com/ministainer/O365-Angular-Microsoft-Graph-Connect