Outlook with TypeScript

You can use the Yeoman Generator to create an Outlook Add-in project using VS Code with TypeScript
The link above displays these three files:

package.json 
manifest.xml 
webpack.config.json

This page displays all the other files in this project:

src\taskpane\taskpane.html 
src\taskpane\taskpane.ts 
src\taskpane\taskpane.css 
src\commands\commands.html 
src\commands\commands.ts

taskpane.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Contoso Task Pane Add-in</title> 
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script> 

    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/> 

    <link href="taskpane.css" rel="stylesheet" type="text/css" /> 
</head> 
<body class="ms-font-m ms-welcome ms-Fabric"> 
    <header class="ms-welcome__header ms-bgColor-neutralLighter"> 
        <img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" /> 
        <h1 class="ms-font-su">Welcome</h1> 
    </header> 
    <section id="sideload-msg" class="ms-welcome__main"> 
        <h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2> 
    </section> 
    <main id="app-body" class="ms-welcome__main" style="display: none;"> 
        <h2 class="ms-font-xl"> Discover what Office Add-ins can do for you today! </h2> 
        <ul class="ms-List ms-welcome__features"> 
            <li class="ms-ListItem"> 
                <i class="ms-Icon ms-Icon--Ribbon ms-font-xl"></i> 
                <span class="ms-font-m">Achieve more with Office integration</span> 
            </li> 
            <li class="ms-ListItem"> 
                <i class="ms-Icon ms-Icon--Unlock ms-font-xl"></i> 
                <span class="ms-font-m">Unlock features and functionality</span> 
            </li> 
            <li class="ms-ListItem"> 
                <i class="ms-Icon ms-Icon--Design ms-font-xl"></i> 
                <span class="ms-font-m">Create and visualize like a pro</span> 
            </li> 
        </ul> 
        <p class="ms-font-l">Modify the source files, then click <b>Run</b>.</p> 
        <div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl"> 
            <span class="ms-Button-label">Run</span> 
        </div> 
    </main> 
</body> 
</html>

taskpane.ts

Office.onReady((info) => { 
  if (info.host === Office.HostType.Outlook) { 
    document.getElementById("sideload-msg").style.display = "none"; 
    document.getElementById("app-body").style.display = "flex"; 
    document.getElementById("run").onclick = run; 
  } 
}); 

export async function run() { 
// Insert your Outlook code here 
}

taskpane.css


commands.html

<!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.1/hosted/office.js"></script> 
</head> 
<body> 
</body> 
</html>

commands.ts

Office.onReady(() => { 
  // If needed, Office.js is ready to be called 
}); 

function action(event: Office.AddinCommands.Event) { 
  const message: Office.NotificationMessageDetails = { 
    type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage, 
    message: "Performed action.", 
    icon: "Icon.80x80", 
    persistent: true, 
  }; 

  Office.context.mailbox.item.notificationMessages.replaceAsync("action", message); 
  event.completed(); 
} 

function getGlobal() { 
  return typeof self !== "undefined" 
    ? self 
    : typeof window !== "undefined" 
    ? window 
    : typeof global !== "undefined" 
    ? global 
    : undefined; 
} 

const g = getGlobal() as any; 
g.action = action;
© 2023 Better Solutions Limited. All Rights Reserved. © 2023 Better Solutions Limited TopPrevNext