Home.html

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


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>


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