CODEWITHSUNDEEP
outlook-addinoffice-js
Michael Heuberger
Michael Heuberger

Reputation: 872

How to differentiate UI controls between O365 and Outlook?

How can I define different UI controls and text for the same add-in between Office 365 (online) and Outlook (native on your machine)?

For example on Office 365 online we want the add-in button to be in a new dropdown, on Outlook in a new button group.

How can this be achieved?

Upvotes: 0

Views: 69

Answers (2)

user7823505
user7823505

Reputation:

@Michael Heuberger currently, there's no way to define different UI controls and text (labels) for the same add-in between the Outlook Web App and the native Outlook Desktop client. Kindly submit a feature request to our UserVoice page : https://officespdev.uservoice.com/

Upvotes: 2

Niko
Niko

Reputation: 832

You could have two different views in your Add-in - one for Web and one for desktop. To achieve this define a following jQuery function:

function detectPlatform(platform) {
   if (platform == "OfficeOnline") {
      $('#WebView').removeClass('display-none').addClass('display-block');
      $('#DesktopView').removeClass('display-block').addClass('display-none');
   }
   else {
      $('#DesktopView').removeClass('display-none').addClass('display-block');
      $('#WebView').removeClass('display-block').addClass('display-none');
   }
}

and call it inside $(document).ready of Office.initialize like: detectPlatform(Office.context.platform);

In your HTML you could have 2 div containers with different UI elements:

<div id="WebView">Web UI</div>
<div id="DesktopView">Desktop UI</div>

Obviously you also have to define used CSS classes (display:none and display:block). If you don't want to use jQuery you can achieve the same with pure JS of course.

Upvotes: -1

Related Questions