Canvas App Widgets

Data displayed by the Canvas App will be displayed in the context of the current user (using the current users permissions)

Embedding a Canvas App in ASM

Configure ASM

1. Create a new Client under Login Settings

   
2. Enable the client

3. Create a Secret this will be used for the connection from Power Apps

4. Add a Redirect URI copied from the Power Apps Custom Connector after it is saved

5. Enable Azure Authentication You need to create an App Registration in your Azure tenancy A client secret is created in Azure and copied to ASM The Redirect URI is created in ASM after the new client is saved and is copied to the App Registration

6. Ensure your ASM user has your Azure AD user id listed under External ID’s

Graphical user interface, application Description automatically generated

Create a Custom Connector in Power Apps

Add a Custom Connector

Your ASM instance includes an Open API 3.0 definition but, at the time of writing, the Custom Connectors only support Open API 2.0. Therefore you should create a Custom Connector from blank

Data > Custom Connectors > Create from blank

Graphical user interface, application Description automatically generated

Graphical user interface, application, Teams Description automatically generated

Complete General Information

Field	Value
Host	company-name.alembacloud.com
Base URL	/production

Configure Security using Generic OAuth 2

Field	Value
Client Id	Create a new Client in ASM and copy the Client Id from there
Client Secret	Create a secret (like a password) for the client in ASM and copy that secret to this field
Authorization URL	https://company-name.alembacloud.com/production/alemba.identity.server/connect/authorize
Token URL	https://company-name.alembacloud.com/production/alemba.identity.server/connect/token
Refresh URL	https://company-name.alembacloud.com/production/alemba.identity.server/connect/token
Scope	offline_access openid profile email session-type:Analyst
Redirect URL	Copy this value and add it to the allowed redirect URL’s in the ASM client

Create Definitions for each API call you plan to use

Graphical user interface, text, application, email Description automatically generated

Chart, waterfall chart Description automatically generated

Create Connector

Graphical user interface, text, application Description automatically generated

Test

1. Click New Connection and then Create

2. Login when prompted

You will now be able to use the Custom Connector in your Canvas App

Create a Canvas App

1. Create a Gallery using your Custom Connector
2. Share the app with others

3. Copy the Web Link from the Details page for your app

Create a Microsoft Canvas App Widget in ASM

1. Add a widget from the screen designer
2. Copy the web link from your canvas app to the Canvas App URL in the designer

3. Set a maximum height and width for the canvas app widget

The Result

Graphical user interface Description automatically generated