cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

Creating repsonsive powerapp using global variables

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

2 ACCEPTED SOLUTIONS

Accepted Solutions
v-monli-msft
Community Support
Community Support

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

Community Support Team _ Mona Li
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

Anonymous
Not applicable

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

View solution in original post

4 REPLIES 4
v-monli-msft
Community Support
Community Support

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

Community Support Team _ Mona Li
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Anonymous
Not applicable

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

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
Skilled Sharer
Skilled Sharer

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/41788459F38262-F71A-432D-B8E2-8E48ECF3F188_1_101_o.jpeg

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on June 15, 2022 at 8am PDT.

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Top Kudoed Authors
Users online (1,646)