Using microsoft form within power apps

[varunnair91]

Hi,

We use Microsoft Forms heavily for internal processes. I'm trying to create an App using power apps to have all the forms in one place. I've tried using the "launch" function, but that opens the webpage and takes you out of the app. Would be good if the form just loaded within the app. I've tried "Forms Pro survey", but thats depricated.

Is there any other way of doing this?

Thanks!

[Pstork1]

To the best of my knowledge there is no way to host an MS Form inside a Power App.

[poweractivate]

@varunnair91 

I think it might be possible.

It may be possible to do this using custom code components. If I have time I might prepare you an example how to set this up specifically for a Microsoft Forms form embedded in a Canvas App.

If you want to try to figure out how to set it up yourself right now in the meantime, please try these as starting point yourself:

Implementing a IFRAME component - docs.micrsosoft.com

https://docs.microsoft.com/en-us/power-platform/alm/component-framework

https://docs.microsoft.com/en-us/power-apps/developer/component-framework/component-framework-for-ca...

[365-Assist]

May not be exactly what you need but may help you with ideas. I have made a video that shows how to capture MS Forms results into a Power App (Using in Power Automate). Creating a Complaints DB with MS Forms, Model Driven Power Apps (Dataverse) and Power Automate - You...

--------------------------------------------------
Please Accept as Solution if it solves your question. Or just give it a Thumbs Up if it is helpful as can help others.

Subscribe: https://www.youtube.com/channel/UCFpvUlpx84FuIPOdInGKMTw
Twitter: https://twitter.com/assist_365

Regards
Darren Lutchner - 365 Assist

[poweractivate]

@varunnair91 

Try it like this:

(please note, unfortunately, even this solution does not actually put the form in the Canvas App when I tried it in the web browser - it only puts a link to the form kind of just like Launch.

I did not try and see what it looks like on an iOS device - there is some possibility it works there but I do not know for sure.

In case it helps as a general starting point I provide it anyway just in case)

1. Follow all steps at Enable the Power Apps component framework feature - docs.microsoft.com

2. Download PowerApps Samples from GitHub here:
https://github.com/microsoft/PowerApps-Samples

3. Download Visual Studio Code here:
https://code.visualstudio.com/download

4. Install Visual Studio Extension Power Platform Tools for Visual Studio Code
Using Power Platform Tools for Visual Studio Code - docs.microsoft.com

5. In Visual Studio Code go to Terminal -> New Terminal

6. Extract the Power Apps Samples to C drive, and follow all these steps here issuing commands to the terminal as follows:

and then 

If you receive an error in MSBuild, it must be added to the path environment variables first before continuing. After doing it, use the command

$env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")

to reload the environment variables in this PowerShell session right after adding the correct MSBuild.exe containing directory to the PATH environment variable.

If you get any error saying you need to get the developer pack for the .net version, you should follow what it says and install the required developer pack version, then retry the command again after the successful installation of the developer pack.

Note also that for this build to work successfully, your running MSBuild.exe process will require access to the internet while it is run, to process NuGet dependencies. You may need to allow it access for it through firewall, if it is currently being blocked by firewall.

7. Now run the following command

msbuild

8. If there is any issue, try with this command instead of just /t:restore:

msbuild /t:rebuild /restore

(note, you may prefer to replace
msbuild /t:rebuild /restore
above, with

msbuild /t:rebuild /restore /p:Configuration=Release

as it may create a more optimized version of the component)

Note: The release one also is different in the kind of solution it creates. The Release mode creates a managed solution, as opposed to an unmananaged solution.

9. If there is still an issue, make sure you have latest node.js LTS version installed
https://nodejs.org/en/download/

Then try step 8 again.

10. If there is still an issue, try installing the Power Platform CLI tools (not the VSIX extension) here:

Power Platform CLI for Windows - docs.microsoft.com

 then try Step 8 again

11. If there is still an issue, try running

npm install

Make sure the running node.exe process has access to the internet for this to succeed.
Then retry step 8 again after that.

12. Take the generated Zip file under bin/debug or bin/release and import it into Dataverse Environment that the Canvas App is in.

For more guidance how to import a solution, check here:

Import a Solution - docs.microsoft.com

13. Go to Canvas App in Power Apps Studio, and go to Insert -> Components, then More Components. There should be two tabs under Import components - Canvas and Code. Click on the Code tab, since it is a Code Component. If it is not showing, click on Refresh button inside the tab. If this does not work, then close and open Power Apps Studio again and it should show up.

The Iframe component should be available to add here.

If it is not, click on the Refresh button in the Code tab until it shows up. Then click on it and click Import.

For more guidance on this step, check here:

Add Components to a Canvas App - docs.microsoft.com

14. Simply put the Microsoft Forms form URL in the component for stringProperty, resize the component to your desired size, and there you have it! You have an embedded Microsoft Forms form directly in the Canvas App!

15. Well... not exactly. So this Microsoft sample component is apparently just a Bing map component. You would change the latitude and longitude and it shows only bing map component.

Let's do a very quick repurposing of this same iframe component for Microsoft Office Forms.
To do so, edit the index.ts file, change the lines around 73 to 74 or so to:

const bingMapUrlPrefix = "https://forms.office.com/Pages/ResponsePage.aspx?id=";

const bingMapUrlPostfix = "&fromComponent=PowerActivatePCFSample";

Also change iFrameSrc to something like this:

const iFramesrc=`${bingMapUrlPrefix + stringProperty + bingMapUrlPostfix}`;

Also add this line above the line starting with const latitude:

const stringProp = context.parameters.stringProperty.raw;

Also change method signature of

private updateBingMapURL(latitude: number, longitude: number): void {

to

private updateBingMapURL(stringProperty: string | null): void {

change the line starting with latitude && longitude &&

to

latitude && longitude && this.updateBingMapURL(stringProp);

16. Now save the file.

17. Now repeat Steps 8-11.

18. Remove the previously imported iframe component from dataverse. If it was not built in release mode, it might be an unmanaged solution when you imported it, in that case deleting the solution will not do it, you should go in the solution and delete the component itself and select "Delete from this environment". 

And now, proceed with steps 12-14.

19. See if it works now.

20. If it is still using the previous Bing Map version of the component rather than your edited component no matter what you attempt, then try creating a new Canvas App, reimporting the component, then adding the component to a Screen, then trying to add the Forms form id as stringProperty. and seeing if this works better.

For more guidance on updating the code component on an existing PowerApp without having to make a new app, which includes making sure it has a different manifest file version property value prior to the rebuild, reimporting the solution, and making sure to publish all customizations, close and reopen the app in Power Apps Studio and seeing that it ask you to update the code components, check here:

Update Existing Code Components - docs.microsoft.com

Try changing the LatitudeValue and LongitudeValue to something random as well each time and see if the component updates more quickly with your new values.

21. It worked for me, but even after trying all this, I get a button saying "Fill out the form" with a link to the form (the link works correctly and uses the survey id populated for stringProperty), instead of the actual form itself in the Canvas app.

(I did not try it on an iOS device - it's possible this way might work on an iOS device from the PowerApps mobile app on the iOS device where it shows it embedded, but I'm not sure if that is the case as I did not try it on an iOS device).

While it may still be possible to do this in some way with Power Apps Component Framework, it may not be possible to do it with just an IFrame and for it to be embedded fully without having to click the link. 

Instead, a more customized Power Apps Component, or perhaps even another kind of approach altogether, may be needed here.

In case all of the above helps as a starting point, I provide it here in case. If I consider an alternate solution to this, I might provide it later on.

[varunnair91]

Thanks for this! I'll try this and see how it goes.
I think iframe is the best option at the moment. I can get the iframe code from the Microsoft Form, and will then try to embed it using the steps you provided.
Will let you know how it goes!

[varunnair91]

@poweractivate 

I've followed your steps until step 8.

Didn't work, so I did 9 and 10 as well, and retried. Still no luck.

How do I install npm? I've done it via command line, but I think it isn't getting recognized within Visual Studio Code.

[poweractivate]

@varunnair91 

After making changes that change the system environment PATH variables, including installation of node.js itself, you either need to reboot the computer, or instead, you can keep the same PowerShell session and just issue this command in the shell:

$env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path","User")

After that try and see if npm exists after that.

Check if it helps @varunnair91 

I will note @varunnair91 some issues you might run into even if you can get all those steps to work:

1. In the end, it might still prompt to click a link, even after all my steps.

Something interesting to note, is that before the Forms Pro Survey input was deprecated and was still in preview, it may have been doing the same thing according to discussions like: Embedding Forms in PowerApp 

According to that discussion, and according to a screenshot someone provided in that discussion, the now deprecated control would show a screen almost identical to what my modified Iframe control shows on web - just an embed of the Forms logo and a call to action link to click on to open the form in a separate window. 

Also, according to that discussion (but I did not test it), iOS devices would show the form inside the app, but other devices like Android or web would show the exact same prompt to click the link.  It seems like the solution that person went with at the time, as you could see from the discussion, was to use only iOS devices.

That possibly indicates that my steps, if completed, might end up with a successfully embedded form on iOS devices, as we are essentially almost attempting to recreate the deprecated control by ourselves here with these steps. I did not test it, so this may not be true. If I ever do test it I might let you know.

I'll need to note that although I am not so familiar how the deprecated control worked, it's possible it worked differently than my modified Bing Frame custom control would work. There is no guarantee that the steps I provided would lead to the form being embedded even on iOS devices. There may have also been further changes to Forms ever since 2019 when the discussion took place. The only way to know if it works even on iOS devices, is to test it on an iOS device and in a similar way as done in the discussion.

I don't know if the deprecated control still even works anymore, but if it still does, the deprecated control could be put on the page to compare with the iframe control.

If I have some time, I might check into this more, and see if I could provide you with some more detail on a complete solution with either more detail on this approach that leads to successful embedding, and/or other approaches if applicable.

2. Because of #1 above and depending on your use case, then unfortunately it may be easier to just use Launch unless I could look into it and provide you with more detail on making this really work or an alternative, better way to do it. 

@varunnair91 I have been thinking about the issue you brought up as I find it possibly useful for something I may need as well, so I might continue to check into it and let you know if I have some time as I find what you brought up interesting.

[poweractivate]

@varunnair91 

Hello I have an update on this and great news for you - I actually got this to work successfully!

A Microsoft Forms Form can be embedded directly into a Canvas App using this Custom Component!

After I tested it more,

Microsoft Forms shows the link when the Iframe embed is less than exactly 320px x 320px.

In the first version I gave, I did not customize the component's CSS, and the size was smaller than this.

So that is why I got the prompt saying to click to open.

That is shown when the Iframe is smaller than 320px x 320px.

When the size is 320px x 320px or bigger, the component works.

In IFrameControl/css/IFrameControl.css

 /*//need to be at least 320px by 320px*/
.SampleNamespace\.IFrameControl .SampleControl_IFrame
{
    width:100%;
    min-width: 320px;
    min-height: 320px;
}

When I customize the size, it works and the Iframe shows the actual Microsoft Forms form inside!

Not only that, but I tested in the Canvas App in the browser in Preview mode and in Publish + actual Play mode - and it really worked! I was able to interact with the survey, and submit a response directly from the Canvas App!

There are probably some improvements that can be made to this Component, but hopefully you will find it useful even as it is now!

Please note I only tested it in the Chrome browser. I did not test my solution on any mobile devices. I suspect this solution should work properly on both the iOS and the Android Power Apps mobile apps, but please note, I did not test this on mobile, so the only way to be sure, is to make sure to test it first and see if it really works.

In case you want to skip the really complicated development steps i gave in my post, you may find attached sol.zip and take a huge shortcut.

Just do Step 1 (required)

1. Follow all steps at Enable the Power Apps component framework feature - docs.microsoft.com

---

then skip all the other steps, doing only the steps 12, 13, and 14

12. Take the generated Zip file under bin/debug or bin/release and import it into Dataverse Environment that the Canvas App is in. Download sol.zip attached to this post (at bottom of this post) and import it into Dataverse Environment that the Canvas App is in. The solution should import in as a managed solution. 

For more guidance how to import a solution, check here:

Import a Solution - docs.microsoft.com

13. Go to Canvas App in Power Apps Studio, and go to Insert -> Components, then More Components. There should be two tabs under Import components - Canvas and Code. Click on the Code tab, since it is a Code Component. If it is not showing, click on Refresh button inside the tab. If this does not work, then close and open Power Apps Studio again and it should show up.

The Iframe component should be available to add here.

If it is not, click on the Refresh button in the Code tab until it shows up. Then click on it and click Import.

The Solution may still be taking time to import, so you may need to click Refresh a few times after each 10-20 seconds if it is still not there.

For more guidance on this step, check here:

Add Components to a Canvas App - docs.microsoft.com

14. Simply put the Microsoft Forms form URL in the component for stringProperty, resize the component to your desired size, and there you have it! You have an embedded Microsoft Forms form directly in the Canvas App!

For example, 

my full form URL:

https://forms.office.com/Pages/ResponsePage.aspx?id=_lF6el5U5EKny6h5f6PkAc5BBzhkjZBCor-F8FG6oe1UMFJE...

you would use for stringProperty the following value:

 _lF6el5U5EKny6h5f6PkAc5BBzhkjZBCor-F8FG6oe1UMFJEUUpITVNVV0JTM1Y4QjYxQkhGV05PRS4u

(also see if changing the latitude/longitude repeatedly helps make it show up faster)

---

In case you still really want to follow those steps to build the Component yourself, and in case you want to try and modify it further yourself, etc. then you can find the source code of my modified component here to use as a guide along with the complete steps I gave initially:

https://github.com/poweractivate/FormsIFrameControl

Instead of looking for and modifying the lines of code manually as given in Step 15 initially, just use the source code from this repo instead. However, you will need to perform all the other steps, which are substantially more difficult than if you just use the sol.zip file I provided in this post (it is at the bottom of the post).

@varunnair91 hopefully you are pleased to check out this potential working option you can consider, to do something that, I also for a split second at first glance though there was 'no way' to do  - to embed a Microsoft Forms Form directly inside a Canvas App!

Check if it helps @varunnair91 

Please make a note of two things:

1. I intentionally made this Component somewhat difficult to change the stringProperty of the Component. This is because by default, the Component would reload the form every single time it was moved, resized, etc. This could cause some problems as it could load the same form multiple times in very rapid succession. So I have it specifically only check for updated value when you update either the Longitude or the Latitude (one of the two numeric fields) to make this happen much, much less often - so it will no longer try to reload anything if it is moved, resized, etc. However, as a consequence, you will not see the Component update when you put your Form ID into the stringProperty.  You'll need to 

• copy and paste the Form ID into stringProperty - and then
• put a random unique value in Longitude or Latitude - try to do this a couple of times if it doesn't work the first time - then it will trigger the update and it should load the form into the custom Component.

2. The width auto-fits the Component - but right now, the height does not auto fit and stays at 320px. Hopefully it is useful to you even like this. As a quick fallback, you can use alternate version attached sol2.zip, where I have set the height at 800px if you prefer it bigger for the moment. I might make an update if I have time where the height will fit the component height, and if applicable any other possible improvements but for now, height is fixed at 320px, and only the width auto fits the Component width. 

[DeoCayanan]

For those who are still looking, check this solution: https://pcf.gallery/responsive-iframe-pcf-control/