Task Panes - Creating


You can right click on the task pane to refresh the page


Create the Solution

Open Visual Studio
File > New > Project
Templates > Visual C# > Office > Office Add-ins
Change the Project Name to My-Excel-Add-in
Select "Task Pane" for your add-in type
Select "Excel" as the only host application
SS - solution explorer
The first project contains your manifest file
The second project contains all the files that make up the actual add-in


Editing the Manifest

Double click on the first project to show the Manifest Designer.


Checking the Properties

The [[Properties Window]] also displays important information.


Loading the Task Pane

You can launch the add-in in several ways:
Debug > Start Debugging, Pressing Start on the toolbar or pressing F5
You can stop debugging in several ways:
Debug > Stop Debugging or Pressing Stop on the toolbar


Removing the Existing Style

Remove the Content and Images folders


Home.html
Remove the reference to /Content/Office.css
Remove everything inside the body tags
The file should contain:
SS - whats left


Home.js
Remove the getDataFromSelection function
Remove the call to app.initialize
The file should contain:
SS - whats left


App.css
Remove everything to leave an empty file
Add the following css styles

code 


Home.html
Add the following HTML inside the body tags

<button id="my-unique-name" class="ms-Button"> 
   <span class="ms-Button-Label">My Button Caption</span>
</button>


Home.js
Add the event handler for this button to the Office.initialize function

Office.initialize = function(reason) { 
   $(document).ready(function() {
      $('#my-unique-name').click(event_onMyButtonClick);
   });
}

function event_onMyButtonClick() {
   console.log('My Button just got clicked');
}


Display the Javascript Console

Quick Launch, type Javascript console




© 2017 Better Solutions Limited. All Rights Reserved. © 2017 Better Solutions Limited

Prev