Connect Power Apps to Zapier
In this article, I want to show you step-by-step how to call Zapier from within a PowerApp. Specifically, I am going to show you how a user could register themselves onto an event in Crowdcast. If you don’t know what Crowdcast is, it’s an online meeting service allowing you to run single events (such as a webinar), or even conferences such as we used for the PowerApps Virtual Summit. The example from a PowerApps point of view is going to be really simple, but with what I show, you can easily make a more advanced application using any connection with Zapier.
What is Zapier?
If you’ve not heard of Zapier then you’re missing out! Zapier is the most popular platform for connecting different services together. At the time of writing, it supports 1200 applications making it the largest service of its kind. It performs a very similar job to Microsoft Flow so you may be wondering why not use Flow? My advice here is that if Flow already supports the applications you want to integrate with, you’d probably want to use it. However, if you find that Flow is missing an application or that Zapier offers more flexibility in the way it can create your workflow then you might want to use Zapier.
Before I show you all of the steps, it’s worth taking a look at what we’re going to do. I am going to create a simple single canvas PowerApp that will take the first name, last name and email address. It will also have a button. When the form is filled in (and the button clicked), this information will be sent to Zapier. Zapier will then pass this over to Crowdcast to register the user on the Crowdcast event. As mentioned, this is really simple, but I am certain you will get a lot of value in how we connect PowerApps to Zapier.
What I explain here can be used in many different scenarios and massively increase the integration options when developing a PowerApp.
This article is meant to be a tutorial, allowing you to follow every single step. It should take you no more than 30 minutes to set all this up and have a working PowerApp form that submits a new event registration to Crowdcast.
Let’s get started!ct PowerApps to Zapier
Step1: Create an account, or login into Zapier
If you haven’t already got a Zapier account, you will need to grab one. They also do a 14-day trial. Here’s what it looks like when you’re logged in:
Step 2: Make a new Zap
What is a Zap? A Zap is a flow that is a set of instructions that allow you to create automated tasks, which receive data via Triggers. You can also choose to do things within your Zap such as looping or filtering the data. Once, the data comes in (and optionally manipulated), the Zap and then passes it onward to one or more other external applications, like Crowdcast.
At the top of the Zapier console, click the “Make a Zap” orange button.
Step 3: Setup a Webhook to receive the data from PowerApps
In this Zap, we’re going to be receiving data from our PowerApp, which will then be passed into Crowdcast to register a person for our event. Select the ‘Choose App’ > ‘Webhooks’ from within your Zap.
If you don’t know what a Webhook is then you can think of it as being similar to a web page but usable via a machine (not a human). It’s a URL that’s constantly listening for input from another machine. In other words, it’s how two services can communicate with each other without human interaction.
Step 4: Choose a ‘Catch Hook’
There are 2 types of webhooks we can use in Zapier. The ‘Retrieve Poll’ will call a given URL on a given schedule to see if there’s anything new to add. This is ideal if you have a system that has data but doesn’t have the ability to push out. The downside of this is it’s inefficient. You’re forcing Zapier to “do work” even though nothing may have changed, which can also increase your cost.
In our case, we’re going to be using PowerApps to “push” the data so let’s choose ‘Catch Hook’. (When the button is pressed on our new PowerApps form, we will call Zapiers webhook).
Step 5: Click Continue as we don’t want to select any Child Keys
If we’re going to be sending data (FirstName, LastName and Email) into Zapier which is specific to what we need in Crowdcast, then we’re going to need to tell Zapier about that data. I am going to do this part using a tool called “Postman” so, for now, let’s just click “Continue” as we will come back to this part.
Step 6: Copy the Webook Url onto your clipboard
One thing we will need to do is copy the new Webhook URL so that we can use it in Postman to enrich our request with data. So copy the URL as below.
Now that we’ve got the Url on the clipboard it’s time to load up the 2nd tool of the day which is something called “Postman”.
What is Postman?
Postman is what is known as a REST client. REST is a way to request information from another site, and Postman is a tool that is designed to help design this process. It can be a very powerful tool when working with Microsoft products, and the output from the Postman project can also be used in most Microsoft applications, such as PowerApps. Here we won’t be using Postman to create the design however, we will be using it to generate the link we will need to program Zapier.
Step 7: Download Postman and Create a new Request
To complete this next step you need to download Postman from this page. Once you’ve downloaded you need to click on a new ‘Request’ because we’re going to be getting information from our PowerApp (to send into Zapier).
Step 8: Save a new Request
On the ‘Save Request’ Screen enter a ‘Request name’ and add a new collection called ‘Zapier’.
Once you’ve filled it out, click ‘Save to Zapier’Connect PowerApps to Zapier
Step 9: Send a test over to Zapier
The next screen you will see is the ‘Workspace’ screen. This is a little tool that you can now use to make requests to test that the Zap is working. On this screen, you want to paste the URL that you copied from Zapier (in step 6) into the box next to the word ‘GET’. Once you’ve done that, click ‘Send’. You should then see the ‘Body’ at the bottom of the screenshot saying ‘status: success’.
Step 10: Add parameters into our request.
Now that we know that the request works, we want to start adding key/value pairs into the request. These values will allow us to send in the ‘FirstName’, ‘LastName’ and ‘Email’ from PowerApps into Zapier and then over to Crowdcast.to Zapier
To do this (back in Postman), you need to use the form editor to add the parameters. Add a new key and value for FirstName, LastName and Email (as below).
Step 11: Retest that Zapier has picked up your changes.
Go back into Zapier and click “Ok I did this”. You should now be able to analyse the Hook (as below) to ensure that your 3 new values came through to Zapier. Click “Continue” if this looks ok.
Step 12: Create an event in Crowdcast
At this stage, we’re ready to create a new event in Crowdcast. So log in with your live account (trial accounts don’t work with the API at the time of writing this). Click “Create an Event” and call it something like “Zapier Integration Test”. You can also explore and tweak the other settings if you wish, however, they’re not really important for this test.
Step 13: Get your API Key from Crowdcast
Once your event is created, go to “Integrations” and copy your “API Key” to the clipboard, which can be found under the “Zapier” area of the page.
Step 14: Add Crowdcast into your Zap
Back in the Zap where you just created your new Webhook, you want to choose “Add a Step”, then “Action/Search” to find “Crowdcast”. Doing this will take the new registration that we’re going to fire over from our PowerApp and pop it into Crowdcast. This is also where you may need to enter your API key if you’ve not done it already.
Step 15: Choose the “Register Participant” action
At the time of writing this, there’s only one relevant Crowdcast action that we can choose called “Register Participant” which is perfect as that’s what we need! Select it and click “Save + Continue”.
Step 16: Configure the Zapier Template
The Crowdcast template (within Zapier) is very simple. It requires an “Email”, “Event Code” and optionally, an “Attendee’s Name”. For the emails, click the plus sign on the right of the Email box and select your test email. To find your event code you will want to pop back into Crowdcast and browse the event you just created. You will notice that part of the URL is constructed by a code. For example, if we have an event URL of https://www.crowdcast.io/e/l4yxjmwf then “l4yxjmwf” is your event code.
To add the attendee’s name, click the plus sign and add the name in. Be sure to add a space in between the first name and last name.
Step 17: Test your Zap creates an attendee in Crowdcast
Click “Continue” on the “Edit Template” screen and then click “Send Test to Crowdcast”. Once you’ve done this, please navigate back to your Crowdcast event and look at the “People” section at the bottom of the screen. Now you should see that your test person is now attending your brand new event! How cool 🙂
Step 18: Copy the URL from Postman
Quickly pop back to Postman and copy the URL that you used to send into Zapier. It should now have FirstName, LastName and Email appended to the query string.
What is Apigee?
Apigee is a tool that allows you to describe your API so that it can be imported and consumed into PowerApps. You can do the same in Postman, but I find Apigee much easier to use. The Apigee team describe their service as follows:
“You have data, you have services, and you want to develop new business solutions quickly, both internally and externally.
With Apigee, you can build API proxies—RESTful, HTTP-based APIs that interact with your services. With easy-to-use APIs, developers can be more productive, increasing your speed to market.
API proxies give you the full power of Apigee’s API platform to secure API calls, throttle traffc, mediate messages, control error handling, cache things, build developer portals, document APIs, analyze API traffc data, make money on the use of your APIs, protect against bad bots, and more.” (source: Apigee docs)
Step 19: Get an account in “Apigee”.
Once you’ve created a free trial account in Apigee click on “new project” and then paste in the URL you copied from Postman into the box next to the “GET” label, as follows:
Step 20: Setup the “Program Info” tab.
On the Program info tab, add a Title, Description and version to your API.
Step 21: Setup the “API Info” tab
On the API Info tab give your “Operation Id” a name like “SendToZapier” plus add a summary of your choosing. Then click “Next Step ->” until you hit the “Open API Spec” tab.
Step 22: Setup the “Program Info” tab
We’re pretty much done now with Apigee. All we need now is to click the “Download Spec” and save the JSON file locally on your hard drive. Remember where you saved it as we’re going to need it in PowerApps.
Step 23: Build an app in PowerApps
Now we’re getting to the good part :). In this last section, we’re going to build a very simple UI that will take the first name, last name and email. It will also have a button that (when clicked) will register the new person in our Crowdcast event (by calling into Zapier).
The first thing you need to do now is to click custom connectors and choose “Create custom connector” and choose the option to “Import an OpenAPI file”. The format of the JSON we just exported was built against the OpenAPI specification so it will import into PowerApps just fine. [Read more on custom connectors].
Step 24: Load your JSON and name your Custom connector
In the dialogue that appears, you need to “import” the JSON file that you downloaded from Apigee. Give your custom connector a memorable name.
Step 25: Configure your custom connector
In this step, you may choose to give your connector an icon and some branding to make it easier to be identified in the future. For now, we will take the defaults and move onto the Security tab.
Step 26: Choose “No Authentication” for your security model.
The authentication type model we’re going to use is “No authentication”. The security model that we’re going to use is sufficiently secure as it’s secured by obfuscation meaning that it’s virtually impossible to guess the Zapier URL. However, you may find, depending on what you’re doing with Zapier that you need to explore better security models. As we’re just registering people for our event we are willing to secure this by relying on an obfuscated URL.
Step 27: Build an app in PowerApps
In the “Definition” tab you don’t need to change anything, but you do need to check that “FirstName”, “LastName” and “Email” are showing. Also, make sure that the response is working and valid (at the bottom of the tab).
Step 28: Test that the connection works
On the last step of the wizard, you will be testing that your connection to Zapier works and that you can add a new person into Crowdcast. To do this click “+ New connection” as below.
Step 29: A new connection is now visible
Verify that you can see your connection under “Connections”.
Step 30: Edit your connection
Now the connection is set up, click the pencil so we can continue with the test.
Step 31: Carry on with the test
Go back into your custom connector and make sure you are on the “Test” tab. You will now see the connection that you created is already selected under “Connections”. Add in a “FirstName”, “LastName” and “Email” and then click “Test operation”.
Step 32: Check for test success
Look at the “Response” section and verify that you get an “OK (200)” and a “status: “success”” in the “Body”.
Step 33: Also verify your user made it into Crowdcast
As a “belts and braces” check, go back into Crowdcast and verify that your new user is registered as a participant under “People”.
Step 34: Create an app from blank (in PowerApps).
By this stage, we know that our custom connector is working and sending people into Crowdcast. Now it’s a simple job of creating a simple PowerApps app to build a UI so that a PowerApps user can register a user as they wish.
Select the “+ Create” option from the left-hand menu and choose “Canvas app from blank”.
Step 35: Choose a “phone” optimised app
On the dialogue choose “Phone” and call it “Zapier Integration Demo” and click “Create”.
Step 36: Choose a Data Source.
Under the “View” menu select “Data sources” and click “+ Add data source”.
Step 37: Choose our newly created connection
As we’ve already set up the connection you can now select it from the options, as below.
Step 38: Build the UI!
You now need to add 3 text boxes and a button as shown below. Give each text box a meaningful name such as “Email”, “LastName”, “FirstName”.
Step 40: Now create the only line of code in this entire solution
Select the button and add a line of code like this:
OpenAPIZapierAPIProgram.SendToZapier(FirstName.Text, LastName.Text, Email.Text)
Step 41: Congratulations – your PowerApps is ready!
Well done your PowerApps is now ready to use, so you can now run it and make sure it adds a new participant when you click “Submit”. At this point, you should now be able to register new people on your Crowdcast event using PowerApps to gather the data and Zapier to send it over to Crowdcast!
Although the steps outlined above might appear like a lot, if you break it down, quite a chunk of this is testing that each step works. This solution only used 1 line of code, which was to wire up the button to call Zapier. Although this process utilised Crowdcast it’s just as easy to connect PowerApps to many other services that Microsoft Flow doesn’t already utilise which, at the time of writing, is around 600!
If Flow already supports your service then the recommendation is to utilise that, but if you want to easy to connect to a service that Flow doesn’t support then Zapier is an excellent choice!
Hope you enjoyed this in-depth tutorial and are now more confident in how to use Zapier with PowerApps!
Are you looking to hire a Powerapps professional like hughw?
Post a job below (even if it’s just a 15-minute Skype call), enter a few details and we will get to work on finding you some online help. Alternatively, you can also browse some existing MicroJobs.