QR Codes in PowerApps – Quick & Powerful

QR Codes – Like barcodes, but cooler.

Welcome to another awesome post from the team here at NextStep Creations.

Today we’re going to be talking about QR Codes in PowerApps. By the end of this tutorial, you’ll be able to dynamically generate QR codes with your own custom content.

Here’s an example of what it’ll look like:

QR Generator finished

The beauty of this is there’s no Flow involved, this is purely and solely PowerApps. Let’s get to it!

QR Code API – How to generate the image

For this tutorial, we’ll be using the QR Code Generator API , found here: http://goqr.me/api/

If you’d like some information on how to use APIs in  Flow/PowerApps, check our this blog post: PowerAutomate QuickBits 2 – Handling APIs Efficiently

What API call do we use?

Simple! We need to use the  “create-qr-code” API. The syntax is like so:

https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=Example

There’s two parameters in this URL, “Size” and “Data”. These define the size of the QR Code generated, and the data that the QR code contains.

All we’re going to do is dynamically update the data parameter, and then generate a new QR Code.

PowerApp Setup

Fairly straightforward setup. One label, one text input, one button, and one Image control.

QR Generator no code

Awesome! Two more steps to this, and you’re done.

Set the “OnSelect” parameter of the button to:

Set(qrCode, “https://api.qrserver.com/v1/create-qr-code/?size=150×150&data=” & ti_QRContent.Text)

Replace “ti_QRContent.Text” with your TextInput (if you’ve renamed it).

Now, on the image, set the “Image” property to:

qrCode

Enter some text into the text input, click “Generate QR”.

You should see your image turn into a lovely QR Code!

Wrap-up and thoughts

This is a very simple and very powerful way to generate custom QR codes. This could be used for inventory management (Simple Inventory Management App – Part 1/3), or as a library or sorts, where you can embed links to content in QR codes and have users scan them.

As always with PowerApps, the possibilities are endless.

Reach out to the team on Twitter at NextStep Aus and let us know what you’ve built! 

PowerAutomate QuickBits 2 – Handling APIs Efficiently

You get an API! You get an API! Everyone gets an API!

Hey everyone! Welcome back to another installment of our QuickBit series. This time, we’re looking at how to easily utilize APIs in PowerAutomate.

What is an API?

API stands for “Application Programming Interface”. An API acts as a sort of middle man for requests you wish to make to an endpoint. For a deeper understanding, have a look at this link.

The main reason we want to use an API is so we don’t reinvent the wheel. If you can think of something, there’s usually an API for it. Some interesting examples include:

Today, we’re going to be picking one from the above list, and one of my personal favourite APIs.

“I’m a creative genius.”  – Kanye

Time to build our Flow.

You guessed it, we’re using the Kanye API!
This API will provide you a random Kanye quote when you query it.

HTTP Calls – how to tell the API what to do:

When you query an API, you will be using different methods depending on what you would like to do. The main ones you may use are GET, POST and DELETE.

  • GET is used to request data from a specified resource
  • POST is used to send data to a server, or to create a resource.
  • DELETE is used to delete the specified resource

More information can be found here: HTTP Methods
Can you guess which one we’re going to use?

Implementing the GET method in Flow.

Let’s get into it! What we’ll be doing in this tutorial is setting up a flow that, every day at 8am, will grab a random Kanye quote and post it to yourself in teams! What a way to get motivated for your day.

First, create a new scheduled Flow. Name the flow, and set it to run every morning at 8am:
Schedule Setup

Click create, and then add a HTTP Step:

Add HTTP Step

Perfect! Now, the “Method” section is where we pick our HTTP method, as described before. Set it to GET, and in the URI add in:

https://api.kanye.rest/

HTTP Kanye Setup

Awesome, well done so far! Lets grab the content that we need and send it to Teams. Add the “Post a message ass the Flow bot to a user” step, and fill it out as so:

Teams Kanye Setup

We’re almost done! Lets run a test and see what it looks like.

Teams message Kanye quote

Oooh, so close! That’s okay, I’ll show you how to fix this so it displays just the quote, none of that weird curly brace stuff (which is JSON by the way, check it out here……PowerPlatform and JSON).

Back into Flow, we only need to do one simple thing! In the message section of your “Post a message as the Flow bot to a user” step, set the “Message” to this (make sure you’re in the expressions tab when adding this!):

body(‘HTTP’)[‘quote’]
Run the test again, and lets see what we’ve got:
Genius text Kanye quote
 

Wow! Thanks Kanye, I couldn’t have put it better myself.?

Closing thoughts

Think of the possibilities now! You can use ANY API you want to like this, and pull data into PowerAutomate. And once it’s in PowerAutomate, your options are endless.

Check out some of our other content here:

Cheers
Jacob | Automation Specialist

PowerAutomate – Transforming Lat/Long to an Address

Welcome to -33.796141, 151.178358! Wait, that doesn’t look right.

Hey everyone! Welcome to another tutorial from myself and the team at NextStep Creations. Today we’re using PowerAutomate to convert a latitude and longitude value to a readable address. In a previous blog we looked at Google Maps in PowerApps.

In this, we cover the ability to use a devices GPS coordinates to provide a location. But, if you were ever to display these, or print them or send them to a report (see Creating a HTML Report), they would come out as just a string of numbers, which isn’t ideal.

See Google Maps might know what to do with those numbers, but we don’t. So I’m going to show you how to convert those into something a bit more “human”.

Step 1 – Set up your Flow (PowerAutomate)

Make sure you have a Google Maps Developer account. See the Google Maps in PowerApps tutorial for info on how to do this. 

For this section, we’ll need to get an API Key for the Geocoding segment. Here’s a tutorial on how to do this: Get Geocoding API Key

We’re going to be working with PowerAutomate (Microsoft Flow) and PowerApps today.  Create a new flow, and name it “convertAddress”, Add the PowerApps trigger, and then a HTTP step after that:

PowerAutomate Setup

Perfect! Set the Method to “GET” and set the URI to the following code:

https://maps.googleapis.com/maps/api/geocode/json?latlng=@{triggerBody()[‘HTTP_URI’]}&key=YOUR API KEY HERE

Make sure to replace the key value with your API Key. You should now have a HTTP step that looks like this:

PowerAutomate - Transforming Lat/Long to an Address 1

Sweet! Let’s move on. In this next section, I’ve done a lot of the heavy lifting for you. In another blog post we’ll talk about how to correctly set up a Parse JSON step, but for now, here’s one I prepared earlier.

Add a Parse JSON step, and set the “Content” to the Body of the HTTP step previous.
In the schema, click this link and copy all of the text. Your Parse JSON step should look like so:

PowerAutomate - Transforming Lat/Long to an Address 2

Lets create a variable to store the address in. Add an Initialize Variable step, name it formattedAddress, set the type to String and the value to:

body(‘Parse_JSON’)?[‘results’][0][‘formatted_address’]
More on the above in the blog we’re writing about JSON. 
Now add a “Respond to a PowerApp or flow step, and set the output variable to the formattedAddress variable we made:
PowerAutomate - Transforming Lat/Long to an Address 3
 
Brilliant! Time to go to PowerApps.

Step 2 – Create PowerApps & tag the Flow

Alright, nice and easy. Create a new PowerApp, and add a button. We’re going to create a proof of concept app, to show that your latitude and longitude can be successfully converted to an address.

You can expand on this if you wish by adding the Google Maps ability like we’ve shown: Google Maps in PowerApps

Here’s my app layout:

PowerAutomate - Transforming Lat/Long to an Address 4

To get the text label to show my location, I’ve set the text property as follows:

“My location: ” & Location.Latitude & “, ” & Location.Longitude

This is using the in-built Location functionality in PowerApps.
Read more about that function here: Acceleration, App, Compass, Connection, and Location signals in Power Apps

Alright, let’s add some functionality! Add the flow to the button:

PowerAutomate - Transforming Lat/Long to an Address 5

In the OnSelect of the button, set a variable to the response value we defined (formatteddAddress) to a variable using the below code:

Set(convertedAddress, convertAddress.Run(Location.Latitude & “,” & Location.Longitude).formattedaddress)

PowerAutomate - Transforming Lat/Long to an Address 6

So, we’re just passing the latitude and longitude of the device, separated by a comma.

Now, set the bottom text label (“My address: “) to the following:

“My address:

” & convertedAddress

This will add a few blank lines, and then when you click the button will display your address.

Give it a try! You should see a result like so (I’ve blanked out some of my address for security reasons):

PowerAutomate - Transforming Lat/Long to an Address 7

And that’s it! Congratulations, you’ve got yourself an actual address.

Happy PowerApps developing, until next time.

 

Google Maps in PowerApps – Fast & Efficient

Come one come all, to an undisclosed location on the Internet!

Oh wait, we have Google Maps now…..here’s the address. Hey everyone, Jacob here again. Today we’re going to be discussing using the Google Maps API inside of your PowerApps to give easy to use, easy to visualize locations, either by using the physical device’s latitude and longitude, or by manually typing in a street address. First off, here’s a little teaser of what you can expect to make at the end of this….

PowerApps Demo Final PowerApps Demo Final

As you can see, we have a fully functioning location setup! We can either use a manually entered address (first photo), or use the devices inbuilt GPS functionality to figure out the coordinates of the user!

Step 1 – Design the PowerApps Layout

Let’s get started. Fairly simple PowerApp layout, I’ve added notes on this image to make it easier to understand:

Google Maps in PowerApps - Fast & Efficient 8

Okay! Nice and easy so far. You’ll see that in that photo I mentioned I’d elaborate on the latitude/longitude text label, so here goes:

  • This label is set up to show either the current Latitude and Longitude of your devices if the address input is blank.
  • If it isn’t blank, it will display whatever address has been manually entered.

To achieve this, set the Text property of the label to the following:

If(IsBlank(ti_addressEntry.Text), Location.Latitude & “, ” & Location.Longitude, ti_addressEntry.Text)

Step 2 – Getting the static map setup in Google

So this part requires a few moving parts. Let’s break it all down.

Getting a Google Maps Static API Key

To get images from Google we need to have a key. A key is tagged to a Google account, and verifies that it’s you making the request.

To get this, we need to sign up to a Google Developers account. You can use your existing Google/GMail account for this. Follow this link and click “Get Started” to sign into your account: Google Developer – Maps

Create your first project and agree to the terms:

Google Maps in PowerApps - Fast & Efficient 9

You’ll have to set up a billing account in the next stage. I won’t walk you through this section as it’s fairly straightforward.

You’ll need to get an API key next, Here is a great guide from Google on how to do so: Get an API Key

Okay! Once you’ve completed all that and got your Google Maps Static API Key, it’s back to PowerApps!

Step 3 – Configuring the image

What we’re going to do is use the Google Maps API to return us a static map image that we can display. There are a lot of parameters that you can pass to this API (full list here). The ones we care about are:

  • Zoom
  • Size
  • Markers
  • Key

We’ll get more in-depth as to what an API is in other blogs, so for now here’s the code:

“https://maps.googleapis.com/maps/api/staticmap?&zoom=” & slider_mapZoom.Value & “&size=” & img_map.Width & “x” & img_map.Height & “&markers=color:red%7Csize:mid%7C” & EncodeUrl(If(IsBlank(ti_addressEntry.Text), Location.Latitude & “,” & Location.Longitude, ti_addressEntry.Text))& “&key=YOUR API KEY HERE”

Woah! That’s a lot! Okay, let’s break it down, and show you what to do with it all.

Breaking down the code

https://maps.googleapis.com/maps/api/staticmap?&zoom=” & slider_mapZoom.Value 

This component is the API URL. The final section is the “Zoom” paremeter, which you can see is the value of the Slider we’ve put in PowerApps.

& “&size=” & img_map.Width & “x” & img_map.Height & “&markers=color:red%7Csize:mid%7C”

Woah that’s a lot of ampersands. We use these to concatenate strings togethter in PowerApps. This section of code defines the map height and width, based off the size of our image control in PowerApps. 
The end section of this defines the markers as red, and size of medium.

& EncodeUrl(If(IsBlank(ti_addressEntry.Text), Location.Latitude & “,” & Location.Longitude, ti_addressEntry.Text))& “&key=YOUR API KEY HERE”

Okay final section! This part will pass the location value to the API. You can see it checks to see whether the address entry text input is empty or not.

  • If it’s empty, pass the latitude and longitude of the devices GPS
  • If it isn’t empty, pass the address entered in the text input

Also, replace the section at the end with your API key (right where it says YOUR API KEY HERE). And you’re done!

Okay, throw all of that into the Image property of the media we added before, like so:

Google Maps in PowerApps - Fast & Efficient 10

Almost done!

Final thing, set the OnSelect property of the button to the following code:

Concurrent(Reset(ti_addressEntry), Reset(slider_mapZoom))

And that’s it! Test it out, and congratulations to you!

Google Maps in PowerApps - Fast & Efficient 11

Now, here’s another tutorial on how to convert that unsightly latitude and longitude to an actual address: PowerAutomate – Transforming Lat/Long to an Address

Catch you in the next blog, happy PowerApps Deving!