Wednesday, 20 March 2013

SharePoint 2013 App Google Drive Import Walk-through Part III


More innovated Version
The beta version was meant to test the potential of the SharePoint hosted apps, which is great potential but because of the first version require the user to setup his own Google Drive API using API Console, I decided to move to the Provider Hosted application.

Deploying the same solution as a windows azure website will remove the headache required to set up the app for single deployment.
Adding the ribbon button & Utilize the provider hosted application
The new version of the application also enables the user to import Google drive files to any document library by adding new ribbon button called “Google Drive Import” under the files ribbon group.

when the user clicks the import from Google Drive button a SharePoint dialog will open and Import.aspx page will be opened with the appropriate parameters needed like 


Steps
   1.Follow the same steps to create the initial version of the application mentioned in my previous blog post , just select the Provider hosted type instead of the SharePoint hosted app



2.After selecting the provider hosted option two different projects will be added to your solution , one of them is the SharePoint app project and the other is Web Application

3.Utilizing the same code in the first version in Import.aspx
    
    4.Adding Server Side Static method to do the import using the SharePoint client context



Simply this Static method will be called from JavaScript action on the Import.aspx page once the user clicks import




The AddFileToLibrary function is an asynchronous function you need to add call back functions as well



When the User clicks the close button the dialog will be closed and the parent page will be refreshed to display the newly added document a single line of JavaScript code is used to facilitate this behavior 


 5.     To create the ribbon button simply right click the SharePoint app project and click add new item Select the ribbon custom action and name it “GoogleDriveImportRibbon”

The elements.xml file of the custom action will be as below, note that I add listId to the standard token to be able to upload the selected files to the appropriate document library



Also you need to specify the ribbon button image which points somewhere in the ~remoteAppUrl which represents the remote Windows Azure website URL


6.In order to publish your app you need to create Client ID go to http://sellerdashboard.microsoft.com

after successful login click on client ids and select add new oauth client id 

Clicking add new oauth client id opens  the form below




 Just add friendly name and app domain and redirect URL then press generate, for the googledriveImport the Client ID is as below


In order to publish your application you need to keep
·        Client id
·        Client secret 
7.Create publishing profile for the Google Drive Import website , the easiest way to publish the site is to use Windows azure website
a.      Register for a free 3 month trail azure evaluation plan.
b.     Create your new website and select your domain name in my case it was
googledriveimport.azurewebsites.net




c.      After creating the website on windows azure platform , download the publishing profile.



d.      Use the downloaded publishing profile to publish your application by importing the profile as below 


e.      Right click the SharePoint 2013 application project and select publish  select the publishing profile you just imported 



f.      Enter the website URL and the client ID and client secret from the seller dashboard step.


follow the wizard and set back for couple of minutes your azure website and SharePoint application will be published 

Test your application by uploading it to your developer site then publish it to the app store 




























Related Articles

0 comments:

Post a Comment