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:
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/
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!
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:
Click create, and then add a 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/
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:
We’re almost done! Lets run a test and see what it looks like.
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:
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.
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:
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:
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:
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:
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:
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:
To get the text label to show my location, I’ve set the text property as follows:
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….
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:
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:
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:
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:
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.
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:
Almost done!
Final thing, set the OnSelect property of the button to the following code:
