Creating a tab application within Angular

Mimetis commented 6 years ago

Hi Team !

I try to create a tab application for Microsoft Teams.
Actually, I successfully create a config page, but I don't know why, no Javascript component is actually done.

For instance, here is my ConfigComponent class:

export class ConfigComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log('ngOnInit');
    // initialize teams
    microsoftTeams.initialize();
    // get context
    microsoftTeams.getContext((context: microsoftTeams.Context) => {
      console.log('getContext');
      this.setValidityState(true);
    });

    microsoftTeams.settings.registerOnSaveHandler((saveEvent: microsoftTeams.settings.SaveEvent) => {
      // Calculate host dynamically to enable local debugging
      let host = "https://" + window.location.host;

      microsoftTeams.settings.setSettings({
        contentUrl: host + "/home",
        suggestedDisplayName: "NgTab",
        removeUrl: host + "/remove",
        entityId: "1"
      });

      saveEvent.notifySuccess();
    });

  }

  public setValidityState(val: boolean) {
    microsoftTeams.settings.setValidityState(val);
  }

}

During the initialization step (when I add the tab, the config webpage is called) but Nothing happens:

As you can see, I don't have anything in the Console, on the right of the screen (I used the AllWebContents Dev Tools from the MS Teams menu)

Actually, I should have, at least, Something like that (when I test in a classic web browser)

For informations, my angular application is composed by:

An Angular 5 application, generated with Angular CLI
An Express server, configured with a local trusted HTTPS certificates

Any idea ?

billbliss commented 6 years ago

Do you see anything in the console when you load https://localhost:3978/config in an iframe? Trying to narrow it down between Teams or Angular script initialization.

Mimetis commented 6 years ago

Hi @billbliss Too be able to test an angular app IN an IFrame, I've create two applications:

An Express server with an Iframe running on https://localhost:3980
An Express server with my NG 5 app running on https://localhost:3978

Express server with an IFrame

My express application run on https://localhost:3980 and contains an IFrame pointing to my NG5 application https://localhost:3978/Config.

I've Observed the MS Teams code, then I took an approximative code to create my Iframe:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0rem;
            overflow: hidden;
        }

        .extension-tab {
            height: 100%;
            display: flex;
            flex: 1;
            flex-direction: column;
            position: relative;
        }

        .extension-tab .extension-tab-frame {
            border: 0;
            flex: 1;
            flex-direction: column;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="extension-tab">
        <iframe id="extension-tab-frame" class="extension-tab-frame" name="extension-tab-frame" src="https://localhost:3978/config"
            frameborder="0" sandbox="allow-forms allow-modals allow-popups allow-pointer-lock allow-scripts allow-same-origin"
            allowfullscreen>
        </iframe>
    </div>
</body>

</html>

Nothing really fancy here, just a simple express application

Express application with NG5

The application is still the same:

An Angular application
An Express server, serving my index.html page ;)

To be able to make it works, I've disable the headers res.setHeader("Content-Security-Policy", "frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com");

Test

Eventually, the application is working as expected. The console is logging everyhting from my Config Component

Indeed, we can see that the Angular bundle is loaded:

Actually, the problem I see (not sure it's THE problem ;) ) is I don't see any localhost script loaded in the debugger Sources tab:

If you have any idea ?

Mimetis commented 6 years ago

Okay, we can see both dev Tools for MS Teams and the Tab application. So fine, I finally manage to see the console from my application.

The problem is that I called the settings.setValidityState(true) method, but Nothing happens.

The question is : Why ? First of all, can you confirm we can working on localhost, on https ?

Mimetis commented 6 years ago

Using ngrok seems to resolve the problem.
Eventually, can you confirm that we can't work on localhost (even on https) to develop a Tab Ms Teams application ?

It's a little bit complicated, to setup a correct environment, to be able to start coding, isn't it ?

billbliss commented 6 years ago

It didn't occur to me that you weren't using ngrok -- I should have thought of that. Yes, it is complex, but as an application running in the cloud, Teams has to be able to reach the configuration endpoint (Teams has to call you, right?). We discuss that here: https://docs.microsoft.com/en-us/microsoftteams/platform/resources/general/debug.

We've considered a WebSockets-based polling approach for development scenarios (something that would poll periodically and establish a connection on demand) but that still would require some kind of tool that you didn't know about.

Is your settings.setValidityState(true) code working now?

Mimetis commented 6 years ago

Yep, it's working as expected.
The problem, in my opinion, is that the default configuration to be able to work & debug on a local dev machine is a little bit complicated and tricky.

Seb

billbliss commented 6 years ago

I agree with you. Will look for ways to simplify things.

OfficeDev / microsoft-teams-library-js