Follow these instructions to create the Akumina Foundation sites in Microsoft Teams as a personal App.

Note: If setting up Microsoft Teams with a headless environment, please refer to the documentation here.

Prerequisites

• Ensure the user id provided has the Microsoft Teams Admin Centre permissions (Teams Administrator)
• Ensure side loading of Apps is enabled on the tenant.
  1. Navigate to https://admin.teams.microsoft.com/policies/manage-apps
  2. Ensure the Org Wide app settings for custom apps is set to ON
• For Teams as a Canvas in Mobile, currently will run in deprecated mode without Azure AD (Azure AD = False) functionality, this includes Graph and Social.
• Teams as a Canvas integration only works with Modern SharePoint sites and pages. Available with AppManager versions 5.0.2011.2321 and 4.8.2007.1324 or later.

Teams App Setup

Customizing the Teams Manifest File

Note: Akumina uses the “Component” option in manfiest, NOT websiteUrl, this allows for richer “single page application” experience.

Sample Manfiest Here:

https://www.dropbox.com/s/3catall5fcpnqlj/manifest.json?dl=0 

• Extract the attached zip file in your local folder
• Edit the manifest.json file in any json editor
• Update the below properties based on your client requirements/details. For further details reference this link: https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema
  • Developer
  • Name
  • Description
• In the StaticTabs section, update the entityID and Name, for the contentURL follow the below syntax:

 

https://{tenant}.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=https://{tenant}.sharepoint.com/sites/{sitecollection}/_layouts/15/teamshostedapp.aspx%3Fsp=home.aspx%26m=virtualmasterpagefoundation.html%26teams%26personal%26componentId=d2aa5f38-852c-4f12-a5ae-af72ca17d182%26forceLocale={locale}

 

sp=  this denotes the starter page that you want to load, could be home.aspx or any other virtual page

m= this denotes the master page that you want to load

 

• In the Zip file update the color png and outline png based on your client logo, reference the guideline here:  https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/apps-package#app-icons
• Zip up the 2 icons and the manifest file and your personal app package is ready.
• Optionally, you can validate the zip file for syntax here:  https://dev.teams.microsoft.com/appvalidation.html

Setting up the Akumina Teams env file

 

Sample digitalworkplace.teams.env.js (Akumina Private Library)

The below can be taken directly from the SPA page settings in Sharepoint:

if ((typeof AkuminaTeamsConfiguration) === 'undefined') {

AkuminaTeamsConfiguration = {

AkuminaFrameworkVersion: "",

AkuminaSiteCollectionURL: "https://{tenant}.sharepoint.com/sites/{sitecollection}",

AkuminaApplicationURL: "https://{appmanagerurl}/",

AkuminaApplicationQueryKey: "{appmanagerquerykey}",

AppManagerSPAppId: "{app manager sharepoint app id}",

EnableAzureAD: true,

MasterPageView: "",

GraphSubscriptionID: "{subscriptionid}",

JSFilesToWaitFor: "",

JSFilesToLoad: "",

CSSFilesToLoad: "",

ImplementationVersion: "1.0",

}

}

Please be aware Teams does HEAVY CACHING, so any changes to JS/widgets/.html files it is best to change the ‘ImplementationVersion’ every time you want to see updates in teams. This will force teams to re-download files.

Uploading the custom App for ME

• Navigate to MS teams desktop/web version.
• In the lower left corner of Teams, choose the Store icon. On the Store page, choose Upload a custom app.
  • Select the “Upload for me or my teams” options first.
  • If the app is packed correctly, you should be able to add and validate the app as a personal app. If you face any errors check the debugging section.

Uploading the custom app for Everyone in the Org

Once the app works successfully for one user, you can upload the same package following below steps:

In the below screen, select “Upload for your Org.”

Teams App Policies

As an admin, you can use app setup policies to setup the Akumina Teams Personal app by default for all your users.

1. In the left navigation of the Microsoft Teams admin center, go to Teams apps > Setup policies
2. Under Installed apps, select Add apps
3. In the Add installed apps pane, search for the Akumina Teams apps you want to automatically install for users when they start Teams. Give a valid app setup policy name
4. Click save

 

Debugging

If you run into issues during the setup validate the following:

1. Ensure the app is packaged correctly, navigate to https://dev.teams.microsoft.com/appvalidation.html

And validate the app package, ensure you see no errors.

2. Ensure the Akumina Teams Env file is setup correctly, refer the above sections for details.
3. Sometimes the only way to figure out what is going on is to use the DevTools. To use DevTools in the desktop client, you must:
   • Ensure you have enabled developer preview.
   • Open up a tab so you have something to inspect with the DevTools.
   • Open the DevTools in one of the following ways:
   • Windows: Select the Teams icon in the desktop tray.
   • MacOS: Select the Teams icon in the Dock.