Akumina Developer Documentation

Akumina Developer Documentation

  • API
  • Docs
  • Blog

›Widget Development Quickstart

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

Extras

Extras

You may skip this step and start running the npm command and If you see any error related to these folder(s) then add them at the location as shown below Create packages folder In /dist Create CDNAssets folder In build\sitedefinitions\{namespace}

Build, Package and Deploy

Run the following commands In order to deploy the artifacts

npm run build 
npm run package 
npm run cdnpackage 
npm run deploy 

Adding new Widget

Run the following command to add new widget stub

npm run stub 

Complete the walkthrough questions; example values are below: Note: Widget namespace should end with .Widgets (ex., ak.Widgets)

? What's the name of your Widget? helloak627two 
? What's the name of your Widget Namespace? ak.Widgets 
? Which type of stub you want to start with? (more stubs coming soon) Hello World 
? What directory should we generate the folder stub in? src/js/widgets 
? Do you want this stub to be used for an instance only? (used for deploying instances only) No 
? Do you want to use a typescript stub? Yes 

Check-in you file to trigger the build, once build is successful, browse headless site, create page, and insert the new widget

While adding the new REACT widget do verify if widget js file has. tsx extension instead of .ts. This is a build issue I have observed during my demo and will be resolved in future

Edit Existing Widget

Edit the js or html template of existing widget and either deploy the artifacts from developer's workstation or checking the Site package to get the artifact deployed by pipeline

When you add or edit widget do clear the front-end cache from Akumina tray

← Configuring - akumina.config.json fileAkumina Widgets Overview →
  • Extras
  • Build, Package and Deploy
  • Adding new Widget
  • Edit Existing Widget
Akumina Developer Documentation
Docs
Akumina Framework 5.0Akumina Widget BuilderAkumina Yeoman GeneratorSite Deployer
Community
Akumina Community Site
More
GitHubStar
Copyright © 2025 Akumina