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!
Hey PowerAddicts! Welcome back to NextStep Creations. This post marks the first of three instalments, in which we’ll guide you through creating a simple, but powerful inventory management application.
First off, let’s look at what you’ll be building over the coming tutorial!
Finished Inventory App
At the end of this series, you’ll have a nice, pretty inventory app, that will allow you to:
Scan barcodes and enter a product description and quantity
Save these barcodes, descriptions and quantity to SharePoint or SQL
Display a list of all your inventory
Search your inventory and order the results by different criteria
Here’s a screenshot of the finished layout:
<———————–SCREENSHOT OF FINISHED HERE———————–>
Building the inventory front end
Let’s start by creating the basic layout of the application. We’ll have a home screen with 2 buttons, labeled “Enter Item” and “Search Items”.
Straightforward so far. In this part of the project, we’re going to be focusing on creating the Enter Items section.
Building the “Enter Items” screen.
Create a new screen in PowerApps, and set it up like so:
There’s a few little things here that you’ll have to set up.
The “Scan” button is actually a barcode scanner object in PowerApps. You can add this by going to “Media -> Barcode scanner” in the insert menu at the top:
In the “Product Description” text input, set the Mode value to:
TextMode.MultiLine
In the “Quantity” text input, set the Format value to:
TextFormat.Number
Also set the “VirtualKeyboardMode” to:
VirtualKeyboardMode.Numeric
Perfect! The rest are just standard buttons and Labels, so lets move on.
Handling barcodes – pulling the scan data (the critical part of inventory management)
Time to get to the fun part. Reading the barcode numbers from your camera.
Note: You will have to use the application on your phone/tablet, as currently PowerApps does not support barcode scanning in the web version.
Alright! Select the “Scan” button we set up before, and find the “OnScan” action. Set the value of it to the following code:
Set(barcodeNum, barcode_enterItems.Value);
This will set a variable called barcodeNum to the value of the barcode scanner object we inserted before.
Now, the label you have that says “Barcode number: “. Time to append the barcode number to this. Set the “Text” property of this control to:
“Barcode number: ” & barcodeNum
Now go ahead, save your app and give it a test! Remember to add a Navigate() function to your home screen so you can get to the enter items page.
When you click the scan button, you should be presented with the camera on your phone, and a nice green square, like so:
When you hover over a barcode, you’ll hear a “BEEP” and then it’ll take you back to the app. Everything going to plan, you should see your screen with a barcode number on it:
You can fill out the description of the product, and add in the quantity of the product you have.
And that’s it for part 1! In the next part, we’ll look at setting up the back end so that we can save our scanned items to SharePoint or SQL. In part 3, we’ll look at searching the database and adding other cool functionality.
Hopefully by now you can start to see the power of this application, and your mind is racing with ideas. Leave a comment below or reach out to us on twitter at NextStep Aus, we’d love to see what you made!
Today we are back again…. Turning our boring HTML Table from PowerApps into a beautiful CSS Table with embedded images and with my limited HTML and CSS knowledge make it…. customer friendly
< !DOCTYPE html > < html > < head > < title > HTML Report < /title > < meta charset=”UTF-8″ > < meta name=”viewport” content=”width=device-width, initial-scale=1″ >
Now if I can say anything…. Please do NOT copy the code below and expect it to work… The reason for this…. Bloody Quotations! This is a quotation that wont work ” This is a quotation that will work "
Special thanks to Reddit User ‘u/Knovar’ for experiencing this little bug so we can add it to the blog steps 🙂
Just make sure your quotes, symbols and special characters are on point as sometimes HTML and Website text editors like to just change things!
Now you will notice I am not adding the < style > tag here. This is for two reasons:
1. I am going to add quite a bit of CSS here… (Don’t know CSS? W3 Schools to the rescue! CSS Tutorial) The one thing variables in PowerAutomate does not like is lines and lines of visible text.
2. I don’t want to have to scroll or search 17 times looking for the once piece of HTML or CSS that I am trying to edit or change!
Next we are going to create another empty string variable.. This time instead of header content… you guessed it… var_HTMLStyle.
The above code sets some CSS Styles for my tables and my body content as well as a very important step…
It sets the page size as ‘A4’ If you intend on exporting this to PDF… You will love this little gem..
Okay home stretch we are going to replicate the above two steps..
But we are going to create a var_HTMLBody this will include thetag as well as some text if you desire
for us it will just be < body >
Then we are going to create a var_HTMLTable
This is the fun bit… The below piece of code (which will be the content of our var_HTMLTable String variable) Defines the tables Header, the tables CSS Style and the table header columns. Notice we do not yet close the table HTML
This builds our table row… One at a time… in the correct order…. 🙂
It should look like this:
Now after our apply to each we have to add some important steps. It joins all our string variables together to make our finished HTML
The steps are as follows: 1. Close our Table with < /table > 2. Close our body with var_HTMLTable < /body > 3. Close our HTML Header with var_HTMLStyle var_HTMLBody < /HTML >
It should look something like below:
Finally use the var_HTMLHeader as the file content for your Create File action from the first Blog
Now lets run this with content from before:
Old Table for comparison:
Hope this helps!
Taking your PowerApps and PowerAutomate Skills the NextStep
PowerApps – Clearing a currently selected Radio Button
Welcome all, to the first installment of Powerapps QuickBits, where we talk about radio button tricks! These posts will be short snippets and tutorials on useful implementations in PowerApps. Let’s get started!
Step 1 – PowerApps Layout
Nice, quick and easy setup. Add your radio button and set it’s items to whatever you’d like the options to be.
Step 2 – Radio Button Properties
There’s two different properties we need to manipulate for this to work:
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:
Attention class! Jacob here, and today we’re going to be talking about running SQL queries in Flow.
But why would we do that when PowerApps already has LookUp, Search, and Filter? Because PowerApps doesn’t like doing the heavy lifting. And PowerApps will also use your device resources to handle these. So if you have a slow device…….you’re going to have slow functionality.
Now it’s no good making a claim like that without supporting it… Here’s a link for some Performance Comparisons in PowerApps: PowerApps Performance
That’s where SQL comes in. In other blogs, we talk about using SQL as a database for your app. Think of this like the backbone, and PowerApps is the pretty front end. So, why not use SQL for what it was designed for?
What is SQL good for?
Querying existing data based on changing conditions
Providing quick results from dynamic queries in PowerApps
What is PowerApps good for?
Providing the “good looks” of the app
Manipulating data already loaded inside the app
So, putting 2 + 2 together, we end up with A PowerApps front-end with an SQL Backbone.
SQL Query Structure
First of all, this isn’t a masterclass on SQL. I’m no SQL wizard by any means, but I will show you some entry level SQL that will help you manipulate your existing data without a massive performance hit.
An SQL Query looks similar to this: “SELECT * FROM Customers WHERE Name LIKE ‘NextStep Creations'”
Let’s break this down a bit.
SELECT: The SQL statement used to select data from the database
*: All items. This can be changed to specific column names (customerName, customerID) if you only require certain data
FROM:Which table/source we are going to be selecting data from
Customers: The name of the table we’re pulling data from
WHERE:Used to start defining a set of condtions
Name LIKE ‘NextStep Creations’: Finds records where the Name column is LIKE the text in quotes
Here’s what that query looks like in PowerApps (with a custom added flow, which we’ll get to soon!):
As you can see, we’re passing the entire SQL query from PowerApps, and using a text input as the dynamic content for our search. Now, let’s create our own from scratch!
Step 1 – Creating the Flow
Create a new flow, and lets start with the PowerApps trigger. Add a step, find “Execute a SQL query (V2)” and add it.
Fill in the blanks with your server name. Once you add your server name, it will let you pick from the databases you have (provided you’ve authenticated correctly):
Once you’ve selected your database, add the “Ask in PowerApps” option into the “query” section.
After this, add a “Response” step, and set the “Body” to the following expression:
Leave the “Response Body JSON Schema” section blank for now.
Name this RunSQL and save your flow, we’re almost there!
Step 2 – Adding to PowerApps & getting data
Create a new PowerApp, and create a text input (this will be our search field). Add a button below that, and then finally a gallery underneath the button. You should have a layout like so:
Great work! Time to start setting the functionality up.
Button
Add the PowerAutomate flow we just created to this button:
Set the OnSelect property of the button to the following:
ClearCollect(sqlSearchData, RunSQL.Run(“SELECT * FROM company WHERE companyName LIKE ‘” & TextInput1.Text & “‘”))
Replace “company” with the name of the table you wish to search against, and change “companyName” to the field in that table you want to search by.
Now, set the Gallery’s items to the collection we defined before, “sqlSearchData”.
Awesome! Now you can test your app. Type something in the search box, and click “Search SQL!”.
Oh no! I got an error! Lets have a look why:
This may look confusing, but never fear! All this is telling us is that no data was returned from the search we made.
(in another blog we will cover error handling and how to deal with this. For the purpose of this tutorial, lets move on.)
Step 3 – Displaying the Search Results
Okay, time to do a test search with a company that I know exists, my own!
Hmm…..no error, but we still can’t see anything in the gallery. Let’s check our collection and see if it’s empty!
Huzza-WAIT. This isn’t the data we wanted……
Remember that field we left blank in our Flow earlier? Time to fill it out.
Step 4 – Providing the correct data back to PowerApps
Go to your flow, and open up the successful run. Expand the “Response” section, and you will see the data:
This looks like exactly what we want! Grab a copy of the text in the “Body” section.
The data you see is in a format known as JSON. More information on JSON can be found in other blogs, or by visitng this link: W3Schools JSON.
Go back into your flow and edit it, and select the “Generate from sample” button in the Response step. You’ll be greeted with a lovely box. Go ahead and paste your body content we copied earlier into here:
Select “Done” and your Response will now be filled with a JSON schema. Ensure that there is no keys that don’t have a data type. This will cause registering issues. More can be found about these issues in this blog post: Creating a HTML Report
Save your flow, and head back over to PowerApps.
Final Steps: Displaying data in PowerApps
First of all, we’ve made some changes to our Flow, so we need to remove and re-add it to our button.
Select the button, and then delete the OnChange section (this will remove the flow from being associate with this button).
Add the flow back in again, with the same value for the OnSelect:
ClearCollect(sqlSearchData, RunSQL.Run(“SELECT * FROM company WHERE companyName LIKE ‘” & TextInput1.Text & “‘”))
Let’s run that search again and check our collection!
VOILA! Great Success!
Now, go ahead and add some labels to your gallery, and set their properties to ThisItem.companyName (or whatever columns you have in your collection).
Congratulations! You’ve successfully searched data in SQL using PowerApps, with minimal workload on the client-side required!
Do you get shivers every time your client or boss asks for a report of that beautiful PowerApps Gallery you built for them? This post will give you the tools you need to create beautiful PDF reports with and without images using our wonderful PowerPlatform and a little code magic.
The very first thing you are going to want to do is setup a Gallery or Collection in PowerApps <– This is what we will be using as our base for our report. Lets take a look at my very basic app that tells some real truths:
As you can see we have three columns – Description, Purchase and Notes We are going to export the 4 rows of a snapshot of my life (dont tell my wife) to PowerAutomate where we will formulate our amazing HTML. The code to do this is quite simple – but first we need to create our flow.
Above you see two things: 1. The first is our PowerApps trigger. This is what allows us to call and send data to the PowerAutomate Workflows (Flows). 2. The second is an Initailise Variable step with Type Array and a nice name. We at NSC use var_ to start our variables so they are all the same scheme.
The beautiful thing about the PowerApps Connector is that it also does something else for us. As you can see it lets us Ask in PowerApps as a dynamic value option. This creates a PowerApps Variable with the name of the control:
Notice the name of the variable varitemsFromPA_Value and look at the name of the initialise variable step: var_itemsFromPA_ <– take note of this.. when you are dealing with 100’s of these, your naming scheme will save your headache!
So quickly recapping… We have a PowerApp with Data and a Workflow with a setup ready to receive it… Lets join them.
I have added a button to my PowerApp > I have clicked on my button > I have clicked actions in the top header > I have clicked Power Automate and Now I simply have to select my requested flow.
I have now selected createReportDemo (My Workflow’s name and its adding to my button)
Oh No! It failed to register… This is something you WILL run into when you are playing with Flow and PowerApps… The trick here. PowerApps can accept and receive only one thing… Text (strings, words, characters, bits) it only deals with Text…
So when we created our variable as type array that puts a request to PowerApps to send an Array reponse. It cannot complete this action so it FAILS! Don’t fear though. This isn’t a stopping point; we just have to change our functions slightly
To Remove a PowerApps Variable you have to remove the Trigger from the Flow:
Okay we have cleared that Variable… Now lets change the variable type:
Now lets re-request our PowerApps Variable:
Okay now we are ready to head back to the PowerApp.
BOOM!
We are now ready to start adding our code to the no code solution! 🙂
In the function bar at the top of the PowerApp if you select this…
It shows you your beautiful NAMED variable that it is asking for
These are mandatory. If you ask for two you must provide both responses. Hence why I showed you how to delete incorrect variables above… cause god dammit man we are only human!
My collection here is called expenses (which contains all the columns and data)
We are using Ignore Unsupported Types because I dont want to deal with NULL value checking today you can read more about this here: JSON Functions We will cover JSON in more depth in blog posts to come!
So we now have a button that will send all our data from PowerApps to PowerAutomate in a JSON format and a PowerAutomate Workflow that will grab that response and put it into a string variable for us… GREAT!
Time for the HTML…. WRONG we have to do some dumb stuff first…
Your beautiful button you created earlier… Press it.. Press it now!
Hopefully it will run your flow and you will get a succeeded response like below:
We are now going to open that response:
See that beautiful Value there… right now it contains [{BLAH BLAH BLAH
This is our JSON code and what we need to copy for this step:
Okay now we have our sample code lets jump into the Workflow’s edit mode:
Insert a _Parse JSON_ action and provide the content as the var_ variable we defined earlier
Now see that Schema is required … SMASH Generate from Sample and dump our copied notes from our succesful run in there
Then click done!
Now our JSON is entered we can continue
Add a new step – Create HTML Table
The Content for this is the Dynamic Body of our Parse JSON
I have added a comment so you can see the real expression (if you care)
Okay home stretch…
This Create OneDrive for Business connector might cause you some grief… its not you… its Power Automate…
There are two solutions to resolve this error:
Export your flow… then simply re-import your flow….. Yup… OR
Delete your flow…. then delete your OneDrive for Business Connector from the connectors screen on the left…. Create the OneDrive for Business Connector again and finally recreate your flow
Add a Create OneDrive for Business File:
The Filename MUST contain .HTML here
The File Content is the body response of our Create HTML Table
Next Add a Convert File (Preview) Action:
Here our *File: is the ID of the above created File and Type is as you request. However as the title suggests this is to PDF!
Finally…
Add a Create File action…
Here we are going to just play match the names and use the File Name and File Content of our Convert File action:
And Thats it…
This final step will create our PDF and save it to the defined location. You can fancy this up but that will be part two of this post 🙂
Here is the output of this basic PowerApp and PowerAutomate Workflow:
