Post
Ask Question

Office 365 Outlook Add-in Development Using NAPA (Basics) - Part Three

Before getting into the details of this article, make sure you have already followed my earlier steps on Office 365 Outlook Add-in Development using NAPA:

Outlook Add-In and REST API

After charting, now we would like to have the data coming from third party REST APIs in our Outlook add-in. To do this, we will be referring to Google APIs for books. These are public and can be accessed anonymously. Refer to the below URL for this API.

API URL

JSON Output

JSON Output

From the above JSON output, we will be displaying title and description attributes in our Outlook AddIn.

Now refer to the the following steps to achieve this,

Step 1: Open our earlier Outlook Add-in solution BasicOutlookAddIn in Napa explorer,

solution BasicOutlookAddIn

Step 2: Now to render our book details within home.html, locate tag <div class="padding"> and remove existing tags within it. Now use the following code lines and copy paste inside tag <div class="padding"> home.html.

  1. <p><strong>Book Details</strong></p>  
  2. <hr></hr>  
  3. <strong><div id="title"></div></strong>  
  4. <div id="description"></div>  
Now your code should look like the following snippet:,

code

Step 3: Now to call REST API we would be using $.getJSON() function and data would be assigned to our HTML elements from home.html.

Below code can be added to home.js.
  1. // The Office initialize function must be run each time a new page is loaded  
  2. Office.initialize = function (reason)  
  3. {  
  4.     $(document).ready(function ()  
  5.     {  
  6.         app.initialize();  
  7.         displayBookData();  
  8.     });  
  9. };  
  10. // Displays book data from Google Books REST API sample  
  11. function displayBookData()  
  12. {  
  13.     $.getJSON("https://www.googleapis.com/books/v1/volumes?q=isbn:9780670921621", function (data)  
  14.     {  
  15.         $('#title').text(data.items[0].volumeInfo.title);  
  16.         $('#description').text(data.items[0].volumeInfo.description);  
  17.     });  
  18. }  
Home.js should now look like this,

Home.js

Step 4: Run the project so as to deploy these changes to Outlook AddIn.

Run the project

Step 5: Launch outlook web app and locate BasicOutlookAddIn for selected email. Click AddIn link to display book details right into your e-mail pane as below,

BasicOutlookAddIn

The above diagram shows title and description coming from REST API upon launching Outlook AddIn.

This way we can integrate the data coming from REST APIs considering the current context of our email.
 
Read more articles on SharePoint:

 


Similar Articles