Power Apps Dynamic Design: Explore Dynamic UI Strategies

If you are new to the world of Power Apps, it is where we blend our creativity with technology to build some seriously powerful and helpful applications. In this particular exploration we will be diving into an inventory management application for Dusty Bottle Brewery.

Our focus? Dynamic user interfaces (UI). It is all about making an app that is not only functional but also engaging and intuitive. Imagine an inventory app that adapts in real-time, showcasing inventory updates, new arrivals, and even alerts when a popular brew or item is running low. That is the power of dynamic UI in action, it makes our app come alive.

Join me as we explore Power Apps and learn how to transform a standard inventory management application into an interactive and responsive tool. We will dive into leveraging visible properties, integrating role-based elements, and much more. Whether you are an expert or just starting, come along on this exciting journey to create a dynamic and vibrant app.

The Visible property in Power Apps is crucial for creating a dynamic app at Dusty Bottle Brewery and forms the cornerstone of creating an engaging user experience. Using this property effectively is focused on displaying the right information at the right time for a sleek yet informative interface.

Here’s how it works in action: when we open our Inventory App, we are brought to a dashboard showing current stock levels. This main dashboard uses the visible property of various elements to dynamically show additional information for each item.

For example, each item shows a stock status badge indicating if the stock level is good, average, low, or extremely low. This is all made possible leveraging the visible property of these objects. It’s more than just hiding and showing object, we are creating a responsive experience that adapts to user interactions.

Let’s dive into the information (i) icon and the details it has to offer. By selecting the i icon for a product, we reveal additional information like the recommended order amount, cost per unit, and total cost for the recommended order.

Time to see how it works with some practical expressions. Below is the main dashboard. Notice how the information (i) icon appears on the selected item. This is accomplished by setting the visible property of the icon to ThisItem.IsSelected.

Additionally, by selecting this icon the user can display additional information. This information provides just in time insights. Providing for a responsive experience that displays all the required information at just the right time leaving a clean and simple dashboard with hidden power that is revealed through user interactions.

We use a variable to set the Visible property of the informational items. For the informational icons OnSelect property we use:

UpdateContext({locInfoVisible:!locInfoVisible});

The locInfoVisible variable toggles between true and false, acting as a switch. The pattern of using ! (i.e. not) and a boolean variable is helpful for flipping the variable’s value between true and false.

We are not limited to boolean variables to control our app objects visibility. Any expression that evaluates to true or false will work. An example of this within our app is the stock status badges. Each icon has its own specific condition controlling its visibility.

For each product we calculate the percentage of our target stock count. In the app we store this value in the text label lbl_Main_StockEval.

For example, the Extremely Low icon’s visible property is set to

Value(lbl_Main_StockEval.Text)<=20

This results in the icon showing only when the expression evaluates to true, that is if the item stock is less than or equal to 20% of the target amount.

Effectively pairing expressions with the visible property streamlines our app’s interface, focusing attention on what is most relevant. This elevates our apps from functional to intuitive and powerful.

Customizing apps based on user roles is crucial for any organization. Although this type of customizing includes things such as access control, it can go way beyond just that. Customizing our apps for different user roles is focused on making our apps more intuitive and user-friendly while recognizing what that means may differ for each individual or for each user role.

Let’s, examine a scenario with our Dusty Bottle Brewery inventory app where personnel should see a simplified dashboard focused on just their area of responsibility. Staff in the Brewing department should only see brewery related inventory, staff in the Sales and Marketing should only see merchandise related inventory, while staff in Logistics and Supply Chain should be able to view all items. This is where the flexibility of Power Apps shines, allowing us to tailor our apps based on the current user.

We first need to add the Office 365 Users data connector which then allows us to set UserProfile to the current user’s profile. In the Formulas property of the App object we add the following Named Formula:

UserProfile = Office365Users.MyProfileV2();

Note: This can also be done with a global variable by adding the following to the OnStart property of the App object.

Set(gblUserProfile, Office365Users.MyProfileV2());

The user profile provides the required information to personalize the user experience for our app. For example, we use UserProfile to welcome the current user in the top right of the app.

Next, we use the user’s department to control the data presented on the dashboard, ensuring relevant information is highlighted.

To add this role-based feature we add the following to the App OnStart property to pre-load the appropriate data.

Switch(
    true,
    UserProfile.department = "Brewing",
    ClearCollect(
        colSpInventory,
        Filter(
            Inventory,
            Category.Value = "Beer"
        )
    ),
    UserProfile.department = "Sales and Marketing",
    ClearCollect(
        colSpInventory,
        Filter(
            Inventory,
            Category.Value = "Merchandise"
        )
    ),
    UserProfile.department = "Logistics and Supply Chain",
    ClearCollect(
        colSpInventory,
        Inventory
    )
);

Here we filter the collection of inventory items (colSpInventory) based on the user’s department. This collection is then used in the Items property of the gallery displaying the inventory items. This approach enhances the efficiency and reducing clutter within our app.

For instance, Dusty Bottle’s Lead Brewer, Adele Vance, sees only brewery items, streamlining her experience. This helps Adele identify brewery items that are low in stock and provides all the information she requires without cluttering the dashboard with irrelevant information.

What is the most exciting about this level of control is the possibilities of the personalization aspect.

For example, let’s build on this role-based feature by expanding it beyond the user’s department. Dusty Bottle Brewery has a management team containing members of all departments and the members of this group should be able to see all inventory items. This group of users is defined by a Microsoft 365 group, and we will leverage the group’s membership to add this functionality to our app.

First, we add the Office 365 Group data connector to our app. Similar to Office 365 Users, this allows us to use Office365Group.ListGroupMembers to get all the members of our Management group.

Then we add another Named Formula to the Formulas property of the App.

ManagementMember = !IsBlank(
    LookUp(
        Office365Groups.ListGroupMembers("

Switch(
    true,
    UserProfile.department = "Brewing",
    ClearCollect(
        colSpInventory,
        Filter(
            Inventory,
            Category.Value = "Beer"
        )
    ),
    UserProfile.department = "Sales and Marketing",
    ClearCollect(
        colSpInventory,
        Filter(
            Inventory,
            Category.Value = "Merchandise"
        )
    ),
    ManagementMember || UserProfile.department = "Logistics and Supply Chain",
    ClearCollect(
        colSpInventory,
        Inventory
    )
);