Sunday, 27 December 2015

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

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 

Wednesday, 16 December 2015

Microsoft Graph: One endpoint to rule them all

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

Tuesday, 27 October 2015

Building Office Add-In Using Office Yo Generator

In this post we will explore how to build an Office Add-in using Office Yo Generator on Mac OS, in the beginning we will make sure that we have all the prerequisites ready. then we will run the add-in using local server and then publish it to an azure web app , let's jump to the walkthrough right away :)

  1. Install NodeJS to have NPM ready 
  2. Install Yomean bower and office generator globally (you might need to switch to your root account to install this globally)
  3. Create a new directory and run Yo Office to start the office generator
  4. Type the name of the Add-In in my case I'm repurposing Outlook2Yammer Outlook Add-in previously published here
  5. Choose Mail Add In
  6. You can choose any technology to use , I will simply use HTML and CSS
  7. Only enable it in the Message compose form
  8. Now all the files has been created for us
  9. Open the folder using Visual studio Code
  10. let' change our Home.html and home.js to add our logic (see previous post here)
  11. To enable deploy to azure website directly I simply followed greg's  great guide here

  12. Let's try our Office-Add-in, simply update the manifest file by adding the icon URL and Support Url, in my case I simply removed them, also make sure that the source location points to the correct local URL
  13. from the app launcher, go to your office365 tenant admin portal choose exchange from the left side menu, then choose Add-ins
  14. Upload your manifest.xml file to the Add-ins
  15. If you go to your outlook and try to compose new message , click on add-ins then click on Outlook2Yammer add-in icon nothing will load as the local server is not running
  16. let's run our local server
  17. now we can see that the add in is working
  18. To publish the add-in to azure web site , let's create a new azure webapp 
  19. from dashboard let's setup deployment from Source Control
  20. Choose Local Git repository
  21. now let's update the Add-in manifest file to point to the azure website instead of the local server
  22. Commit and push the code to the azure local git repository
  23. As we can see in the terminal window, npm and bower packages is been installed as part of the deploy script added by azure-cli node package
  24. Now if we overwrite the manifest file under exchange portal the add-in will work from the azure website link not the local server.

Tuesday, 25 August 2015

Remote Provisioning: Create an HTML List View

In this post I will use the remote provisioning Visual Studio Extension explained in my previous post to create a Custom HTML view. In this demo what I will provision the following artefacts:

  1. Photos Document Library to store the Images
  2. Script library which will host the view JavaScript File
  3. Create a custom HTML view for the photo library which displays the images in a responsive lightbox
The example is just a simple prototype to showcase a new capability of the automated remote provisioning engine.
The steps are very simple:
  1. First Clone the github repo @https://github.com/ministainer/RemoteProvisioningAutomation
  2. Open the Visual Studio Extension Solution.
  3. Build the solution and Install the extension
  4. Create New Visual Studio SharePoint Add-In Project
  5. Right-Click and select "Enable Remote Provisioning"
  6. Go to samples folder copy all the content of the ImageViewer folder to the solution root folder
  7. Add the files to the solution
  8. Change the base Url in the ImageViewer.js file
  9. Deploy the SharePoint app to your Azure site, you need to obtain client Id and secret
  10. Now the Photos list we just created and copied files to it will appear as below


More features will  be added to remote provisioning automation engine soon, stay tuned!

Monday, 3 August 2015

Office365 Remote Provisioning Automation

Automate Remote Provisioning In Office365, a Full Demo on the previous blog post published at http://www.sharepointtweaks.com/2015/05/office365-advanced-remote-provisioning.html

See the demo in action

Tuesday, 30 June 2015

Office365 Addin :Dropbox Import

My old SharePoint Provider hosted app DropboxImport  has been updated , now Dropbox Import add-in can upload large files using the multi-part file upload explained at:
https://github.com/OfficeDev/PnP/tree/master/Samples/Core.LargeFileUpload

See the app in action

Saturday, 27 June 2015

Outlook2Yammer:My First Outlook App

In this post I will walk you guys through my first outlook app, the app functionality is simple. The app displays Yammer groups from your network and you can add them to the message recipient to post a group update from outlook.

let's go straight to the implementation steps:
  1. Open VS and create new project, select apps for office, enter the name of your app
  2. In Choose app type, select Mail and click Next
  3. Check compose form for Email message as our app will use outlook compose message to create a Yammer post to a specific Yammer Group
  4. 2 projects will be created for you the mail app and the we project contains Home html which appears when you choose your app in the compose form.
  5. In the generated home.html replace the generated html with the below HTML , which as you can see is a simple drop down list and a button
  6. Don't forget to add reference to Yammer JS SDK, you might need to create an app to set the data-app-id attribute of  the Yammer script tag, to learn how to create a Yammer App use this link
  7. As you can see from the below screenshot I've added my app, after registering your app you can get the client id value which is used to set the script tag data-app-id attribute

  8. In the generated Home.js file  let's add some javascript code block to 
    1. Ensure user login
    2. Authorize the app to access your Yammer Groups
    3. Retrieve your account's Yammer group list
  9. In the document ready we call a function to ensure login and add groups to the drop down list
  10. When the user clicks the add Yammer group to recipient the Yammer group email address will be added to the To allowing the user to post the message to specific Yammer group within the outlook context

Watch complete demonstration video here, download the sample code from  MSDN here

Happy SharePointing!