Prerequisites
The ability to use HTTP connector calls in https://make.powerautomate.com (Some admins DLP block these)
You have read Part 1
Continuation:
So, we have already created a workflow that is invoked when a QR code is scanned and added in a compose. Let's say we would like to display some static information on the device after we scan, how can we achieve that?
Let's get back into it!
Step 1: In the Compose component you need to create some HTML for the response back to the device. This will display a web like page with your content
Here is an example of a game
Here is the code I used
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Catch Me If you Can</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.button:hover {
transform: translateX(20px);
}
.button:active {
background-color: #f44336;
}
</style>
</head>
<body>
<div class="container">
<p>Your not winning this game!</p>
<button class="button">Catch Me If you Can</button>
</div>
<script>
const button = document.querySelector('.button');
button.addEventListener('mouseover', function() {
const x = Math.floor(Math.random() * window.innerWidth);
const y = Math.floor(Math.random() * window.innerHeight);
button.style.transform = `translate(${x}px, ${y}px)`;
});
button.addEventListener('mousedown', function() {
button.style.backgroundColor = "#f44336";
});
button.addEventListener('mouseup', function() {
button.style.backgroundColor = "#4CAF50";
});
</script>
</body>
</html>
If you're not too familiar with HTML and CSS you can use a free online HTML builder to achieve your desired output.
Step 2: Add Your Code. Copy your code / or mine and paste into the compose. You should have something that looks like this
Step 3: Response Now we need to send a response to the device with the code to display. For that lets add a response action. We also need to add a header key and value. Enter key = Content-Type Enter Value = text/html
Click Save and vola! time to test. Go ahead and scan the QR code you generated in Part 1. 3 actions 1 piece of HTML 1 QR code and you have a solution.
For those that didn't follow along here is one I made earlier. Go have a play and try it yourself, and don't forget to post a comment with what you made or even better still post about it on our Facebook group
Conclusion: By leveraging the HTTP connector in Power Automate, we can generate custom URLs that can be embedded in QR codes. Scanning these QR codes then invokes the associated workflow, automating various tasks and processes seamlessly. This integration offers a powerful and efficient way to trigger workflows on the go. So, start exploring the possibilities of using QR codes and Power Automate to simplify your automation efforts today!
Comments