Merge pull request #9484 from MicrosoftDocs/gachasta-patch-1

Adding Auto mode and removing some restrictions

Author: sericks007

powerapps-docs/mobile/optimize-for-devices-controls.md

@@ -1,57 +1,34 @@
 ---
-title: Optimize for devices controls (preview)
+title: Optimize for devices (preview)
 description: Learn which controls and properties are supported for device-optimized screens.
 author: anuitz
 ms.topic: conceptual
 ms.custom: canvas
 ms.reviewer: sericks
-ms.date: 03/14/2024
+ms.date: 05/01/2024
 ms.subservice: canvas-maker
 ms.author: anuitz
 search.audienceType: 
   - maker
 contributors:
-  - sericks
-  - anuitz
+- gachasta 
+- sericks
 ms.contributors:
 - devangpandya
 ---
 
-# Optimize for devices controls (preview)
-
-[This article is prerelease documentation and is subject to change.]
-
-For a screen to be optimized for devices, it must use controls that are supported natively. You can filter the control **Insert** pane to only show device-optimized controls. 
+# Optimize for devices (preview)
 
+For a screen to be optimized for devices, it must use controls that are supported natively. You can filter the control Insert pane to only show device-optimized controls.
 :::image type="content" source="media/optimized-for-devices-control-filter.png" alt-text="The Insert pane is filtered to only show controls that are device-optimized.":::
 
 > [!Important]
-> - This is a preview feature.
+> - This is a preview feature. Documentation is subject to change.
 > - Preview features aren't meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.
 
 ## Device-optimized controls
 
-The following controls are available for screens that are optimized for devices. All other controls are currently unsupported.
-
-### [Modern controls](../maker/canvas-apps/controls/modern-controls/modern-controls-reference.md)
-
-- Button
-- Check box
-- Date picker
-- Text
-- Text input
-- Toggle
-
-#### Turn on modern controls
-
-Makers must complete the following steps to turn on modern controls and themes for an app.
-
-1. Sign in to [Power Apps](https://make.powerapps.com/?utm_source=padocs&utm_medium=linkinadoc&utm_campaign=referralsfromdoc).
-1. In the navigation pane, select **Apps**.
-1. Select an app.
-1. Select **Settings** in the command bar.
-1. In the **Settings** window, select **General**.
-1. Turn on the **Modern controls and themes** option.
+The following controls are optimized for iOS and Android devices. All other controls are currently unsupported. A screen that has one or more unsupported controls automatically renders in a web view instead of native UI. Learn more: [Optimize for devices overview](optimize-for-devices-overview.md).
 
 ### [Controls](../maker/canvas-apps/reference-properties.md)
 
@@ -64,6 +41,7 @@ Makers must complete the following steps to turn on modern controls and themes f
 - Circle
 - Components
 - Container (horizontal and vertical included)
+- Form
 - Gallery (vertical, horizontal, flexible height)
 - Icon (all icons supported)
 - Image
@@ -73,34 +51,39 @@ Makers must complete the following steps to turn on modern controls and themes f
 - Text label
 - Timer
 
-## Unsupported controls
+### [Modern controls](../maker/canvas-apps/controls/modern-controls/modern-controls-reference.md)
+
+- Button
+- Check box
+- Date picker
+- Text
+- Text input
+- Toggle
+
+Learn more: [Overview of modern controls and themes in canvas apps](../maker/canvas-apps/controls/modern-controls/overview-modern-controls.md)
 
-If a screen is set for optimization for devices, but has an unsupported control, you see an error message in a box.
+## Unsupported controls
 
-:::image type="content" source="media/optimized-for-devices-control-error.png" alt-text="The error that shows when an unsupported control is on a screen set to optimize for devices.":::
+If a screen has an unsupported control, the screen automatically reverts to render with a web view.
 
 ## Device-optimized properties
 
-Some properties must be configured so they're optimized for devices. For example, consider the [barcode reader](../maker/canvas-apps/controls/control-barcodereader.md) control. The maker can select **Scan Inline** for the **Scanning mode** property. In Power Apps Studio, when this mode is selected, the control displays as a warning box indicating the control only works on mobile devices. On a device, in a screen optimized for devices, the control displays a camera feed to enable barcode scanning.
+Some properties must be configured so they're optimized for devices. For example, consider the [barcode reader](../maker/canvas-apps/controls/control-barcodereader.md) control. The maker can select **Scan Inline** for the **Scanning mode** property. In Power Apps Studio, when this mode is selected, the control displays as a warning box indicating that the control only works on mobile devices. On a device, in a screen optimized for devices, the control displays a camera feed to allow barcode scanning.
 
 ## Known limitations
 
 Note the following limitations with the 'optimize for devices' feature.
 
-- Only the **Segoe UI** font is supported. If a control is using another font, it displays the Segoe UI font instead. Due to the differences in fonts, the control can take up more or less space than expected. We recommend that you use the Segoe UI font for device-optimized screens.
-- The **Image** control, when showing an SVG, only supports the fit and stretch image position options. Its default behavior is to fit, if another option is selected. All other image types work as expected for all image positions.
-- In the **modern Text** control, the **Semi-bold** and **Medium** font weights aren't supported on Android devices. It displays a regular font weight instead.
+- The **Image** control, when showing an SVG file, only supports the fit, fill, and stretch image position options. Its default behavior is to fit, if another option is selected. All other image types work as expected for all image positions.
 - In the **modern Text input** control, the **Value** property, when set to a Power Fx variable, isn't displayed at first navigation. Instead, it shows the placeholder value until the user navigates away and back to the screen with the **modern Text input** control.
-- In the **modern Text input** control, the **OnChange** property is called twice when the control is exited, and then blurred.
+- In the **modern Text input** control, the **OnChange** property is called each time the user interacts with the control, instead of when navigating away from the control.
 - In the **modern Text input** control, the **Validate state** property doesn't display a red border around the control.
 - In the **Image** control, the **Image rotation** property isn't supported. The image isn't rotated.
 - In the **Dropdown** and **Radio** control, the **Items** property doesn't support references to other controls. Items aren't shown if they're complex values, like references.
 - In the **modern Date picker** control, tapping on the control opens a modal with a calendar instead of allowing users to type into the control directly.
 - In the **modern Date picker** control, the **Base palette color** and modern theme aren't applied on Android devices. Instead, it displays as the device's theme color.
 - In the **Button**, **Image**, **Label**, and **Icon** controls, the **SetFocus** Power Fx function doesn't support keyboard focus, only accessibility focus (for example, screen reader).
-- In **Horizontal and vertical containers**, the **Drop shadow** property isn't supported. Instead, containers display without drop shadow.
 - In **Horizontal and vertical containers**, the **Scroll** option only works for a single direction, depending on the **Wrap** property. If **Wrap** is off, the container is scrollable in the primary direction, otherwise it's scrollable in the secondary direction.
 - Multiple **Barcode reader** controls on a single screen aren't supported.
 - Multiple **Camera** controls on a single screen aren't supported.
 - In the **Camera** control, the **Display mode** property of the parent control isn't supported. For example, if the camera control is part of a form that is set to view mode, the camera might still be in edit mode.
-- On **Screen**, the **Background image** property isn't supported.

powerapps-docs/mobile/optimize-for-devices-overview.md

@@ -5,52 +5,47 @@ author: anuitz
 ms.topic: conceptual
 ms.custom: canvas
 ms.reviewer: sericks
-ms.date: 11/14/2023
+ms.date: 05/01/2024
 ms.subservice: canvas-maker
 ms.author: anuitz
 search.audienceType: 
   - maker
 contributors:
   - sericks
   - anuitz
+  - gachasta
 ---
 
 # Optimize for devices overview (preview)
 
 [This article is prerelease documentation and is subject to change.]
 
-_Optimize for devices_ is a feature that changes the way canvas app screens are loaded and displayed for Android and iOS devices that use native UI. This feature lets makers build stunning native apps for mobile users with device-optimized screens that use native UI elements instead of rendering inside of web view. This feature provides the following benefits:
+**Optimize for devices** is a feature that changes the way canvas app screens are loaded and displayed on Android and iOS devices. This feature lets makers build stunning, native apps for mobile users with device-optimized screens that use native UI elements, instead of rendering inside of web view. Device-optimizes screens provide the following benefits:
 
-- Brings modern mobile user experiences and interaction patterns
-- Improves performance and reliability
-- Integrates device capabilities with maker-defined UI
+- Modern mobile user experiences and interaction patterns
+- Improved performance and reliability
+- Integrated device capabilities with maker-defined UI
 
-There's no need to rebuild apps as makers can use all the familiar app building elements to create device-optimized experiences, though there are some limitations around which [controls are supported natively today](./optimize-for-devices-controls.md). Apps that are optimized for devices work with other mobile features like [offline](./canvas-mobile-offline-overview.md), [push notifications](./power-apps-mobile-notification.md), and [wrap](../maker/common/wrap/overview.md).
+There's no need to rebuild apps as makers can use all the familiar app-building elements to create device-optimized experiences, though there are some [limitations](./optimize-for-devices-controls.md). Apps that are optimized for devices work with other mobile features such as [offline](./canvas-mobile-offline-overview.md), [push notifications](./power-apps-mobile-notification.md), and [wrap](../maker/common/wrap/overview.md).
 
 > [!Important]
 > - This is a preview feature.
 > - Preview features aren't meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.
 
-## How screens are optimized for devices
-
-For a canvas app running on Power Apps mobile, there are UI elements, their current state, and the related business logic. For example, on a screen you might have a button at position 0 with a width and height of 200 and 40 respectively and with fill color blue. The business logic, with Power Fx, lets you navigate the user to a different screen.
 
-If 'optimize for devices' is off for that screen, the screen loads and displays in a web view, running similarly to how it would in a desktop's web browser. When optimized for devices is on, each element's current state is passed over to the device where it renders that same element, but using native UI. So now we have a natively rendered, long blue button in the upper-left corner. Business logic modifies state or takes actions, which run the same way it did before. When the natively rendered button is selected, the device runs Power Fx and the user is navigated to the specified screen.
-
-Each [control needs a device-optimized](./optimize-for-devices-controls.md), native equivalent that supports the same properties so it can render the way a maker expects. During preview, there are some [limitations](optimize-for-devices-controls.md#known-limitations) to which controls and properties are supported. Whether a control is classic or modern, it filters the list of controls for device-optimized ones.
+## Allow screens to be device-optimized
 
-## Enable screens to be device-optimized
+1. Select **Settings** > **Upcoming features** > **Preview** > **Optimize for devices**.
+2. Only use supported controls on the screen.
 
-There are two steps to enabling a screen to be optimized for devices.
+After this feature is turned on, you can find which controls are supported in the **Insert** pane by selecting the **Device optimized (preview)** filter. Learn more about [which controls are supported natively today](./optimize-for-devices-controls.md).
 
-1. The **Optimize for devices** experimental app setting must be turned on.
+Screens made solely with device-optimized controls automatically render natively on Android and iOS devices. An app can have screens which are optimized, while some others aren't. This only depends on the controls chosen by the maker to create that screen.
 
-    The setting can be found in the **Settings** > **Upcoming features** > **Experimental** tab. Turning on the **Optimize for devices** app setting shows the **Optimize for devices** property on screens.
-
-    :::image type="content" source="media/optimized-for-devices-app-setting.png" alt-text="Shows the app setting that enables Optimize for devices.":::
+## How screens are optimized for devices
 
-2. On each screen, the **Optimize for devices** property must be set to **On**.
+For a canvas app running on Power Apps mobile, there are UI elements, their current state, and the related business logic that determines how screens are optimized. For example, on a screen you might have a button at position 0, with a width and height of 200 and 40 respectively, and with fill color blue. The business logic, with Power Fx, lets you navigate the user to a different screen.
 
-    A maker can open the tree view in the navigation pane and select a screen where the **Optimize for devices** property is located. By setting this property to **On**, the screen is rendered natively when running on Power Apps mobile in iOS and Android devices.
+If the **Optimize for devices** option is off for that screen, the screen loads and displays in a web view, running similarly to how it would in a desktop's web browser. When **Optimize for devices** is on, each element's current state is passed over to the device where it renders that same element, but using native UI. So now we have a natively rendered, long blue button in the upper-left corner. Business logic modifies state or takes actions, which runs the same way it did before. When the natively rendered button is selected, the device runs Power Fx and the user is navigated to the specified screen.
 
-    :::image type="content" source="media/optimized-for-devices-screen-setting.png" alt-text="Shows the screen setting that sets the screen to display natively.":::
+Each [control needs a device-optimized](./optimize-for-devices-controls.md), native equivalent that supports the same properties so it can render the way a maker expects. During preview, there are some [limitations](optimize-for-devices-controls.md#known-limitations) to which controls and properties are supported. Whether a control is classic or modern, it filters the list of controls for device-optimized ones.