Design your Power Apps Forms | Form Control Tutorial
Power Apps
23. Jan 2023 03:30

Design your Power Apps Forms | Form Control Tutorial

von HubSite 365 über Reza Dorrani

Principal Program Manager at Microsoft Power CAT Team | Power Platform Content Creator

Citizen DeveloperPower AppsPower SelectionM365 Hot News

In this Power Apps Form Control Design tutorial video, I will showcase how to transform the out of the box Form Control styles (UI/UX).

In this Power Apps Form Control Design tutorial video, I will showcase how to transform the out of the box Form Control styles (UI/UX).

We will improve the From Control design by updating fonts, colors, conditional formatting, highlighting data cards with validation errors, adding sections to PowerApps forms, created tabbed forms, creating backgrounds for form, bulk updating data cards for styling, changing control types - combo boxes to radio buttons, text controls to slider controls, modern fluent UI date picker control and more.

I will showcase a scenario with a SharePoint List and Power Apps Form Control.

PowerApps Tutorial Video on Form Designing includes the following:

  • ✅ Working with Form Control and Data Cards
  • ✅ Required field formatting for Data Cards
  • ✅ Highlight Data Cards with Validation Errors
  • ✅ Apply custom Fonts for Form Control and App
  • ✅ Bulk update Data Card properties in Form Control
  • ✅ Enhance Data Card UX by transforming controls - use Radio Buttons, Slider Control, Fluent UI Date Picker control
  • ✅ SharePoint Choice Column as Radio list, SharePoint Number Column as Slider selector
  • ✅ Build sections in Power Apps forms
  • ✅ Build tabbed forms (show/hide data cards in form control)
  • ✅ Form Design - Background Image, Fill, Relative Positioning, Colors etc.

Download sample App:

https://github.com/rdorrani/PowerApps/blob/master/PowerAppsFormDesignSample_20230122233659.zip

Table of Contents:

  • 00:00 - Introduction to designing Power Apps Forms
  • 00:38 - PowerApps form control introduction and setup
  • 02:48 - Start designing Power Apps Form Control
  • 05:08 - PowerApps required field formatting (style updates - header, colors
  • etc.)
  • 11:28 - Updating font for Form Control in PowerApps
  • 12:52 - Change Data Card control types for Power Apps (Combo box to Radio list)
  • 14:20 - Update text control data card style to slider control style
  • 15:47 - Update Date picker to modern fluent UI control styles
  • 17:19 - Set Fill color property for all data card controls
  • 17:32 - Create sections in Power Apps forms (custom card)
  • 18:30 - Create Tabbed forms in Power Apps (split form into tabs when large
  • number of columns)
  • 21:34 - Highlight validation errors in Tabbed forms
  • 22:58 - Subscribe to Reza Dorrani channel