How to Create a Content App For Excel Using Visual Studio 2012

We can create the content application for Excel 2013 using Visual Studio 2012. In it we can write the data in the cell of the excel sheet and also can read the selected data from the cell and can show it in the task pane of the Excel sheet. in it we will create the two buttons one for read operation and one for write operation. When we will click on write button it will write the data in the cell and when we will click on the read button it will read the data of the selected cell.

Let's have a look at the following steps:

  1. First start Visual Studio 2012 RC.
     
  2. Now click on File menu and choose  the New project.
     
  3. A New Project Dialog box opens like this.

    vs12.jpg
     
  4. In this just expand the Visual C# and under it just expand the Office/SharePoint.

    vs3.jpg
     
  5. Now select the Apps option from it and select the App for Office 2013 in the center pane.

    vs4.jpg
     
  6. Now give the name to the application and click on ok button.

    vs5.jpg
     
  7. The Create App for office dialog box will display. In it by default the Task pane app option is selected; just click the Finish button.

    vs6.jpg
     
  8. Now Visual Studio creates the project and it will be displayed in Solution Explorer.

    vs7.jpg
     
  9. Now develop the application and to design the appearance of the app we will add HTML code in the default page of the project.

    vs8.jpg
     
  10. In it just remove the HTML code under the body tag and replace it with the following code to add the read and write button in the task pane:

    <!DOCTYPE html>

    <
    html>
     
    <head>
       
    <meta charset="UTF-8" />
       
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
       
    <title>myofficeapp</title>

       
    <link rel="stylesheet" type="text/css" href="../Content/Office.css" />
       
    <link rel="stylesheet" type="text/css" href="../Content/App.css" />

       
    <script src="../Scripts/jquery-1.6.2.js"></script>
       
    <script src="../Scripts/Office/MicrosoftAjax.js"></script>
       
    <script src="../Scripts/Office/Office.js"></script>

       
    <!-- Add your JavaScript to the following file -->
       
    <script src="../Scripts/myofficeapp.js"></script>
     
    </head>
     
    <body>
      
    <button onclick="writeData()"> Write Content </button><br/>
       
    <button onclick="readData()"> Read Selected Content </button><br/>
       
    <span>Outputs: </span><div id="outputs"></div>
     
    </body>
    </
    html>

  11. Now to handle the button click events we will write a function to read and write the data. Just expand the Scripts option in the Solution Explorer window, as in:

    myofficeapp4.jpg
     
  12. Now click on the Office folder and under it just open the myofficeapp.js to show the default JavaScript file for the application; see:

    myofficeapp5.jpg
     
  13. Now add the following functions to the myofficeapp.js file like this:

    // Add any initialization logic to this function.

    Office.initialize = function (reason) {

     

        // Checks for the DOM to load.

        $(document).ready(function () {

            $("#getDatabtn").click(function () { getData("selectedData"); });

     

            // Checks if setSelectedDataAsync is supported and adds appropriate click handler

            if (Office.context.document.setSelectedDataAsync) {

                $("#setDatabtn").click(function () { setData("Sample data"); });

            }

            else {

                $("#setDatabtn").remove();

            }

        });

    }

     

    // Writes data to current selection.

    function setData(dataToInsert) {

        Office.context.document.setSelectedDataAsync(dataToInsert);

    }

     

    // Reads data from current selection.

    function getData(elementIdToUpdate) {

        Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,

        function (result) {

            if (result.status == "succeeded") {

                document.getElementById(elementIdToUpdate).value = result.value;

            }

        });

    }

    function writeToPage(text) {

        document.getElementById('outputs').innerText = text;

    }

    function bindData() {

        Office.context.document.bindings.addFromSelectionAsync("matrix", { id: 'bindingdata' },

            function (asyncResult) {

                if (asyncResult.status === "failed") {

                    writeToPage('Error: ' + asyncResult.error.message);

                } else {

                    writeToPage('Added binding with type: ' + asyncResult.value.type + ' and id: ' +

                        asyncResult.value.id);

                }

            });

    }

    function readBoundData() {

        Office.select("bindings#bindingdata").getDataAsync({ coercionType: "matrix" },

            function (asyncResult) {

                if (asyncResult.status == "failed") {

                    writeToPage('Error: ' + asyncResult.error.message);

                } else {

                    writeToPage('Selected data: ' + asyncResult.value);

                }

            });

    }

    function addEvent() {

        Office.select("bindings#bindingdata").addHandlerAsync("bindingDataChanged", myHandler, function (asyncResult) {

            if (asyncResult.status == "failed") {

                writeToPage('Error: ' + asyncResult.error.message);

            } else {

                writeToPage('Added event handler');

            }

        });

    }

    function myHandler(eventArgs) {

        eventArgs.binding.getDataAsync({ coerciontype: "matrix" }, function (asyncResult) {

     

            if (asyncResult.status == "failed") {

                writeToPage('Error: ' + asyncResult.error.message);

            } else {

                writeToPage('Bound data: ' + asyncResult.value);

            }

        });

    }


    In this the code in the writecontent() function will call the document.setSelectedDataAsync function in order to write "Good morning world!!!!!" to the current cell when we will choose the Write
    Content button. In his most of the functions are Asynchronous that's why their name ends with "Async".
     
  14. Now either press the F5 key, or in the Debug menu just select the "Start Debugging" command, as in:

    vs10.jpg
     
  15. Then the following output window will appear:

    myofficeapp1.jpg
     
  16. In this when you will click on the "Write Content" button then it will write the "Good morning world!!!" in the current cell like this:

    myofficeapp2.jpg
     
  17. Now just leave the content selected and just click the "Read Selected Content" button; the output will be like this:

    myofficeapp3.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all