My First Client Widget

This tutorial is an introduction to Alkami’s widget template. A widget is an MVC application that plugs into the base Alkami platform.

Note

You need to have the SDK running before you can begin this tutorial.

If you don’t - set up your SDK by following installation guide now.

Alkami’s Widget Platform

The Alkami platform is a web-based application that is extended and customized with plugins called widgets. Users can use these widgets to access their banking details with a customized desktop and mobile experience. This tutorial will guide you from project creation with a Visual Studio template to deploying a fully working widget with desktop and mobile views.

Create and Build

1. Upgrade to the latest version of SDK Templates by running this command in Powershell

   choco install Alkami.SDK.Templates -y

2. Open Visual Studio

   Make sure to run VS as Administrator

   You must run Visual Studio as an Administrator to locally deploy and debug .

   Create a new project and select Alkami Client Widget Template

3. In Project name, type USBFI.Client.Widget.FirstWidget

   In the New Client Widget Box, we’ll enter in these information:

   Widget Display Settings: All

   Widget Icon: Piggy

   Bank Identifier: 78554577-9DE6-43CD-9085-5868977156D1 (This bank identifier is the default one for Developer Dynamic)

4. Build the solution and verify it succeeeds

5. Go to https://developer.dev.alkamitech.com and Login with mike.brady.

   The password will be 12345 and the OTP is 560142

6. In the URL, replace DashboardV2 with the areaname of your widget, such as USBFIMyMoney. Your widget opens on the page.

Configure the Widget

Each widget needs a database entry for it to be loaded during platform startup. This process happens automatically during project creation. However for rare occasions where it doesn’t, you will need to go Tools/ folder and run install_widget.sql

Local Development

This script is for local development only and adds a database entry that is used to load the widget during application startup.

Verify the db entry exists by querying Core.Widget table.