Creating repsonsive powerapp using global variables

[Anonymous]

Greetings!

I'm curently working on a powerapp that should work on both desktop and mobile - Tadaaa! Responsive powerapps to the rescue. However, there is an issue: Whilst it is possible to create responsive elements, it gets very tedious(and further down the road possibly dangerous) to create each single element individually set their responsiveness(X, Y Width, Height, Etc.). What I then tried to do is set a global variable that could contain a the code (in this case a Switch) determining a datacards size based on screen size and parent width.
If I try setting up the variable in App's onStart I get an "Invalid use of "." " error. This kinda makes sense since I use the Parent.Width keyword. But if I try to set the variable in one of the datacards themselves I get this error: " Behavior function in a non-behavior property. You can't use this property to cjange values elsewhere in the app".

Does this mean that I would have to copy paste my code onto each datacard (or element) in order to make the PA responsive? Is there no other way?


Heres the variable I'm trying to set (red being the code I'm currently trying to avoid duplicating in each of my datacards):

Set(setSize,Parent.Width *
Switch(MainScreen.Size,
ScreenSize.Small, 1,
ScreenSize.Medium, 1,
ScreenSize.Large, 0.6,
ScreenSize.ExtraLarge, 0.6,
0.25)
)

//PNman

[v-monli-msft · Accepted solution]

Hi @Anonymous ,

To achieve this, I'm afraid that you will need to set each control’s Width property if you want the control to occupy a different fraction of the screen width on screens of different sizes. 

For more information about how to use new screen properties for responsive canvas apps, you could take a look at:

https://powerapps.microsoft.com/en-us/blog/new-properties-for-responsive-canvas-apps/

Regards,

Mona

[Anonymous · Accepted solution]

Hi Mona,

Alright. I kind of expected that, but it's nice to know anyway.

I'll share my "solution" to the problem. Instead of having global variables, I set a "master" input whose controls define the x/height/etc of other inputs. For instance:

Say I have textInput1, textInput2 and textInput3. I want them to have the same responsive width based on screen size.
For the width of textInput 1 i put in the value:

"Parent.Width *
Switch(MainScreen.Size,
ScreenSize.Small, 1,
ScreenSize.Medium, 1,
ScreenSize.Large, 0.6,
ScreenSize.ExtraLarge, 0.6,
0.25)
"

For the following textInputs I simply set their width to "textInput1.Width". This way I can control all my elements from at single place (thereby essentially creating a variable).

//PNman

[robejo77]

I used the following to create a "Grid" template similar to Bootstrap.  Then I set widths using the variables.    After adding you will have to restart the browser in your design window so the apps screen size is passed to the variable.   Hope this helps. 


//Grid//
Set(_Col1,(App.DesignWidth/12));
Set(_Col2,(App.DesignWidth/12)*2);
Set(_Col3,(App.DesignWidth/12)*3);
Set(_Col4,(App.DesignWidth/12)*4);
Set(_Col5,(App.DesignWidth/12)*5);
Set(_Col6,(App.DesignWidth/12)*6);
Set(_Col7,(App.DesignWidth/12)*7);
Set(_Col8,(App.DesignWidth/12)*8);
Set(_Col9,(App.DesignWidth/12)*9);
Set(_Col10,(App.DesignWidth/12)*10);
Set(_Col11,(App.DesignWidth/12)*11);
Set(_Col12,(App.DesignWidth/12)*12);

[KickingApps]

Here is a link to a template that I created for responsive design.  I use this as a reference for all my responsive apps.  I typically have two screens open - Screen 1 - template (layout component), Screen 2 - App (in design).

I lay everything out on the template screen to build the frame and then plug the property values into the control in the app I am designing. You will have to include the component in the actual app as a point of reference.  If you think this would be helpful and want more specific walk through, let me know. 

https://powerusers.microsoft.com/t5/Community-App-Samples/Responsive-Design-Template/td-p/417884