Excel with JavaScript

Open Visual Studio 2019
Create a New Project
Type 'excel' into the search boc
Find "Excel Web Add-in" (with C#) and press Next
Change the Project Name to
Change the Location by clicking on the Browse button
Change the Solution name to
SS
Press Create


The Create Office Add-in wizard will appear
select "Add new functionalities to Excel"
SS
Press Finish


This will create a solution that contains two projects


ExcelWebAddInX Project

This is the Manifest project


ExcelWebAddInXWeb Project

This contains the corresponding HTML pages



Home.html

This html file must call its corresponding javascript file.
This html file must include a reference to Office.js
These functions should use the item.NotificationMessages API to communicate with the user.
These functions should call event.completed
Always include a meta element as a child element of the head element

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

   <script type="text/javascript"
           src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

   <script type="text/javascript"
           src="Scripts/jquery-1.9.1.js"></script>

   <script type="text/javascript"
           src="Scripts/FabricUI/MessageBanner.js"></script>

   <script type="text/javascript"
           src="Home.js"></script>

   <link type="text/css" rel="stylesheet"
         href="Home.css"/>

   <link type="text/css" rel="stylesheet"
         href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css"/>

   <link type="text/css" rel="stylesheet"
         href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css"/>

</head>
<body>
    <div id="content-main">
        <div class="padding">
            <br />
            <div class="ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">Sample</div>
            <br /><br />
            <div class="ms-font-xl ms-fontColor-neutralTertiary">Getting Started</div>
            <p class="ms-font-m-plus ms-fontColor-neutralTertiary" id="template-description"></p>
            <div class="ms-font-m"><a target="_blank" class="ms-Link ms-Link--hero"
            href="https://go.microsoft.com/fwlink/?LinkId=276812">Find more samples online</a></div>
            <br /><br />
            
            <button class="ms-Button ms-Button--primary" id="highlight-button">
                <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
                <span class="ms-Button-label" id="button-text"></span>
                <span class="ms-Button-description" id="button-desc"></span>
            </button>
        </div>
    </div>
    <div class="footer">
        <div class="ms-Grid ms-bgColor-themeSecondary">
            <div class="ms-Grid-row">
                <div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12">
                   <div class="ms-font-xl ms-fontColor-white">Contoso</div></div>
            </div>
        </div>
    </div>

    <div class="ms-MessageBanner" id="notification-popup">
        <div class="ms-MessageBanner-content">
            <div class="ms-MessageBanner-text">
                <div class="ms-MessageBanner-clipper">
                    <div class="ms-font-m-plus ms-fontWeight-semibold" id="notification-header"></div>
                    <div class="ms-font-m ms-fontWeight-semilight" id="notification-body"></div>
                </div>
            </div>
            <button class="ms-MessageBanner-expand" style="display:none">
            <i class="ms-Icon ms-Icon--chevronsDown"></i> </button>
            <div class="ms-MessageBanner-action"&ge</div>
        </div>
        <button class="ms-MessageBanner-close"> <i class="ms-Icon ms-Icon--x"> </i> </button>
    </div>
</body>
</html>

Home.css

This incorporates the app.css file from Visual Studio 2015.



fabric.min.css

appsforoffice.microsoft.com/fabric/2.0.1/fabric.min.css 


fabric.components.min.css

appsforoffice.microsoft.com/fabric/2.0.1/fabric.components.min.css 


Office.css

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


OfficeThemes.css

<link rel="stylesheet" href="../Content/OfficeThemes.css"> 


App.css




Home.js

This is the file you will see in Visual Studio when you create a new Add-ins project.


Applies to: All add-in types
When the API is loaded and ready for the add-in to start interacting with user's content, it triggers the Office.initialize event.
An error will be generated if this event does not exist.
If your add-in includes more than one page, whenever it loads a new page that page must include or call an Office.initialize event handler.
This is run after both Office and your application are fully loaded.
This is put inside a self executing anonymous function.
This javascript file must call Office.Initialize.

( function () { 

   Office.initialize = function (reason) {
      $(document).ready(function() {
   
          // Define your event handlers
         $("button-on-taskpane").click(event_ButtonOnTaskpane);

      } ) ;
   }
   
   function event_ButtonOnTaskpane(event) {
          event.completed();
   }
   
} ) ();




© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext