Use controls for model-driven app data visualizations in Power Apps - Power Apps (2023)

  • Article
  • 4 minutes to read

In this article, you learn how to configure a control for a column using the classic form designer.

Important

This article describes classic controls many of which are now deprecated. For information about how to add modern controls using the modern Power Apps form designer, go to Add components to a form. For a list and descriptions of the current controls available for model-driven apps, go to List of controls available for model-driven apps.

Use a control using the classic form designer

Controls let you transform app user interface components, such as a column or view that traditionally contain text, into visualizations. Controls can be configured on columns, forms, dashboards, views, and grids.For example, a star rating can be configured on a whole number column.

Use controls for model-driven app data visualizations in Power Apps - Power Apps (1)

Or the editable grid control can be configured on a view.

Use controls for model-driven app data visualizations in Power Apps - Power Apps (2)

(Video) Power Apps Model Driven Apps FULL COURSE for Beginners

You can set one type of custom control to appear in the web browser client while having a different custom control appear in your Dynamics 365 phone or tablet mobile apps. For example, you could use a standard yes/no choice column in web browser clients and a toggle control for tablet and phone clients. After the customization is published, users can fully interact with the control to change the value, such as by tapping the control when using the toggle control. Changes are automatically saved when the form is closed just as they are when the user changes a traditional column on a form.

Use a custom control to add visualizations to a column

Following the steps in this procedure will change the default label and text box column of the Budget Amount column to the slider custom control on the opportunity table. You can use similar steps to replace an existing column with a custom control or configure a custom control for a custom column.

Note

Currently, this control can only be added and configured using the classic experience.

The opportunity table requires a Dynamics 365 app, such as Dynamics 365 Service.

  1. Sign in to Power Apps.

  2. Expand Data, select Tables, select the Opportunity table, and then select the Forms area.

  3. Open a form such as the Main form for the Opportunity table.

  4. Once in the form, select switch to classic. This will open the classic editor in a separate tab.

    (Video) How to Create a Custom Page for Model-Driven Power Apps (TUTORIAL)

  5. In the form editor, double-click the column where you want to add a custom control, such as the Budget Amount column on the account main form. This is column of a number type. Alternatively, you can create a custom column.

  6. On the Column Properties page, select the Controls tab, and then select Add Control.

  7. On the Add Control page, select the control that you want, such as the Linear Slider control shown here, and then select Add.

    Use controls for model-driven app data visualizations in Power Apps - Power Apps (3)

  8. Choose the client where you want the control to appear.

    • Web. To make the custom control available from any web browser, select the Web option next to the control. Notice that setting the Web option includes rendering the control in web browsers on PCs, Macs, and mobile devices.

    • Phone. To make the custom control available on phones running Dynamics 365 for phones, select the Phone option next to the control.

    • Tablet. To make the custom control available on tablet devices running Dynamics 365 for tablets, select the Tablet option next to the control.

    Use controls for model-driven app data visualizations in Power Apps - Power Apps (4)

  9. Select the Use controls for model-driven app data visualizations in Power Apps - Power Apps (5) pencil icon next to Min, Max, and Step, set the property option described below, and then select OK.

    (Video) Power Apps Types | Canvas Vs Model Driven Vs Portals | Beginner Tutorial

    Use controls for model-driven app data visualizations in Power Apps - Power Apps (6)

  • Min. Set the minimum accepted value. You can bind a static value that you enter or bind the value to an existing column. In this example Bind to static value is Currency and the minimum value that can be entered is zero.

    • Bind to a static value. Select the data type, such as a whole number (Whole.None), currency, floating point (FP), or decimal. Next, enter a number that represents the minimum accepted value for the column.

    • Bind to values on a column. Select a column from the list that will be used as the minimum accepted value.

  • Max. Set the maximum accepted value for the column. Similar to the Min value, you can bind a static value that you enter or bind the value to an existing column as described earlier. In this example, Bind to static value is Currency and the maximum value that can be entered is 1 billion.

  • Step. This represents the unit to increment or decrement when adding to or subtracting from the current value. For example, for budget amount you can select 100 dollar increments\decrements.

  • Hide Default Control. Selecting this option hides the control so neither the control or the data is displayed in any of the clients that don't support the custom control. Notice that the classic Dynamics 365 web client doesn't support most custom controls. By default, this option is not selected and the classic Dynamics 365 web client displays the default, typically text based, control.

    Note

    The default control is identified with (default) following the control name.

    (Video) Building Your First Model Driven Application in Power Apps

    Use controls for model-driven app data visualizations in Power Apps - Power Apps (7)

  1. Select OK, to close the Column Properties page.

  2. To activate the customization, on the table form select Save, and then select Publish.

  3. Select Save and Close to close the form editor.

See the custom control in action

Open a record that includes the column with the custom control, such as the opportunity form from the previous example, and view how the column is changed.

Use controls for model-driven app data visualizations in Power Apps - Power Apps (8)

The column is now rendered as a slider control instead of the text column.

Use the editable grid control on a view or subgrid

With editable grids, users can do rich in-line editing directly from views and subgrids whether they’re using a web app, tablet, or phone. More information: Make grids (lists) editable using the Editable Grid custom control

Next steps

Create and edit columns

FAQs

How do I add controls to Power Apps? ›

Add and select a control
  1. Select Label or Button to add one of those types of controls.
  2. Select a category of controls, and then select the type of control that you want to add.
Dec 15, 2022

What is the use of model-driven app in Power Apps? ›

Model-driven app design is an approach that focuses on quickly adding components to your apps. These components include dashboards, forms, views, and charts. With little or no code, you can make apps that are simple or complex. This module helps prepare you for Exam PL-100: Microsoft Power Platform App Maker.

How do I create a custom control in Power Apps? ›

On the Column Properties page, select the Controls tab, and then select Add Control. On the Add Control page, select the control that you want, such as the Linear Slider control shown here, and then select Add.

What is a control in power app? ›

Controls are key components that are used to build the basic functionality and interactivity of your app. While text controls are the most common components we'll use, the following controls will allow you to customize the input experience so that you can take other data types and other input methods into account.

How many controls can a power app have? ›

Don't add more than 500 controls in one app.

Power Apps generates an HTML document object model to render each control. The more controls you add, the more generation time Power Apps needs. You can, in some cases, achieve the same result and have the app start faster if you use a gallery instead of individual controls.

What are PCF controls in PowerApps? ›

PCF stands for PowerApps Control Framework are components that can be used across full breadth of Powerapps capability. The PowerApps component framework enables the developers to create code components for model-driven and canvas apps that are not present out of the box.

Videos

1. Thursday TechTalk #5 | Advanced Data Visualizations with Power Apps
(Ha-Shem Limited)
2. Power Apps Mixed Reality and 3D Model
(Shane Young)
3. Power Apps Tutorial
(Learnit Training)
4. Using PowerApps Visual in Power BI (Integration)
(Reza Dorrani)
5. What's new in Model-Driven Power Apps: Wave 2 2022 Release
(Lisa Crosbie)
6. Power BI Office Hour 96: Building model-driven apps in Power Apps | Hammed Abdulazeez MVP
(UrBizEdge)
Top Articles
Latest Posts
Article information

Author: Greg O'Connell

Last Updated: 11/15/2022

Views: 5792

Rating: 4.1 / 5 (42 voted)

Reviews: 89% of readers found this page helpful

Author information

Name: Greg O'Connell

Birthday: 1992-01-10

Address: Suite 517 2436 Jefferey Pass, Shanitaside, UT 27519

Phone: +2614651609714

Job: Education Developer

Hobby: Cooking, Gambling, Pottery, Shooting, Baseball, Singing, Snowboarding

Introduction: My name is Greg O'Connell, I am a delightful, colorful, talented, kind, lively, modern, tender person who loves writing and wants to share my knowledge and understanding with you.