Connect Salesforce with Microsoft office

So, I was looking through the Microsoft store where i saw Salesforce App for Outlook, which got me curious about what else can be done through the office add ins.

So below is just a demo app I developed for exporting opportunity records in Salesforce to Microsoft Excel.

Addin 1

Step 1:

Go to Napa cloud app (you can use Visual Studio too for this but Napa being an in browser IDE is easier to use) and login through your Microsoft email id (if you don’t have one create one) , and select Content Add-in for Office , give a meaningful name to your project and then click create

Step 2:

You will notice three files (home.js, home.html , home.css) already present in your project directory with some sample code written in it.

First we will add some styling to our page so go ahead and open home.css and paste the below code there

[sourcecode language=”css”]
/* Page-specific styling */
.option {
padding: 6px;
border-top: 1px dotted #CCC;
cursor: pointer;
}

.option:last-child {
border-bottom: 1px dotted #CCC;
}

.option:hover {
background-color: #DFEEF9;
}

.option.active {
background-color: #BFDDF2
}

[/sourcecode]

Step 3:

Now we will look into the layout of the page ,open home.html and locate <div class=”padding”> element in it , delete everything present in it and then paste the below code

[sourcecode language=”html”]
<p>Please select the opportunity stage(s) you want to export:</p>
<div>
<div class=”option”>Prospecting</div>
<div class=”option”>Qualification</div>
<div class=”option”>Needs Analysis</div>
<div class=”option”>Value Proposition</div>
<div class=”option”>Id. Decision Makers</div>
<div class=”option”>Perception Analysis</div>
<div class=”option”>Proposal/Price Quote</div>
<div class=”option”>Negotiation/Review</div>
<div class=”option”>Closed Won</div>
<div class=”option”>Closed Lost</div>
</div>
<br/>
<button id=”btnExport”>Export to Excel</button>
[/sourcecode]

And after doing that add a script reference just after office.js script reference

[sourcecode language=”javascript”]
<script src=”https://o365workshop.azurewebsites.net/scripts/sfproxy.js” type=”text/javascript”></script>
[/sourcecode]