App Development
Visual Studio creates the project and files and folders related to the Office Development display on the Solution Explorer. The default HTML page is "Home.html" and you can either edit this page or you can add an another HTML page.
Creating a Sample app
Step 1: In the page, you can write anything to display in the task pane of Excel 2013. For Example:
<divid="content-header">
<divclass="padding">
<h1>Welcome Nimit in Office 2013</h1>
</div>
</div>
Step 2: For executing, press F5. This will open Excel 2013:
![WelcomePage-in-Excel2013.jpg]()
Step 3: Stop debugging.
Generating Operations in app
I am creating some operations in my app. For this you can either remove your div and create a new one or leave it and add another. For example:
<divid="content-main">
<divclass="padding">
<p><strong>Getting Started:</strong></p>
<buttononclick="WriteData()"> Write Data </button><br/>
<buttononclick="ReadData()"> Read Data </button><br/>
<span>Results:</span><divid="Result"></div>
</div>
</div>
This will add some buttons in the task pane for performing actions, like Write Data and Read Data.
Writing Data
Step 1: If you want to write some text then you need to add a JavaScript file. You can also add a new JavaScript file. For adding:
![JavaScript-ijn-Office2013.jpg]()
Step 2: Now just write the code as shown in this image:
![SampleJs-in-Office2013.jpg]()
Step 3: Debug the file.
Step 4: Click on "Write Data" to write your text to the current cell. Now if you want to write some other text then don't close the worksheet or stop debugging, otherwise you can close it.
![SampleText-in-Excel2013.jpg]()
Step 5: I am writing some other text. For this go to your JavaScript file without stopping debugging. Replace older text with the new one. For Example:
function WriteData()
{
Office.context.document.setSelectedDataAsync([["I Live in Delhi"], ["Happy Friendship Day"]],function (asyncResult)
{
if (asyncResult.status == "failed")
{
WriteinPage('Error Message:' + asyncResult.error.message);
}
});
}
function WriteinPage(text)
{
document.getElementById('Result').innerText = text;
}
Step 6: Save your application. Open your Excel and Reload your task pane:
![Reload-in-Excel2013.jpg]()
Step 7: Select another cell in the worksheet and click "Write Data":
![NewWrite-in-excel2013.jpg]()
Step 8: Stop debugging.
Performing Read Data
Step 1: Open your JavaScript file and write the following code below the functions you have added previously:
function ReadData()
{
Office.context.document.getSelectedDataAsync("matrix",function (asyncResult)
{
if (asyncResult.status === "failed")
{
WriteinPage('Error: ' + asyncResult.error.message);
}
else
{
WriteinPage('Your Selection: ' + asyncResult.value);
}
});
}
Step 2: Debug your application.
Step 3: Un the Excel, click on "Write Data" to write text. If the text is already selected then click on "Read Data" otherwise select the text.
![ReadingDataStep1-in-office2013.jpg]()
Select the text:
![ReadingDataStep2-in-office2013.jpg]()
Step 4: Stop Debugging.