Power Apps Modern Controls
The introduction of modern controls in canvas apps marks a significant enhancement, as these controls, inspired by the Microsoft Fluent design system, streamline the configuration process for creators while delivering a seamless and accessible user experience, underpinned by top-notch performance and aesthetics. Additionally, they come with an integrated modern theming system, deeply rooted in Fluent design principles, enabling easy and centralized customization of an app’s visual identity.
Enable modern controls and themes for your
app:
Navigate to the command bar and click on
“Settings,” then choose “Upcoming features.” Within the
Preview tab, activate the toggle for “Try out the modern controls.”
To access a comprehensive list of modern controls, go to the app authoring
menu, and select “Insert.” From the control options, pick
“Modern controls.” To explore modern themes, click on
“Themes” within the app authoring menu. For more detailed
information, please refer to the “Use modern themes in canvas apps”
documentation.
Power Apps Modern Controls are listed as under:
Badge:
Badges are an effective means of visually presenting content in a more appealing manner. The Power Apps badge control is specifically crafted for the purpose of conveying concise information with the main goal of quickly relaying important data to users. It offers a diverse set of properties, including those related to content, appearance, color, shape, position, size, as well as advanced features like OnChange and Display Mode.
a. Properties:
i. Content:
Displays the text inside the badge.
ii. Appearance:
The “Appearance” property allows you to define the visual style of
the button, and you have four options to choose from: “Filled,”
“Ghost,” “Outlined,” and “Tint.”
iii. Shape:
The user can choose from a selection of shapes, including circles, squares, and
rounded shapes.
iv. Color:
The user has access to a range of color choices, including Brand, Danger,
Important, Informative, Severe, Subtle, Success, and Warning.
v. Additional
properties include:
1.
X: The measurement representing the space
between the left edge of a control and the left edge of its parent container
(or the screen if there’s no parent container).
2.
Y: The measurement indicating the gap between
the top edge of a control and the top edge of its parent container (or the
screen if no parent container is present).
3.
Size: The specification of the control’s
dimensions on the canvas.
Button:
The
Power Apps button control serves the purpose of initiating actions when
clicked. It provides a means for users to trigger actions and navigate within
an interface.
a. Properties:
i. Text:
The “Text” property of a button refers to the property that allows you to specify the text or label displayed on the button.
ii. Type:
Primary highlights the button as the main action, while Secondary emphasizes the button to indicate a secondary action. Additional options such as Outline, Subtle and Transparent are also available.
iii. Other Additional properties include:
1. OnSelect: Specifies the actions that will be executed when the button is pressed.
§
Checkbox:
This control allows the user to toggle or switch its value between true and false. It provides a straightforward way for users
to indicate a Boolean value, utilizing a familiar interface element that has been a staple in graphical user interfaces for many years.
a. Properties:
i. Checked:
This property configures the initial state of the checkbox as checked when it’s
set to true. It can also serve as an output property to retrieve the current
value or state of the checkbox.
ii. Label:
The label that is associated with the checkbox.
iii. Size:
Size refers to the dimensions or scale of the checkbox indicator.
§
Date Picker:
A control that users can choose to set a specific date.
a. Properties:
i. Placeholder text:
Temporary or instructional text displayed within a text input field or control to provide hints or guidance to the user about the expected input.
ii. Format:
The “Format” property of a Date Picker control allows you to specify how the selected date should be displayed to the user. It defines the visual format of the date value within the Date Picker control. The different options available are LongAbbreviated, Short and YearMonth.
iii. Other properties are:
SelectedDate, Start year, End year and IsEditable.
§
Drop-down:
A Drop-down control is an efficient way to save screen space, especially when dealing with extensive lists of options.
Initially, it occupies just a single line, but users can expand it by clicking the chevron to access additional choices. This design optimizes screen real estate while providing access to a broader range of options when needed.
a. Properties:
i. Items(Items):
The “Items” property represents the data source providing the content visible in the control.
ii. Fields:
Modify the fields by including at least one field in the dropdown. The initial field will be visible in the dropdown items list.
iii. Validation State: The present condition of the dropdown in terms of validation.
iv. Default Selected Items: ” Default Selected Items ” typically refers to the initial or default selection in a control or field. It represents the items or values that are pre-selected when a user first interacts with the control.
§
Information Button:
The Info button control empowers developers to offer assistance and guidance to app users in an easily accessible manner.
a. Properties:
i. Content:
The text content to be displayed in the pop-up.
ii. Icon Size:
Sets the size of the info button icon with options including “Small,” “Medium,” and “Large.”
iii. AcceptsFocus:
Determines if this key can be accessed using the tab key.
§
Link:
Utilize the Link control to offer links that can
be configured to comply with accessibility standards. When clicked, the link
opens in a new tab on your device.
a. Properties:
i. Text:
The text to be shown in the app with an active link.
ii. URL:
The web address (URL) that users can use to navigate through the link.
iii. Align:
This feature assists users in aligning the text with various options such as Start, End, Center, and Justify.
iv. Vertical align:
This property for a Link control enables the specification of vertical alignment for the text contained within the hyperlink control. Typical options include Top, Middle, and Bottom, which determine the vertical positioning of the text within the control.
v. Wrap:
The “Wrap” property determines whether the text should wrap into multiple lines if it exceeds the available horizontal space.
vi. Auto Height:
The “Auto Height” property determines whether the height of the control should automatically adjust to accommodate its content.
§
Progress Bar:
This control displays the progress and can be configured in
two ways: determinate, which showcases the exact progress, or indeterminate,
which indicates ongoing progress without specifying the exact value.
a. Properties:
i. Thickness:
This property allows you to define the thickness of the progress bar, with options including “Large” and “Medium.”
ii. Shape:
The “shape” property influences the curvature or style of the corners on the progress bar, with options including “Rounded” and “Square.”.
iii. Indeterminate:
“Indeterminate” mode is used to signify an unpredictable or unknown loading progress, and when activated, it displays a continuous looping animation.
iv. Color:
This property specifies the color of the progress bar based on the selected option, which can be one of the following: None, Success, Warning, or Error.
v. Value:
This is a numeric value, ranging from 0 to ‘max,’ that represents the level of completion for a task. It is relevant only when the progress bar is in a determinate state.
vi. Max:
“Max” is the highest value, and when the “value” matches “max,” the ProgressBar bar is completely filled, often used to show completion or progress towards a total.
Radio
Group Control:
A Radio group control is most effective when used with a limited set of options, where users can choose only one option
among them, and each option excludes the others.
a. Properties:
i. Items (Items):
“Items” refers to the list of options or choices that will be displayed in the radio list for users to select from.
ii. Fields:
Field values from data sources like SharePoint, Excel, etc., can be added to the radio control directly, independently of external assistance.
iii. Layout:
The “Layout” property dictates how radio buttons and their associated labels are organized and aligned within the radio group control. Some available choices include Vertical, Horizontal, and Horizontal Stacked.
iv. DefaultSelectedItems:
The control’s initial values are displayed before any user interaction occurs. These values represent the default or pre-selected options in the control.
Spinner:
The spinner control is ideal for showing loading scenarios during ongoing actions, offering versatile display choices for
various situations.
a. Properties:
i. Label:
This slot is designated for the label of the spinner, and it also manages the text styling associated with the Spinner control.
ii. Appearance:
The Spinner’s appearance can be set to either “Primary” or “Inverted.”
iii. Label Position:
The label’s position in relation to the spinner can be specified with options including “before,” “after,” “above,” or “below.”
iv. Spinner Size:
This property defines the size of spinner control. The spinner size options include tiny, small, extra small, medium, large, extra-large, and huge.
Tabs
List:
Tabs function as navigation controls for switching between various app contexts. Lists of items or data table fields can
be chosen to populate the tab content.
a. Properties:
i. Items:
The items to display in tabs can be sourced from an array (by selecting values) or from a data column in a table.
ii. Size:
This property defines the size of Tabs List. Tabs can be shown in small, medium, or large sizes.
iii. Alignment:
Tabs can be displayed either vertically or horizontally.
a. Properties:
i. Items: This source determines what data is shown within the table.
ii. Allow range selection: This setting determines whether the user can select a portion of the grid to copy to the clipboard.
iii. Reflow behaviour: This setting defines how the grid will adjust its display mode, or “reflow,” depending on its width.
Text:
A Power Apps text control is used to present descriptive text or provide instructions for other user interface elements.
a. Properties:
i. Text:
Text displayed on the canvas.
ii. Font Size:
The font size of the text displayed on a control.
iii. Font weight:
The text weight in a control, which can be set to Bold, Semibold, Regular, or Medium.
iv. Font style:
The font family name for the text displayed.
v. Align:
The text’s horizontal alignment in relation to its component’s center can be positioned as “Start”, “End”, “Center” and “Justify”.
Vertical align:
This property shows the text using the chosen vertical alignment for the text.
vi. Wrap:
This action involves wrapping the text within the object.
vii. Auto height:
The height dynamically expands to accommodate the content it displays, growing as needed to ensure all content is visible.
Text
Input:
Users can input data by typing into a Text input control, and depending on the app’s configuration, this data can be added to a
data source, used for calculating temporary values, or integrated in other ways.
a. Properties:
i. Placeholder text:
The placeholder text in the text input control.
ii. Mode:
The control can be set to either SingleLine or MultiLine mode.
iii. Type:
The content type of the text input can be specified as plain text, password, or search.
Toggle:
The Toggle control in PowerApps functions as a switch. Users can use this control to activate or deactivate the toggle switch
by interacting with its handle.
a. Properties:
i. Label:
The label on the toggle control serves to indicate the function or purpose of the toggle.
ii. Label Position:
This setting determines the placement of the table in relation to the toggle control.
iii. Checked:
Indicates whether the checkbox is in a checked or unchecked state.
iv. OnCheck:
The “OnCheck” property specifies the app’s response when the toggle value changes to true.
v. OnUncheck:
The “OnUncheck” property specifies how the app responds when the user changes the control value to false.
Combo Box:
A Combo Box in PowerApps is a modern control used to create a dropdown list with enhanced functionality. It is a versatile
user interface element that allows users to select a single item from a list of options.
a. Properties:
i. Data Source (Items):
In PowerApps, the “Data source” property of a combo box is used to specify the source of data that populates the options or items displayed in the combo box control.
ii. Fields:
In PowerApps, the “Fields” property of a combo box allows you to specify which field or column from the data source defined in the “Data source” property should be used as the display value for the combo box items. This property determines what information is shown to the user when they open the combo box dropdown to make a selection.
iii. Allow multiple selections:
The functionality that permits users to choose more than one option or item from a list or control. When this feature is enabled, users can select multiple items simultaneously, which can be especially useful for scenarios where multiple selections are needed or desired.
iv. Allow searching:
“Allow searching” refers to the capability of a control or interface element to enable users to search for specific items or information within a list or dataset. When this feature is enabled, users can enter search terms or keywords, and the control will filter and display matching items, making it easier to find and select the desired content.
v. MultiValueDelimiter:
The text employed to distinguish between selected item values in a control that permits multiple selections.
vi. InputTextPlaceholder:
The “placeholder text” of a combo box is the initial text or message displayed in the combo box control when no item has been selected yet.
vii. Validation State:
The current status of validation for the Combo box control.
viii. Default Selected Items: “Default Selected Items” usually refers to the initial or pre-set selections within a control or field when a user initially engages with it.
Slider:
The PowerApps Slider is a control that allows users to select a value by dragging a handle along a horizontal track. It provides a visual indicator that can be moved within the specified range, allowing users to select a value between the defined minimum and maximum values.
a. Properties:
i. Value: It sets or specifies the value of an input control.
ii. Min:
It sets or specifies the minimum value to which the user can adjust a slider control.iii. Max:
It sets or specifies the maximum value that a user can assign to a slider or a rating control.
iv. Layout:
It indicates whether the user is scrolling through a gallery or adjusting a slider either vertically (up and down) or horizontally (left and right).
v. Size: This property enables the specification of the slider’s visual size, commonly with choices like “Small,” “Medium”.
vi. OnChange: The OnChange property of a slider control in PowerApps signifies the action triggered when the slider’s value is altered or changed.
§ Common Key Properties associated with all the moder controls:
· Display Mode: The “Display Mode” property determines whether the control permits user input (Edit), solely presents data (View), or is in a disabled state (Disabled).
· Height: The vertical size of the control from top to bottom.
· Width: The horizontal size of the control from left to right.
· Visible: Determines whether the control is shown or hidden.
· X: The distance from the left edge of the screen to the left side of the control.
· Y: The distance from the top edge of the screen to the top of the control.
· Accessible Label: The “Accessible Label” property is used to provide an accessibility label or description for the control.
· Required: A field that cannot be left blank.
· OnSelect: The OnSelect property in PowerApps specifies what happens when a control is clicked or selected.
· OnChange: The “OnChange” property in PowerApps dictates actions triggered when a control’s value changes.
Conclusion:
In summary, Power Apps modern controls are a set of versatile and user-friendly UI elements that empower app creators to build responsive, accessible, and visually appealing canvas apps. Their design principles align with the Microsoft Fluent Design System, ensuring a modern and consistent user experience across different devices and platforms. These controls, combined with the theming system, offer a powerful toolkit for building and customizing apps for a wide range of business needs.
