# 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="https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/ZvsU4MsbfPwNRVQLmKbP/1" 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]\(<https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/yjOhFwCdj6EfjHO6sPrj/2>)

## 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]\(<https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/qmyu6r48MrOfVnis66cq/3>)

!\[Graphical user interface, application, Teams

Description automatically generated]\(<https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/E54o4e5Dr9YUPjhMLQ8k/4>)

### 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](https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/RW69MW7SsKD89eMgAH45/5)

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

Description automatically generated]\(<https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/c5wXUxdLVWymsmkdZww4/6>)

!\[Chart, waterfall chart

Description automatically generated]\(<https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/kE3jPIwVr1zrNbmt4xtK/7>)

### Create Connector

!\[Graphical user interface, text, application

Description automatically generated]\(<https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/qhhjIxAsafZrp87hqQqI/8>)

### 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]\(<https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/5AzYF1XmvF2YiNbvYXC4/11>)
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]\(<https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/EO0ivhzURUKE9p4xwsEf/12>)
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]\(<https://content.gitbook.com/content/hlW9jKl7dcDggHAPhNU9/blobs/CS7k7bvJgiCXA4Lho0p5/13>)