| FoxTako Blog | FoxTako Blog

title: "Power Apps Canvas Coding Standards (Part 2)" category: ["Power Apps", "canvas apps"] date: "2025-09-24" tags: ["powerapps", "canvasapps", "coding standards", "best practices", "how-to"] excerpt: "Enhance Power Apps canvas apps with proper settings, review processes, theming guidelines, and form design standards. Part 2 continues the comprehensive coding standards series for professional app development." image: /article-images/power_apps_canvas_coding_standards_part2/thumbnail.webp type: Blog This is Part 2 of the series, focusing on app settings, reviewing canvas apps, app theming guidelines, and form design guidelines.

App Settings

Configure app settings for optimal performance and user experience.

General Tab

Choose a consistent icon (245px x 245px, .jpg/.png). Enable "Debug Published App" during development for better telemetry, but disable in production to avoid performance impacts.

General Tab Screenshot

Display Tab

Use responsive design for PC/laptops. Select orientation based on device: portrait for mobile, landscape/portrait for tablets.

Device	Orientation	Scale To Fit	Lock Aspect Ratio	Lock-Orientation
PC/Laptop	Landscape	No	No	No
Tablet	Landscape/Portrait	Yes	Yes	Yes
Mobile	Portrait	Yes	Yes	Yes
Tablet & Mobile	Portrait	No	No	No
All	Landscape	No	No	No

Upcoming Features Tab

Enable all preview features unless buggy. Avoid experimental features in production; never use retired ones. Enable "Enhanced Component Properties"; disable "Keep Recently Visited Screens In Memory", "Expanded Media Support", "SaveData on Power Apps Mobile Apps".

Support Tab

Keep authoring version stable during development to avoid bugs. Retest if updated.

Support Tab Screenshot

Reviewing Canvas Apps

Thorough review ensures app quality.

App Checker

Fix all issues, including accessibility and performance. Justify any unfixed errors.

App Checker Screenshot

Power Apps Code Review Tool

Aim for 90% score. Justify deviations, e.g., avoiding Concurrent if memory-intensive.

Code Review Tool Screenshot

Source Code Review

Use PowerApps Source code tool to unpack msapp and review YAML in Visual Studio Code with C# highlighter.

Source Code Review Screenshot

Functional Testing

Perform by non-original developer or QA tester for objective issue detection.

User Acceptance Testing

Conduct with representative end-users against a test script before production.

App Theming Guidelines

Ensure consistent styling.

Creating An App Theme

Define theming variables in OnStart for colors, fonts, icons, defaults.

Variable Name	Purpose
gblAppColors	Color palette for the app
gblAppFonts	Heading fonts, body fonts and sizes
gblAppIcons	SVG icons used in the app
gblAppDefaults	Default values for common control properties

Keep styled controls on a hidden screen for reuse.

Styled Controls Example

Theming Variables Sample Code

powerapps
// COLOR PALETTE
Set(
    gblAppColors,
    {
        // Primary Colors
        Primary1: ColorValue("#30475E"),  // Navy Blue
        Primary2: ColorValue("#F05454"),  // Light Red
        Primary3: ColorValue("#222831"),  // Dark Blue
        Primary4: ColorValue("#DDDDDD"),  // Light Gray

        // Accent Colors
        Black: ColorValue("#000000"),
        Cyan: ColorValue("#17A2B8"),
        Green: ColorValue("#28A745"),
        Orange: ColorValue("#FD7E14"),
        Red: ColorValue("#DC3545"),
        Teal: ColorValue("#20C997"),
        White: ColorValue("#FFFFFF"),
        Yellow: ColorValue("#FFC107"),

        // Neutral Colors
        GrayDark: ColorValue("#484644"),
        GrayMediumDark: ColorValue("#8A8886"),
        GrayMedium: ColorValue("#B3b0AD"),
        GrayMediumLight: ColorValue("#D2D0CE"),
        GrayLight: ColorValue("#F3F2F1")
    }
);

// FONTS & SIZES
Set(
    gblAppFonts,
    {
        Heading: "Roboto, Open Sans",
        Body: "Lato",
        Size: {
            Tiny: 10,
            Regular: 13,
            Subtitle: 16,
            Title: 20,
            Huge: 28
        }
    }
);

// ICONS
Set(
    gblAppIcons,
    {
        // SVG icon code is stored in an 'Import from Excel' table named AppIcons
        Checklist: LookUp(AppIcons, Name="Checklist", DataURI),
        Checkmark: LookUp(AppIcons, Name="Checkmark", DataURI)
    }
);

Store SVG icons in a spreadsheet and import.

SVG Icons Spreadsheet

Branding Templates

Use pre-built templates for quick setup: choose colors, customize, auto-apply to new controls. No premium license needed.

Theme Palette Example

Form Design Guidelines

Design forms for usability and data integrity.

Restrict Text Input Values

Use Format.Number for numeric fields; set MaxLength to match field limits.

powerapps
// Format property of a text input named Year Project Started
Format.Number

// MaxLength property of a text input for Project Name
DataSourceInfo(Projects, DataSourceInfo.MaxLength, "Project Name")

Validate Form Data

Check required fields, formats, ranges, matches. Provide feedback via submission or real-time validation.

Phone Number Validation Example

Strategies: list errors at top, highlight in red, show messages beside fields.

Avoid disabling submit until validated; indicate why if done.

Implement Error Handling

Check submission success; notify on failure.

For Power Apps forms, use OnSuccess/OnFailure. For Patch, use IfError.

Protect Against Loss of Unsaved Data

Prompt confirmation before exiting unsaved forms.

Unsaved Data Prompt

Use A Single Form to Both Edit & Display Records

Reuse one form for new/edit/view modes to reduce controls.

Form Modes Example

App Settings

Configure app settings for optimal performance and user experience.

General Tab

Choose a consistent icon (245px x 245px, .jpg/.png). Enable "Debug Published App" during development for better telemetry, but disable in production to avoid performance impacts.

General Tab Screenshot

Display Tab

Use responsive design for PC/laptops. Select orientation based on device: portrait for mobile, landscape/portrait for tablets.

Device	Orientation	Scale To Fit	Lock Aspect Ratio	Lock-Orientation
PC/Laptop	Landscape	No	No	No
Tablet	Landscape/Portrait	Yes	Yes	Yes
Mobile	Portrait	Yes	Yes	Yes
Tablet & Mobile	Portrait	No	No	No
All	Landscape	No	No	No

Upcoming Features Tab

Support Tab

Keep authoring version stable during development to avoid bugs. Retest if updated.

Support Tab Screenshot

Reviewing Canvas Apps

Thorough review ensures app quality.

App Checker

Fix all issues, including accessibility and performance. Justify any unfixed errors.

App Checker Screenshot

Power Apps Code Review Tool

Aim for 90% score. Justify deviations, e.g., avoiding Concurrent if memory-intensive.

Code Review Tool Screenshot

Source Code Review

Use PowerApps Source code tool to unpack msapp and review YAML in Visual Studio Code with C# highlighter.

Source Code Review Screenshot

Functional Testing

Perform by non-original developer or QA tester for objective issue detection.

User Acceptance Testing

Conduct with representative end-users against a test script before production.

App Theming Guidelines

Ensure consistent styling.

Creating An App Theme

Define theming variables in OnStart for colors, fonts, icons, defaults.

Variable Name	Purpose
gblAppColors	Color palette for the app
gblAppFonts	Heading fonts, body fonts and sizes
gblAppIcons	SVG icons used in the app
gblAppDefaults	Default values for common control properties

Keep styled controls on a hidden screen for reuse.

Styled Controls Example

Theming Variables Sample Code

powerapps
// COLOR PALETTE
Set(
    gblAppColors,
    {
        // Primary Colors
        Primary1: ColorValue("#30475E"),  // Navy Blue
        Primary2: ColorValue("#F05454"),  // Light Red
        Primary3: ColorValue("#222831"),  // Dark Blue
        Primary4: ColorValue("#DDDDDD"),  // Light Gray

        // Accent Colors
        Black: ColorValue("#000000"),
        Cyan: ColorValue("#17A2B8"),
        Green: ColorValue("#28A745"),
        Orange: ColorValue("#FD7E14"),
        Red: ColorValue("#DC3545"),
        Teal: ColorValue("#20C997"),
        White: ColorValue("#FFFFFF"),
        Yellow: ColorValue("#FFC107"),

        // Neutral Colors
        GrayDark: ColorValue("#484644"),
        GrayMediumDark: ColorValue("#8A8886"),
        GrayMedium: ColorValue("#B3b0AD"),
        GrayMediumLight: ColorValue("#D2D0CE"),
        GrayLight: ColorValue("#F3F2F1")
    }
);

// FONTS & SIZES
Set(
    gblAppFonts,
    {
        Heading: "Roboto, Open Sans",
        Body: "Lato",
        Size: {
            Tiny: 10,
            Regular: 13,
            Subtitle: 16,
            Title: 20,
            Huge: 28
        }
    }
);

// ICONS
Set(
    gblAppIcons,
    {
        // SVG icon code is stored in an 'Import from Excel' table named AppIcons
        Checklist: LookUp(AppIcons, Name="Checklist", DataURI),
        Checkmark: LookUp(AppIcons, Name="Checkmark", DataURI)
    }
);

Store SVG icons in a spreadsheet and import.

SVG Icons Spreadsheet

Branding Templates

Use pre-built templates for quick setup: choose colors, customize, auto-apply to new controls. No premium license needed.

Theme Palette Example

Form Design Guidelines

Design forms for usability and data integrity.

Restrict Text Input Values

Use Format.Number for numeric fields; set MaxLength to match field limits.

powerapps
// Format property of a text input named Year Project Started
Format.Number

// MaxLength property of a text input for Project Name
DataSourceInfo(Projects, DataSourceInfo.MaxLength, "Project Name")

Validate Form Data

Check required fields, formats, ranges, matches. Provide feedback via submission or real-time validation.

Phone Number Validation Example

Strategies: list errors at top, highlight in red, show messages beside fields.

Avoid disabling submit until validated; indicate why if done.

Implement Error Handling

Check submission success; notify on failure.

For Power Apps forms, use OnSuccess/OnFailure. For Patch, use IfError.

Protect Against Loss of Unsaved Data

Prompt confirmation before exiting unsaved forms.

Unsaved Data Prompt

Use A Single Form to Both Edit & Display Records

Reuse one form for new/edit/view modes to reduce controls.

Form Modes Example

App Settings

General Tab

Display Tab

Upcoming Features Tab

Support Tab

Reviewing Canvas Apps

App Checker

Power Apps Code Review Tool

Source Code Review

Functional Testing

User Acceptance Testing

App Theming Guidelines

Creating An App Theme

Theming Variables Sample Code

Branding Templates

Form Design Guidelines

Restrict Text Input Values

Validate Form Data

Implement Error Handling

Protect Against Loss of Unsaved Data

Use A Single Form to Both Edit & Display Records

Related Articles

D365 F&O: Export Customer Credit & Balance Data

D365 F&O: Custom Operating Unit Types (Division, Region, Zone)

D365 F&O: Export/Import Aging Period Definitions

App Settings

General Tab

Display Tab

Upcoming Features Tab

Support Tab

Reviewing Canvas Apps

App Checker

Power Apps Code Review Tool

Source Code Review

Functional Testing

User Acceptance Testing

App Theming Guidelines

Creating An App Theme

Theming Variables Sample Code

Branding Templates

Form Design Guidelines

Restrict Text Input Values

Validate Form Data

Implement Error Handling

Protect Against Loss of Unsaved Data

Use A Single Form to Both Edit & Display Records

Related Articles

D365 F&O: Export Customer Credit & Balance Data

D365 F&O: Custom Operating Unit Types (Division, Region, Zone)

D365 F&O: Export/Import Aging Period Definitions