Akumina Developer Documentation

Akumina Developer Documentation

  • API
  • Docs
  • Blog

›Widget Info

Akumina

  • Quickstart

Modern

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

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

Virtual Page Builder

  • Akumina Virtual Page Builder
  • Using Virtual Page Layouts

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

Yo Akumina

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

Widget Info

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

Site Deployer

  • Overview
  • Version 4.8
  • Version 5.0
  • List Attribute Deployments
  • NPM Commands
  • SPA Updates and Deploying to multiple sites
  • Using site deployer with MFA

Headless

  • Quickstart
  • Headless Troubleshooting

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

Akumina Widgets Overview

Overview

The purpose of this article will be to illustrate and elaborate on some of the different kinds of widgets offered by the Akumina Framework. Some of the information presented will link back to other relevant pages, such as the "Akumina Widget Builder" and the "React Article".

Frameworks

The Akumina Framework currently supports three different frameworks in which to write Widgets. These frameworks are as follows:

  • Vanilla Javascript

  • Typescript targeting ES5 by default

  • ReactJS, targeting versions React V16.7.17 and ReactDOM V16.0.6

The framework can be chosen during the "Yo Akumina" installation process. The EcmaScript and React versions can be changed at will from your tsconfig.json and package.json files respectively.

It is also worth mentioning that you should avoid mixing and matching Javascript Frameworks in the same project. For instance, a project set up to use React will use the React compiler for all widgets currently in the project. While work-arounds can be made, for ease of portability and maintainability, we do not suggest mixing Frameworks.

Basic Widget Examples

Samples of bare-bones widget code can be found on the "AkuminaDev Github". Each subfolder contains an example of a project structure and a sample widget created through the Yeoman Generator. A general overview of each widget in its respective Framework is explained below.

Vanilla Javascript Widgets

An example of a Vanilla Javascript widget can be found "Here".

Widgets created using vanilla Javascript are self-contained. All relevant code to the specifics of the widget, its properties, its functionality, and logic are contained within the widget itself by default.

Typescript Widgets

An example of a Typescript widget can be found "Here". (This is currently in development)

Typescript widgets allow the developer to take full advantage of type-safety and intellisense, as well as more classical OOP paradigms such as easier use of polymorphism, inheritance, etc, by using Typescript targeting ES5 by default. It is worth noting that the Typescript option "use-strict" is defaulted to true.

React Widgets

An example of a React project can be found "Here" and "Here".

Similar to Vanilla Javascript widgets, you'll notice that React widgets are self-contained in a similar way. However, by making use of the React Framework, it is very simple to make widgets more extensible via sub-components. There are more advanced examples included in the repository that are explained more in-depth on the "Akumina React Widgets" page.

Unlike Vanilla Javascript or Typescript widgets, you'll notice that the React widgets do not make use of the view or the Handlebars templating engine. That information is also covered more in-depth on the React page.

← Simple templateBuilding a New Widget Instance →
  • Vanilla Javascript Widgets
  • Typescript Widgets
  • React Widgets
Akumina Developer Documentation
Docs
Akumina Framework 5.0Akumina Widget BuilderAkumina Yeoman GeneratorSite Deployer
Community
Akumina Community Site
More
GitHubStar
Copyright © 2023 Akumina