Add the Teams SDK to a Web Page?

Liberty Create
1

How do I add the Teams SDK to a Web Page in Liberty Create?

I need to use the context to retrieve URL parameters such caseid & taskid.

Something like this…
<script src="https://statics.teams.cdn.office.net/sdk/v1.10.0/js/MicrosoftTeams.min.js"></script>

Thanks, JonathanFS (easthants.gov.uk)

2

Hello There,

I will have a word around the business and see if I can find an answer for you. Thank you for reaching out on the Community Forum.

Regards,

Mark Pearson - AppShare Manager

3

I ended up building a widget and loading the SDK in the frontend when needed.
Sample code below from frontend.js

export default {
	data: function () {
		return { busy: false };   // true while reading Teams context / redirecting
	},
	methods: {
		/* Debug: tick "Debug" in the widget settings, then F12 -> Console */
		dbg: function (msg) {
			if (this.debug) console.info('[TAN redirector] ' + msg);
		},

		/* Goes to the "No redirect: go to" page unless we're already on it (no loop); returns true if it went */
		go_home: function (why) {
			if (!this.home_url) { this.dbg(why + ' - no "No redirect: go to" page set, staying'); return false; }
			let target = new URL(this.home_url, window.location.origin);
			if (target.pathname.replace(/\/+$/, '') == window.location.pathname.replace(/\/+$/, '')) {
				this.dbg(why + ' - already on the "No redirect" page, staying');
				return false;
			}
			this.dbg(why + ' - going to ' + this.home_url);
			this.go(target.pathname + target.search);
			return true;
		},

		/* Navigates; replace() so the browser Back button doesn't land here and redirect again */
		go: function (url) {
			this.busy = true;
			this.dbg('going to ' + url);
			window.location.replace(url);
		},

		/* Loads the TeamsJS SDK once (skipped if already on the page) */
		load_teams_sdk: function () {
			let url = this.teams_sdk_url;
			return new Promise(function (resolve, reject) {
				if (window.microsoftTeams) { resolve(); return; }
				let script = document.createElement('script');
				script.src = url;
				script.onload = resolve;
				script.onerror = function () { reject(new Error('could not load ' + url)); };
				document.head.appendChild(script);
			});
		},

		/* Rejects if a promise takes too long (app.initialize() never resolves outside Teams) */
		with_timeout: function (promise, ms, what) {
			return Promise.race([
				promise,
				new Promise(function (resolve, reject) {
					setTimeout(function () { reject(new Error(what + ' timed out (not in Teams?)')); }, ms);
				})
			]);
		},

		/* Step 2: reads the notification id (subPageId) from the Teams context.
		   - subPageId present -> reload with ?q=<id> (on "Reload to page", or this page)
		   - no subPageId (opened from the app bar / app store) -> "No redirect: go to" page (v1.1)
		   - not in Teams (timeout) -> stay on the page */
		read_teams_context: async function () {
			this.busy = true;
			try {
				await this.load_teams_sdk();
				await this.with_timeout(microsoftTeams.app.initialize(), 4000, 'Teams initialize');
				let context = await this.with_timeout(microsoftTeams.app.getContext(), 4000, 'Teams getContext');
				let sub_page_id = context && context.page ? context.page.subPageId : '';
				this.dbg('Teams context subPageId = ' + JSON.stringify(sub_page_id));

				if (sub_page_id) {
					// keep any existing parameters, add ?q=<TAN id>
					let target = new URL(this.landing_path || window.location.pathname, window.location.origin);
					new URLSearchParams(window.location.search).forEach(function (v, k) { target.searchParams.set(k, v); });
					target.searchParams.set('q', sub_page_id);
					this.go(target.pathname + target.search);
					return;
				}
				// v1.1: opened from the app bar / app store (no deep link) -> "No redirect: go to" page
				if (this.go_home('no subPageId - opened as a plain tab')) return;
			} catch (e) {
				this.dbg('Teams context not available: ' + (e && e.message ? e.message : e));
			}
			this.busy = false;
		}
	},
	mounted: function () {
		let params = new URLSearchParams(window.location.search);
		let stay   = params.get('noredirect') == '1';   // &noredirect=1 = never leave this page

		// 1. Server built a redirect for this notification
		if (this.redirect_url) {
			if (stay) { console.info('[TAN redirector] noredirect=1 - staying here (would go to ' + this.redirect_url + ')'); return; }
			this.go(this.redirect_url);
			return;
		}

		// 2. No notification on the page yet - ask Teams for it (only once: never when ?q= is already there)
		if (!this.has_tan && !params.get('q') && this.teams_context && !stay) {
			this.read_teams_context();
			return;
		}

		// 3. Notification has no redirect - go to the "No redirect" page (unless we're already on it)
		if (this.has_tan && this.fallback_url && !stay) {
			let target = new URL(this.fallback_url, window.location.origin);
			if (target.pathname.replace(/\/+$/, '') != window.location.pathname.replace(/\/+$/, '')) {
				this.dbg('no redirect for this notification - going to ' + this.fallback_url);
				this.go(target.pathname + target.search);
				return;
			}
			this.dbg('already on the "No redirect" page - staying');
		}

		// 4. Just show the link / status
		this.dbg('no redirect' + (this.link_url ? ' - link ' + this.link_url : (this.status ? ' - ' + this.status : '')));
	}
}

Regards
JonathanFS