Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the-power-apps-grid-control.md #5422

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+13 −7
Open

Update the-power-apps-grid-control.md #5422

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions powerapps-docs/maker/model-driven-apps/the-power-apps-grid-control.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,16 @@ The Power Apps grid control represents the next evolution of the classic Power A

:::image type="content" source="media/power-apps-grid-control-editing.gif" alt-text="Editing data with the Power Apps grid control":::

> [!NOTE]
> The Power Apps grid control can only be added to a table or form using the legacy solution explorer.
## Add the Power Apps grid control using form designer
1. Sign in to [Power Apps](https://make.powerapps.com/?utm_source=padocs&utm_medium=linkinadoc&utm_campaign=referralsfromdoc), select **Solutions** on the left navigation pane, and then open the solution you want. [!INCLUDE [left-navigation-pane](../../includes/left-navigation-pane.md)]
1. Select the **Table** within the solution, and then select the **Forms** area. Open the **Main Form** that contains the subgrid for editing.
1. In the form designer, select **Components** on the left navigation pane, expand **Grid**, and then select **Power Apps grid control**.
1. [Configure the Power Apps grid control](#configure-the-power-apps-grid-control)
1. Select **Done**.
1. **Save and publish** the form to save and make it available to app users.


## Add the Power Apps grid control to views for a table
## Add the Power Apps grid control to views using classic solution explorer

When you configure the Power Apps grid control for a table, all views for that table display using that grid.

Expand All @@ -40,8 +46,9 @@ When you configure the Power Apps grid control for a table, all views for that t
1. In the **Add control** dialog box, select **Power Apps grid control**, and then select **Add**.
:::image type="content" source="media/add-the-power-apps-grid-control.png" alt-text="Add Power Apps grid control to a table":::
1. [Configure the Power Apps grid control](#configure-the-power-apps-grid-control)
1. After configuring the Power Apps grid control to meet your needs, select Save on the command bar to save your changes. When you're ready to make the changes available to app users, select Publish on the command bar.

## Add the Power Apps grid control to a subgrid on a form
## Add the Power Apps grid control to a subgrid using classic solution explorer

1. Open the [solution explorer](advanced-navigation.md#solution-explorer).
1. Expand **Entities**, expand the table you want, and then select **Forms**.
Expand All @@ -51,11 +58,11 @@ When you configure the Power Apps grid control for a table, all views for that t
1. To configure the control, go to [Configure the Power Apps grid control](#configure-the-power-apps-grid-control).
1. Select **OK** to close the **Set properties** dialog box.
1. To save and make available to apps, select **Save**, and then select **Publish**.
1. After configuring the Power Apps grid control to meet your needs, select **Save** on the command bar to save your changes. When you're ready to make the changes available to app users, select **Publish** on the command bar.

## Configure the Power Apps grid control

1. In the **Power Apps grid control** row, select the app types you want to apply the grid to. This makes the control the default control for the selected clients.
:::image type="content" source="media/configure-the-power-apps-grid-control.png" alt-text="Select the client types where you want to use the control":::
1. Select the **Power Apps grid control** components. More infomation: [Configure components on a form](add-move-configure-or-delete-components-on-form#configure-components-on-a-form)
1. There are several properties included with the control to let you tailor the grid experience for that table. To modify any of these properties, select **Edit** in the corresponding row, and then change the value using the dropdown list under **Bind to static options**.
- The **Enable editing** property determines whether the grid is read-only or editable. The default value is **No**. Select **Yes** to make the grid editable. Editable grids have subtle visual differences to read-only grids including boolean columns showing toggle switches and dropdown and date fields displaying chevrons and date picker icons on hover or focus.
- The **Enable filtering** property determines if filtering options are available to users in the grid column header dropdowns. The default value is **Yes**.
Expand All @@ -78,7 +85,6 @@ When you configure the Power Apps grid control for a table, all views for that t
- The **Disable editing in child items grid** property provides some control over the editability of the nested grid. By default, the nested grid inherits the editability of the parent grid, but this property can be used to suppress editing in the nested grid when the parent grid is editable. The default value is **No**.
- The **Customizer control** property allows the maker to link to a single customizer Power Apps component framework control with definitions for changing the visuals or interactions for one or more columns in the grid or the empty grid visual.

3. After configuring the Power Apps grid control to meet your needs, select **Save** on the command bar to save your changes. When you're ready to make the changes available to app users, select **Publish** on the command bar.

## Customization

Expand Down