Akumina Developer Documentation

Akumina Developer Documentation

  • API
  • Docs
  • Blog

›Headless

Akumina

  • Quickstart

Yo Akumina

  • Yo Akumina
  • Start with Yeoman
  • React
  • Simple template

Widget Builder

  • Widget Builder Structure
  • Akumina Widget Builder
  • Skipping instances
  • Token replacement for widget properties

Widget Development Quickstart

  • Setting up the Project
  • Configuring .env file
  • Configuring - akumina.sitedployer.config.json file
  • Configuring - akumina.config.json file
  • Extras

Widget Info

  • Akumina Widgets Overview
  • Building a New Widget Instance
  • Widget Views
  • Widget Properties
  • Global vs Local widgets (Widget Scoping)
  • Akumina React Widgets
  • Callbacks
  • RenderChildWidgets
  • Vendor Package List

Virtual Page Builder

  • Akumina Virtual Page Builder
  • Using Virtual Page Layouts
  • Creating a Custom Layout

Stream Card Builder

  • Installation
  • Stream Card Builder
  • Custom Cards
  • Activity Comments Config
  • Akumina Activity Stream PUSH Subscription using PowerAutomate to connect to ServiceNow
  • Akumina Activity Stream PUSH Subscription using PowerAutomate to connect to Dynamic 365

Site Deployer

  • Overview
  • Version 6.0
  • List Attribute Deployments
  • NPM Commands
  • SPA Updates and Deploying to multiple sites

Authoring

  • Content Action Event
  • Publish Validation Integration
  • Field Event Integration
  • CK Editor external plugins

Headless

  • Quickstart
  • Headless Teams support
  • Headless Troubleshooting

Modern

  • Overview
  • FAQ
  • Single Page Application
  • Modern Web Part Library
  • Google Analytics for Modern Pages

Site Creator

  • Overview
  • Adding A Custom Site Definition
  • Core Step Classes
  • Custom Site Definition Components
  • Custom Site Definition XML
  • Custom Subsite Definitions
  • Sample Step Code
  • Supported Tokens

Azure DevOps

  • CI/CD using Azure DevOps
  • Setting up a build to deploy a site package
  • Setting up a build to deploy file to App Manager hosted in an app service

Configuration

  • Configuration Context Overview
  • Edit the Redis cache timeout
  • Using a key vault for the client id and client secret

Debugging

  • Debugging in Akumina

Advanced

  • Central Site Collection Support
  • Eventing OOB Digital Workplace Events
  • Working with custom JSX Views
  • Page Indexing

Service Hub

  • Quickstart

Patch Notes

  • Patch Notes

Headless Teams support

Headless: Teams Setup

Overview

This article provides steps to add an Akumina headless website to teams

  • Personal app - Akumina utilizes the "website tab" option - requires app to be configured using the manifest.json below
  • Channel tab - You can add the headless url directly using the Add Website option (no setup required)

Cookie requirements for Headless application

 ====> "CookieSameSiteMode": "None", <==== "MinWorkerThreads": "50",  

Variables to be replaced

tokenvalue
{sptenant}sharepoint tenant {this}.sharepoint.com
{templateurlprefix}configuration of your blob container
{headlessurl}intranet headless url
{appmanagerurl}app manager url
{newguid}generate a new guid https://guidgenerator.com/online-guid-generator.aspx
{clientname}client name to make package unique
{spdeliverysiteurl}https://{sptenant}.sharepoint.com/sites/deliveryurl
{piped_webid_siteid}You can find this in the debugger after navigating to the delivery site and opening the debugger, configurationcontext tab - look for 'RootPipedSiteIdWebId'

Update App Manager CORS Origin

Add the domain of {templateurlprefix} to your App Manager App Settings 'Origin' Setting - dont put the full path, just the top level domain, ie, https://example.blob.core.windows.net

Auth file creation

For each tab you want to include inside the teams app, you will need to create a 'configuration auth file' for each one. If you only want to load your Intranet home page in teams then you only need to create one of these files in your Azure Storage container in the following path /staticfiles/teams.html (note, teams.html is an example, you can create multiples for each tab, teams-news.html, teams-streams.html) - this path needs to match your manifest.json below.

Example teams.html


<!DOCTYPE html>
<html>
<head>
    <script>
        var headlessPageUrl = "https://{headlessurl}"; //you can add the page you want to load as well, ie #/sitepages/mypage.aspx
        var appManagerUrl = "https://{appmanagerurl}";
        var deliverySiteUrl = "{spdeliverysiteurl}";
        var siteIdWebIdPiped = "{piped_webid_siteid}";

        var s = document.createElement('script');
        s.setAttribute('src', 'https://akuminafiles.azureedge.net/products/6.1.0.0/fe/teams/teams.auth.min.js?v=' + Math.floor(Math.random() * 100) + 1);
        document.head.appendChild(s);

    </script>

  
    <title>Teams</title>
</head>
<body>
</body>
</html>


Manifest

The following is an example manifest.json of a Personal App with 3 tabs: Home, News, Streams

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
  "version": "1.0.0",
  "manifestVersion": "1.16",
  "id": "{newguid}",
  "packageName": "{clientname}.com.package.name",
  "name": {
    "short": "Akumina Hive",
    "full": "Akumina Hive!"
  },
  "developer": {
    "name": "Akumina",
    "mpnId": "3829831",
    "websiteUrl": "https://akumina.com",
    "privacyUrl": "https://akumina.com/privacy-policy",
    "termsOfUseUrl": "https://akumina.com/license-agreement"
  },
  "description": {
    "short": "Akumina is the Employee Experience Platform that empowers global enterprises",
    "full": "Akumina offers a customizable, brandable, and multilingual platform that seamlessly integrates with leading enterprise cloud applications, Akumina delivers a contextual, collaborative, and engaging workplace experience to every user on any device."
  },
  "icons": {
    "outline": "outline.png",
    "color": "color.png"
  },
  "accentColor": "#FFFFFF",
  "staticTabs": [
    {
      "entityId": "{newguid}",
      "name": "Home",
      "contentUrl": "https://{templateurlprefix}/staticfiles/teams.html",
      "websiteUrl": "https://{headlessurl}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "{newguid}",
      "name": "News",
      "contentUrl": "https://{templateurlprefix}/staticfiles/teams-news.html",
      "websiteUrl": "https://{headlessurl}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "{newguid}",
      "name": "Streams",
      "contentUrl": "https://{templateurlprefix}/staticfiles/teams-streams.html",
      "websiteUrl": "https://{headlessurl}",
      "scopes": [
        "personal"
      ]
    },
    {
      "entityId": "about",
      "scopes": [
        "personal"
      ]
    }
  ],
  "validDomains": [
    "{headlessurl}",
    "{appmanagerurl}",
    "{sptenant}.sharepoint.com",
    "login.microsoftonline.com",
    "*.login.microsoftonline.com",
    "microsoft.sharepoint.com",
    "microsoft.sharepoint-df.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
  ],
  "webApplicationInfo": {
    "id": "00000003-0000-0ff1-ce00-000000000000",
    "resource": ""
  }
}


← QuickstartHeadless Troubleshooting →
  • Overview
  • Cookie requirements for Headless application
  • Variables to be replaced
  • Update App Manager CORS Origin
  • Auth file creation
  • Manifest
Akumina Developer Documentation
Docs
Akumina Framework 5.0Akumina Widget BuilderAkumina Yeoman GeneratorSite Deployer
Community
Akumina Community Site
More
GitHubStar
Copyright © 2024 Akumina