Post
Ask Question

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

Before getting into the details of this article, make sure you have already followed my earlier steps from the following article:

Charting within Outlook Add-In

Since I am a big fan of dashboards and charts, I would like to have them integrated as Outlook add-ins. Just to show how we can add other components in default add-in, I will be using Chart.js charting component using the below steps:

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

BasicOutlookAddIn

Step 2: Now we are going to add a CDN path for our Chart.js in home.html file. Open home.html and copy paste the following code into <head> section of the page.

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" type="text/javascript"></script>  
The code in <head> tag should look like as below:

code

Step 3: Now to render our chart within html, locate tag and remove its existing tags within it. Now use the following code lines and copy paste inside tag <div class="padding"> home.html.
  1. <p><strong>Data Analysis</strong></p>  
  2. <canvas id="myChart" width="100" height="100"></canvas>  
Now your code should be like as below,

chart.js

Step 4: Now to generate and bind the data to our chart, use the following function and call it inside office initialization function in our 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.         displayChart();  
  8.     });  
  9. };  
  10. // Displays chart with static data  
  11. function displayChart()  
  12. {  
  13.     var data = [  
  14.     {  
  15.         value: 300,  
  16.         color: "#F7464A",  
  17.         highlight: "#FF5A5E",  
  18.         label: "Draft"  
  19.     },  
  20.     {  
  21.         value: 50,  
  22.         color: "#46BFBD",  
  23.         highlight: "#5AD3D1",  
  24.         label: "Completed"  
  25.     },  
  26.     {  
  27.         value: 100,  
  28.         color: "#FDB45C",  
  29.         highlight: "#FFC870",  
  30.         label: "In-Profress"  
  31.     }]  
  32.     var ctx = document.getElementById("myChart").getContext("2d");  
  33.     var myNewChart = new Chart(ctx).Doughnut(data,  
  34.     {  
  35.         animateScale: true  
  36.     });  
  37. }  
I will be displaying a donut chart, so the above snippet for chart.js will render the donut chart for us.

Run the project

Home.js should now look like this,

Step 5: Run the project so as to deploy these changes to Outlook add-in

Run

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

run app

This way we can integrate the charting components and also bring the context to our data. This way we can offer a unified experience to our users while they are working on emails.

In the next article, we will focus on calling REST APIs from our Outlook add-in.
 
Read more articles on SharePoint:

 


Similar Articles