A UI element that contains one or more other controls in an app.

Description

Most apps have multiple Screen controls that contain Label controls, Button controls, and other controls that show data and support navigation.

Key properties

BackgroundImage – The name of an image file that appears in the background of a screen.

Fill – The background color of a control.

Additional properties

ImagePosition – The position (Fill, Fit, Stretch, Tile, or Center) of an image in a screen or a control if it isn't the same size as the image.

OnHidden – The behavior of an app when the user navigates away from a screen.

OnVisible – The behavior of an app when the user navigates to a screen.

OnStart – The behavior of the app when the user opens the app.

  • The formula to which this property is set runs before the first screen of the app appears. Call the Navigate function to change which screen appears first when the app starts.

  • You can't set context variables with the UpdateContext function because no screen has appeared yet. However, you can pass context variables in the Navigate function and create and fill a collection by using the Collect function.

  • When you update an app, the formula to which this property is set runs when the app is loaded into PowerApps Studio. To see the impact of changing this property, you'll need to save, close, and reload your app.

  • The OnStart property is actually a property of the app, not the screen. For editing convenience, you view and modify it as a property on the first screen of your app. If you remove the first screen or reorder screens, this property may become hard to find. In this case, save, close, and reload your app, and the property will reappear as a property of the first screen.

Related functions

Distinct( DataSource, ColumnName )

Example

  1. Add a Radio control, name it ScreenFills, and set its Items property to this value:
    ["Red", "Green"]

    Don't know how to add, name, and configure a control?

  2. Name the default Screen control Source, add another Screen control, and name it Target.

  3. On Source, add a Shape control (such as an arrow), and set its OnSelect property to this formula:
    Navigate(Target, ScreenTransition.Fade)

    Want more information about the Navigate function or other functions?

  4. In Target, add a Shape control (such as an arrow), and set its OnSelect property to this formula:
    Navigate(Source, ScreenTransition.Fade)

  5. Set the Fill property of Target to this formula:
    If("Red" in ScreenFills.Selected.Value, RGBA(255, 0, 0, 1), RGBA(54, 176, 75, 1))

  6. From Source, press F5, click or tap either option in the Radio control, and then click or tap the Shape control.

    Target appears in the color that you chose.

  7. On Target, click or tap the Shape control to return to Source.

  8. (optional) Click or tap the other option in the Radio control, and then click or tap the Shape control to confirm that Target appears in the other color.

  9. To return to the default workspace, press Esc.