Getting started with model-driven apps – Working with the App Designer


This post is a part of a series of 5 post exploring the key things you need to know about, when getting started with building model-driven apps on the Power Platform. The series contains these 5 guides:
1. Working with solutions
2. Working with tables
3. Working with forms
4. Working with views
5. Working with the App Designer (this post)

UPDATE: If you prefer to follow along in a youtube video instead you can find it here:
This is the first of 5 posts in my new series exploring the key things you need to know, as a citizen developer, when getting started with building model-driven apps, on the Power Platform.
1. Working with solutions (this post)
2. Working with tables
3. Working with forms
4. Working with views
5. Working with the App Designer

UPDATE: If you prefer to follow along in a youtube video instead you can find it here:
Getting Start With Model-Driven Apps – Working with the App Designer


If you haven’t read the previous posts, I recommend starting from the first post and working your way through them.
In my previous blog post, I covered the topic of working with views on model-driven apps on the Power Platform and their role in your business applications. Now that some of the basic components have been covered, we are ready to zoom out and apply them all in the App Designer. 
The new version of the App Designer is a comprehensive tool that allows developers and app administrators to create, customize, and manage model-driven apps. It offers an improved user interface and enhanced capabilities for app design, making it easier and more efficient to build powerful solutions on the Power Platform. The new App Designer empowers users with a modern and streamlined experience, driving productivity and enabling faster app development.

In this post I will cover 4 areas that I think are important when getting started with the App Designer
1. The App Designer interface
2. Advantages of using the new App Designer over the legacy version
3. Best Practice
4. Do’s and Don’ts

1. App Designer Interface

The App Designer consists of various menu items that facilitate app customization and configuration. The main menu items (on the left side) include:

Pages
The Pages menu item enables users to define the app’s navigation structure and layout. It allows for the creation of custom areas, groups, subareas, and tiles, providing a seamless user experience and easy access to different app components. It also provides quick access to pages that are included in the app but not in the sitemap, in order to help pinpoint which items might be missing from the navigation menu.
Furthermore, it is possible to acces the now “edit command bar” functionality from this menu.

Data
The Data menu item provides a centralized view of all the objects that are either included in the app and which objects are still available in the environment. The app’s objects can be things such as tables, forms, views, charts, dashboards, and more. It allows users quick access to easily manage and customize these components. Be aware that when selecting “edit table” or “edit” under any of the menu items, it could lead the user directly to the table itself and not the solution you are working in, thus running the risk of making changes that are not included in your solution, or, if you are adding new items, being created by the solution publisher.

Automation
The Automation menu item enables the creation and management of Business Process Flows, which are guided workflows that help users navigate through predefined steps to accomplish specific tasks. It provides a visual representation of the process and offers control over the flow and stages.

App Settings
The App Settings menu item allows for configuring general settings for your business application and preferences for the app. This includes defining things such as the App name, description, and icon. It also allows you to enable the availability of certain features in the app. Furthermore you can enable/disable standard navigation items, and toggle whether to test upcoming and preview features.

2. Advantages of using the new App Designer over the legacy version

The new App Designer brings several advantages over the legacy version, including:

Enhanced User Interface
The new App Designer offers a modern and intuitive user interface, making it easier for users to navigate, design, and customize their model-driven apps.

Streamlined App Development
With improved functionality and usability, the new App Designer streamlines app development processes, reducing the time and effort required to build and maintain model-driven apps.

Advanced Customization Capabilities
The new App Designer provides enhanced customization options, empowering users to tailor the app’s components, navigation, and user experience according to specific business requirements.

Improved Collaboration
The new App Designer promotes collaboration among developers and app administrators by providing a unified environment for designing and managing model-driven apps. This fosters teamwork and ensures consistent app customization across the organization.

3. Best Practice

Best Practices When Working with the App Designer: To make the most out of the App Designer, consider the following best practices:

Plan App Structure
Before starting app customization, carefully plan the app’s structure, navigation, and component hierarchy. Having a clear vision of the desired app layout ensures a smooth development process.

Leverage Reusable Components
Take advantage of reusable components such as tables, forms, and views. Standardize their design and usage across different areas of the app to maintain consistency and simplify future updates.

Test and Validate
Regularly test the app’s functionality and usability throughout the development process. Validate the app’s behavior with different user roles and scenarios to ensure a seamless user experience.

Document Customizations
Maintain proper documentation of your app customizations, including changes made in the App Designer. This documentation helps in troubleshooting, knowledge sharing, and future app enhancements.

4. Do’s and Don’ts When Working with the App Designer

Do’s:

  • Do regularly save your app and publish all in your solution files, and when working within a team make sure to coordinate when this is done.
  • Do leverage the new App Designer’s capabilities for customization and configuration to create user-centric and efficient model-driven apps.
  • Do collaborate with other team members and stakeholders to gather feedback and validate app design decisions.

Don’ts

  • Don’t make hasty changes without considering the impact on existing app functionalities or user experience.
  • Don’t save and publish changes without coordinating with team members that might also be working on the same objects.
  • Don’t make complicated menu structures or changes to the ribbon that could be solved with security roles or better UI/UX

Wrapping up
The new version of the App Designer provides a robust and intuitive platform for designing and customizing model-driven apps on the Power Platform. By understanding its menu items, leveraging its advantages, following best practices, and adhering to the do’s and don’ts outlined in this blog post, you can create highly tailored and efficient business applications that meet your organization’s unique needs and drive user satisfaction.

You have worked your way through the five guides for working with model-driven apps on the power platform and are well on your way to become a fully-fledged citizen developer. If you find I missed an important part or find yourself struggling with a specific area of building model-driven apps, then let me know via LinkedIn or a comment below and I will do my best to either update the guides or maybe even add a completely new post. Have fun making great apps!

Posted in , ,

5 responses to “Getting started with model-driven apps – Working with the App Designer”

  1. Jesper Ross Stocholm Avatar
    Jesper Ross Stocholm

    Great post, Søren 😊. I do miss pictures and screenshots, though … graphics make everything more appealing.

    Btw, would you like suggestions to future posts here in the comment section?

    Like

  2. Getting started with model-driven apps – Working with solutions – Power Apps Viking Avatar

    […] This is the first of 5 posts in my new series exploring the key things you need to know, as a citizen developer, when getting started with building model-driven apps, on the Power Platform.1. Working with solutions (this post)2. Working with tables3. Working with forms4. Working with views5. Working with the App Designer […]

    Like

  3. Getting started with model-driven apps – Working with tables – Power Apps Viking Avatar

    […] Getting started with model-driven apps – Working with the App Designer – Power Apps Viki… June 16, 2023 at 10:28 am […]

    Like

  4. Getting started with model-driven apps -Working with views – Power Apps Viking Avatar

    […] Getting started with model-driven apps – Working with the App Designer – Power Apps Viki… June 16, 2023 at 10:28 am […]

    Like

  5. Getting started with model-driven apps – Working with forms – Power Apps Viking Avatar

    […] This post is a part of a series of 5 post exploring the key things you need to know about, when getting started with building model-driven apps on the Power Platform.1. Working with solutions2. Working with tables3. Working with forms (this post)4. Working with views5. Working with the App Designer […]

    Like

Leave a reply to Getting started with model-driven apps – Working with solutions – Power Apps Viking Cancel reply