cancel
Showing results for 
Search instead for 
Did you mean: 
chass

Adv Hands On Lab 6: Connect PowerApps with custom connectors

We will be building (or using) a custom connector to use in our event mobile app we’ve previously created. We will be adding a QR code generator to the attendee screen.

Environment

The lab requires a PowerApps environment with a Common Data Service (CDS) database created and the sample apps installed.

You must have completed module three first or import the final solution EventManagementFinal.zip

 

Note: Exercise 1 is targeted toward developers. If you are not a professional developer, go straight to Exercise 2.

Exercise 1 – Build custom API

In this exercise you will be building custom API that generates QR images based on the text information passed in.

Note: You will need an Azure subscription to complete this exercise. If you are not a developer or don’t have an Azure subscription, it is ok to skip to exercise 2 and use the API that we have pre-built.

Task 1: Create function app

  1. Navigate to https://portal.azure.com/ and click Create a Resource.

  1. Search for Function and select Function App.

  1. Click Create.

  1. Enter ContosoEventsQR (Your Initials) (or any unique name) for App Name, select your subscription, select Create New Resource Group and enter ContosoHR (replace HR with your initials).

  1. Select Consumption Plan for Hosting and click Create.

  1. Wait for the app to be created, you will get a notification when it is ready.

Task 2: Create function

  1. Select All Resources.

  1. Search for the function app you created and click to open.

  1. Click Create New function.

  1. Select In-Portal and click Continue.

  1. Select More Templates and click Finish and View Templates.

  1. Select HTTP Trigger.

  1. Enter qr64gen for Name, select Anonymous for Authorization Level, and click Create. (note: this is for the exercise only, not recommended for production use)

  1. Click View Files.

  1. Click + Add.

  1. Name the new file function.proj

  1. Paste the xml fragment below in into the new file and click Save.

<Project Sdk=”Microsoft.NET.Sdk”>

<PropertyGroup>

<TargetFramework>netstandard2.0</TargetFramework>

</PropertyGroup>

<ItemGroup>

<PackageReference Include=”QRCoder” Version=”1.3.5″ />

</ItemGroup>

</Project>

  1. Select the run.csx file.
  2. Replace the function code with the following.

#r “Newtonsoft.Json”

 

using System.IO;

using System.Net;

using System.Net.Http;

using System.Net.Http.Headers;

using Microsoft.AspNetCore.Mvc;

using QRCoder;

public static async Task<IActionResult> Run(HttpRequest req, ILogger log)

{

log.LogInformation(“C# HTTP trigger function processed a request.”);

string text = req.Query[“text”];

 

if (text != null) {

// Generate QRCode

byte[] qrCodeAsPngByteArr = null;

string output = null;

await Task.Run(() => {

QRCodeGenerator qrGenerator = new QRCodeGenerator();

QRCodeData qrCodeData = qrGenerator.CreateQrCode(text, QRCodeGenerator.ECCLevel.Q);

PngByteQRCode qrCode = new PngByteQRCode(qrCodeData);

qrCodeAsPngByteArr = qrCode.GetGraphic(20);

output = Convert.ToBase64String(qrCodeAsPngByteArr, 0, qrCodeAsPngByteArr.Length,

Base64FormattingOptions.None);

});

 

if(output != null) {

return (ActionResult) new ObjectResult(new {Image = output});

}

}

return new BadRequestObjectResult(“Please pass a text on the query string”);

}

7. Save. Resolve any compilation errors

Task 3: Test the API

  1. Click Get function URL.

  1. Click Copy.

  1. Start a new browser window and paste the URL you copied.
  2. Add ?text=Hello world at the end of the URL and hit the [ENTER] key.

  1. You should get a result like image below, copy the base64string.

  1. Navigate to https://codebeautify.org/base64-to-image-converter (or any other converter of your choice).
  2. Paste the string you copied and click Generate Image.

  1. QR Code image should be generated.

  1. Bonus testing. Open QR reader on your phone (iPhone or Android). You should get

    Hello world.

Exercise 2 – Create custom connector

In this exercise you will be building a custom connector using either the URL for our pre-built function (find it here https://bas2019.azurewebsites.net/api/qr64gen
) or the one you created in Exercise 1 above.

Task 1: Create connector

  1. Navigate to https://make.powerapps.com sign in and make sure you are in the correct environment.
  2. Expand Data and select Custom Connectors.

  1. Click + New Custom Connector and select Create from Blank.

  1. Enter QR Generator for Connector Name and click Continue.

  1. Type your host name:

    If you created the function yourself enter yourfuntionname.azurewebsites.net

    If you are using our function enter bas2019.azurewebsites.net

  2. Type /api for Base URL, and click Security.

  1. Select No Authentication and click Definition. Do not navigate away from this page.

 

Task 2: Add action

  1. Click + New Action.

  1. Enter QRCode for Summary, QR Code base64 for Description, and QRCode64 for Operation.
  2. Go to the Request section and click Import from Sample.

  1. Select GET for the Verb.

    If you are using our function enter https://bas2019.azurewebsites.net/api/qr64gen/?text=Hello

    If you created the function yourself enter https://yourfuntionname.azurewebsites.net/api/qr64gen/?text=Hello

    Click Import.

  1. Scroll down and click on the Response.

  1. Enter 200 for Name and click Import from Sample.

  1. Paste {“image”:”sample”} in the Body and click Import. Do not navigate away from this page. (the box may appear as read-only, but you can paste the needed text using Ctrl+V)

  1. Click Create Connector. Do not leave this screen.

 

 

Task 3: Test

  1. Select Test.


  1. Click Create.


  1. Click + New Connection.


  1. Make sure QR Generator is selected and click Create.


  1. Select Custom Connectors and click Edit on QR Generator.


  1. Select Test again.


  1. Enter Hello Contoso for Text and click Test Operation.


  1. You should get OK (200) for Status and the Body should look similar to the image below.


  1. Click Close.


Note: You can also create Custom Connectors using Open API defintions https://docs.microsoft.com/en-us/connectors/custom-connectors/define-openapi-definition or Postman collections https://docs.microsoft.com/en-us/connectors/custom-connectors/define-postman-collection That can be helpful when the API is more complex.

Exercise 3 – Use the custom connector

Task 1: Add data source

  1. Navigate to https://make.powerapps.com and make sure you are in the environment you used for Module 03.
  2. Select Apps, select Event Day Manager app, and click Edit.

  1. Select the View tab and click Data sources.

  1. Go to the Data pane and click + Add Data Source.

  1. Select QR Generator.

Task 2: Display QR Code

  1. Select the Sessionscreen.
  2. Select the Insert tab, click Media and select Image.

  1. Rename the image imgBarcode.

  1. Set the Image property to the formula below.

“data&colon;image;application/octet-stream;base64,” & QRGenerator.QRCode64({text:txtAttendeeCode}).image

  1. Move the imgBarcode to bottom of the screen.

Task 3: Test

  1. Select the MainScreen and click Preview the App.

  1. Select the Event.

  1. Select one of the Sessions.

  1. Type something on the Attendee field. The QR Code image should change every time you change the test text.

 

Challenge:

You might notice that even if there is no attendee looked up a QR code still is displayed. If you have time, try to update the app to only show the QR code when an attendee is looked up. After you complete this challenge it should look like the following if no code is provided.