How to pass field values from a Canvas App to Power Automate(flow) – Part 1

Let’s see a simple example. I have a canvas app that has multiple input fields. 

Once user submits the form, we need to send a confirmation email to the user with all submitted information.
To do this, you need create a JSON object that contains all form values and pass it to Power Automate.

Creating FormInfo Json Object

First create a collection and add all inputs as string values.
For Button1 OnSelect query, we need to first create this collection.
 

Collect(
    FormInfo,   {
     lname: lastname_input.Text,
        fname: firstname_input.Text,
        email: email_input.Text,
        account: account_input.Text,
        dob: Text(DatePicker1.SelectedDate)    }
);

To further explain above step, I am creating five new variables (lname, fname, emil, account, dob) and assigning form input string values to them.

After that, we need to convert this collection to a JSON object.
Set(    FormObj,    JSON(FormInfo));
Now we can pass this new Object to Power Automate flow.
Before doing this, let’s copy the full query for OnSelect into a text file.
Then select Action > Power Automate and “Create a new flow”

This will open flow designer in another tab
Select “Power Apps Button” as the template and let’s start creating the flow.

Creating the Form Submit flow in power automate

Our main actions of the workflow would be:

a. Get FormObj JSON object from PowerApp – PowerApps trigger

b. Parse JSON – parse JSON actionc. Get the values and put them in an email  – Send Email Action

Note  – Any connection/action that we want to use in the flow should be added to the flow before saving the flow and adding to PowerApp. If you add any actions after it was added to PowerApp, it could give an error like this:


Unable to process template language expressions in action 'Send_an_email' inputs at line '1' and column '2836': 'The template language expression 'json(decodeBase64(triggerOutputs().headers['X-MS-APIM-Tokens']))['$connections']['shared_office365_1']['connectionId']' cannot be evaluated because property 'shared_office365_1' doesn't exist, available properties are 'shared_office365'. Please see https://aka.ms/logicexpressions for usage details.'.

Flow Design Steps

  • a. Get FormObj from Power Apps – Select PowerApps Trigger
  • b. Add – “Parse JSON” action and Select “Body” as the content and “{}” as schema
  • c. Add “Send an email” action and use “Ask in PowerApps ” as the body
  • d. Let’s rename the flow to be more meaningful
  • e. Save

According to this flow, any value that is coming through power apps connector should get reflected in the email body. The reason we used a dummy JSON Parse action was to create that initial connection with PowerApp.


Remember : You will get errors if you start adding actions to the flow after you connect it to Power Apps. Therefore, you need to add all the connections/actions before adding the flow to your PowerApps button.

Passing the FormInfo object to flow

Once the flow is configured, save it and open the power app again. You will see the new flow under  your power app.
Click on the flow and it will be added to the button. This will remove the existing OnSelect query.

Since we copied the query earlier to a text file, we can copy the query again from it and paste it in the button OnSelect query.
Along with that, we need to add below code to pass the JSON object to flow.
FormSubmit.Run(FormObj);
Here is the complete Query

Collect(FormInfo,{        
  lname: lastname_input.Text,
  fname: firstname_input.Text,
  email: email_input.Text,
  account: account_input.Text,
  dob: Text(DatePicker1.SelectedDate)    });

Set(FormObj, JSON(FormInfo));
FormSubmit.Run(FormObj);


Since we are adding all form submissions to collection, this array/collection will contain values since the beginning. Therefore, we need to clear the collection before each submission so that only current record will be saved in the collection and then transferred over to flow.
For this, we can add Clear(FormInfo); to the button OnSelect query.

Now let’s test the application

You should now receive an email containing the power apps object 

In my next post, we will see how to parse the JSON object in flow and get the field variable values so that we can append to any desired email format.


Happy Learning!

Go to Part 2  – How to parse JSON objects and get variable values



Categories: PowerApps, Uncategorized

Tags: , , ,

1 reply

Trackbacks

  1. Export canvas app charts in a printable format – Part 1 – PowerPlatform Solutions

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: