# Canvas App Widgets

## Embedding a Canvas App in ASM <a href="#toc83385742" id="toc83385742"></a>

### Configure ASM <a href="#toc83385743" id="toc83385743"></a>

1. Create a new Client under Login Settings<br>

   <figure><img src="/files/renx0qECXiz2HeUDVlhk" alt=""><figcaption></figcaption></figure>
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]\(/files/5Rgapr1A3XF1DXJinZnT)

## Create a Custom Connector in Power Apps <a href="#toc83385744" id="toc83385744"></a>

### 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]\(/files/AnYwOO1vvyzfVwCIwnQ8)

!\[Graphical user interface, application, Teams

Description automatically generated]\(/files/Pr2dk12UM3u5APR9HilE)

### 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&#xA;&#xA;Description automatically generated](/files/TrM4Tjn8glYLKUzudKsR)

!\[Graphical user interface, text, application, email

Description automatically generated]\(/files/2gXXfyMRYkDXxPhCwTgK)

!\[Chart, waterfall chart

Description automatically generated]\(/files/uJJnBcYlzoHMHTHG6OBL)

### Create Connector

!\[Graphical user interface, text, application

Description automatically generated]\(/files/3xhKpF0IwOnhQl5y4Zl6)

### 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 <a href="#toc83385745" id="toc83385745"></a>

1. Create a Gallery using your Custom Connector!\[Graphical user interface, text, application

   Description automatically generated]\(/files/SeeiUlDY4MQvfI2O1Wkh)
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 <a href="#toc83385746" id="toc83385746"></a>

1. Add a widget from the screen designer\
   !\[Graphical user interface, application

   Description automatically generated]\(/files/ASn0Q2A5EOrdC3FcbxSz)
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 <a href="#toc83385747" id="toc83385747"></a>

!\[Graphical user interface

Description automatically generated]\(/files/EfmzubVUBKpBHAhrz12M)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.alemba.com/asm/asm-hermes/integrate/managing-integration/canvas-app-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.