Create a button that will make the browser into Full Screen (emulating F11)

[cha_cha]

Hello, is it possible to create a button in PowerApps that will make the browser tab where the app is open into Full-Screen mode?

[SudeepGhatakNZ · Accepted solution]

I don't think you can play with browser settings in the context of PowerApps.

You can however add &hideNavbar=true as a suffix to your URL (or have it Launch("http..etcetc............&hideNavBar=true) so that the Office365 bar along the top disappears

[poweractivate]

@cha_cha 

I believe it may be possible to do this.

However, the solution I have in mind, is somewhat complex to set up and implement, and it will also take me some time to prepare and test it. It is using a specific feature of Power Apps, which is a little bit more advanced than the standard functionality.

In case you are really interested in it, I can try to prepare you the solution, and the steps how you can make the solution, how you can use the solution, and a prepared version of the solution you can use more quickly with less setup steps from your end.

In the meantime, I am curious if there is a simpler solution than what I may have in mind.

I might wait for some time in case someone else has an easy solution, as I would like to know it as well.

I might keep an eye on this post.

If there is no solution given within some time, and in case I have the time to prepare it, I might consider to give you the solution I have in mind, which will ultimately give you a button in Power Apps that is emulating the native browser functionality of pressing F11 / toggling native browser full-screen, but from a button in Power Apps.

If you are interested in the solution, let me know.

[poweractivate · Accepted solution]

@cha_cha 

It is possible, but I don't think it is possible using "out of the box" functionality in terms of just using an existing Power Apps Control in a Canvas App.

The only way I am aware of, is using a custom Component, specifically one created with the

 Power Apps Component Framework

then using it from Power Apps as if you were using out of the box Power Apps Controls.

I made a custom code component for you, called FullScreenControl 

I attached it to the bottom of this post, so you could import it to your Environment, and start using this Code Component in your Power Apps Canvas App. You can do this without having to build it from the source code yourself.

1. Follow all steps in Enable the Power Apps component framework feature

2. Download the Zip file attached at bottom of this post FullScreenControl_solution.zip. Now follow all the steps in Import Solutions  - it should end up coming in as a Managed Solution:

3. Follow all steps in Add components to a canvas app

4. Add the Custom Control to the Screen. Make it as small as you can, it's only there to do things in the background, it doesn't show anything on it. 

5. Add a Button Control (the regular out of the box Button Control), For OnSelect use this formula:

Set(myToggleVar,!myToggleVar)

and for Text property put something like "F11"

6. Add another Button Control (the regular out of the box Button Control), For OnSelect use this formula:

Set(myEnabledVar,!myEnabledVar);Set(myToggleVar,myEnabledVar);

and for Text property put something like "Enable/Disable"

7. Add a Label Control, and then for Text put this:

"F11 Button is Enabled? : " & myEnabledVar

8. For the buttonToggleProperty custom property of the custom component FullScreenControl1 use this formula:

myToggleVar

9. For the buttonEnabledProperty custom property of the custom component FullScreenControl1 use this formula:

myEnabledVar

10. Save and Publish the app.

11. Play the App.

12. Notice the F11 Button on the Screen should not work.

13. Press the Enable/Disable button.

14. Now press the F11 Button on the Screen - it should be working now.

Some potential areas of improvement for this code component:

1. If someone is pressing F11 for real on their keyboard, and then after that, presses the Power Apps "F11" button you added to the Screen, the functionality might not work properly especially in the final published app ran in the browser, and particularly when the real F11 key caused fullscreen to be on, and after that the on-screen button is pressed, this may not cause it to exit full screen mode. The component source code may need to be adjusted further for this to work correctly for this scenario. However, if only the on-screen button is used, it should work fine.

2. This Component might only work properly with &hideNavBar=true in the URL bar of the published app. The component source code may need to be adjusted further for this to work properly with the nav bar on there. NOTE: It might work fine actually, even without &hideNavBar=true in the URL bar

3. It might be better to use the new way to make Code Components in general - I created a Standard Code Component instead for this one. 

Source code:

Beware: I would advise you not to proceed past this point, unless you really want to make modifications to the Component itself. You can just use the Zip file I provided instead and the steps above only, without having to do any of the below. The steps below may require you to do more than use Power Apps itself - you have to modify the Power Apps Component itself - and this uses actual code, not "low-code".

If you really want to try this below anyway, please go ahead and proceed. 

You may find the source code of the Component here:

https://github.com/poweractivate/FullScreenControl/

The steps to build from source are:

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

2. Download and install

latest node.js LTS version 
https://nodejs.org/en/download/

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 from Github repo to C drive, then issue these commands in Terminal from Visual Studio Code:

cd C:\FullScreenControl
mkdir FullScreenControl_solution
cd .\FullScreenControl_solution\
npm install
pac solution init --publisher-name poweractivate --publisher-prefix powact
pac solution add-reference --path ../
msbuild /t:rebuild /restore /p:Configuration=Release

Leave out the /p:Configuration=Release to get an unmanaged solution - leave it in there to get a managed solution.

If you get any errors, check all of the below, then retry the command that you got the error on again.

If you get errors, check the below:

Check that you have latest node.js installed, then try again, especially if your error is on the npm install part.

Also make sure the running node.exe process has access to the internet for this to succeed.

If you receive an error in MSBuild, during

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

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 after the successful installation of the developer pack, try the command again that had the error, 

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. 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 the command again that had the error.

8. Take the generated Zip file under C:\FullScreenControl\FullScreenControl_solution\bin\debug or C:\FullScreenControl\FullScreenControl_solution\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

9. 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.

10. Follow all the steps I gave in the beginning of the post from this point forward.

To update source code of the Code Component after it was added to a Canvas App, and apply these changes to the existing Canvas App:

1. Make your source code changes.

2. Go to C:\FullScreenControl\FullScreenControl_solution\src\Other\Solution.xml and increment the Version number:

   <Version>1.1.9</Version>

For example, change 1.1.9 to something higher, such as 1.1.10

3. Go to  C:\FullScreenControl\ControlManifest.Input.xml and make the same change to the version number here too:

<control namespace="FullScreenControlNamespace" constructor="FullScreenControl" version="1.1.9" ....

For example, change 1.1.9 to something higher, such as 1.1.10 - I recommend to match the version number that you chose for Step 2.

4. From terminal issue this command:

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

5. Import the Zip file (Solution) into Dataverse under Solutions. You should be told that the solution is going to be upgraded since the version number is now different (if not, repeat all the steps again above, making sure to do Step 2 in particular above correctly). Go to Advanced and then select the radio button near Update (i.e. to replace all files).

6. Close the app editing session for the app containing the component, and then open it up again for editing. When warned with a prompt about unsafe code, go ahead and accept it. You should now get another prompt to update the code component (if not, repeat all the steps again above, making sure to do Step 3 in particular above correctly). Accept this prompt as well to update the code component.

7. You should see the changes - as soon as right away in the Power Apps editor - with a green success message about code component being updated successfully. Now make a small change like drag some Control slightly to a different position, and then save and publish the app to see it in Play mode.

Actually creating, modifying and/or debugging custom code components on a regular basis may require you to set up some really specific things, so that you can do this more quickly and more often, and more reliably - I won't go into that for the moment, as this may involve going into more detail even than this.

For now, let's say you simply change the code component this way with the steps above.

Whenever you see a breaking change, such as an error saying "Error loading component" - you may need to go back to a last known good configuration (such as the version I provided) and make sure you can at least import that one back in.

If you are not comfortable doing any source code changes at all, I'd recommend just using the ZIP file I already provided, and only the first steps I provided in the early parts of this post to import this zip file into Dataverse as a managed solution, and use it directly as a Code Component in Power Apps using the steps I gave in the beginning of this post, and without needing to worry about the Code Component's source code at all.

See if it helps @cha_cha 

[cha_cha]

Hello @poweractivate 

I really appreciate the time you have spent answering my question. I will definitely try it out during my free time. As of now, my team moved to a different project that also needs my attention. Thank you so much for your help. I will try to contribute to your work whenever I can. Thank you so much.

[rupakshrestha]

@poweractivate This is amazing. Works brilliantly on my monitor even without hidenavbar=true. However, it does not exit full screen on a laptop screen. What could be the reason? Is there a fix?