Using popovers to simplify an app's interface

1. Using popovers to simplify an app's interface

2. DEMO video

Welcome back. Great job building out your app for loan officer promotions. In this video we’ll learn about Sigma elements called popovers, which can add context and organize your apps and workbooks.. Oakmark Bank has asked us to add several filters to the main page of our loan approvals app, so users can easily drill into the subset of loan applications they’re interested in. The page controls are helpful, but now the page is cluttered - users must scroll down after making filter selections, and might have trouble remembering which filters were configured as they view the data. We’ll help them by leveraging a Sigma element called a popover. Popovers are like small windows that can be expanded or collapsed to provide an end user with additional choices or context. In this finished version of our loan approvals app, we’ve consolidated a number of our filter controls into this popover, which can be opened, configured, and then closed to hide them out of the way. Popovers can also display contextual information, such as in this example where we can click to expand the popover and read definitions of different loan statuses. Popovers are similar to modals in many ways. They are created from the Layout section of the Add Element bar, and appear as separate pages in our workbooks. Like modals, end users of our app won’t see these pages in the published version of the app, they’re just here for us as developers to configure the popover’s appearance. Also similar to modals, popovers can house any number of Sigma element types, not just filters or text. Both modals and popovers can have action sequences associated with them, but unlike modals, which have a dedicated type of action called ‘open modal’, popovers are opened simply by clicking on them to expand or collapse. Let’s create some popovers in our loan approvals app. First, we’d like to consolidate all of these page controls into a collapsible popover. Create a popover by selecting it from the Layout section of the Add Element bar. This places a button that opens an empty popover on the page, and creates a separate page tab called ‘Popover 1’ where we can configure how it looks while editing. The popover page is empty to start, so we’ll select these page filters and use the three-dot menu to move them to Popover 1 all at once. Now that they’re in place we can give the popover page a title. It may be helpful to add the word popover or ‘PO’ to the page name so its easy to differentiate in an app with many pages. Again, end users won’t see this page tab in the published version of the app. Now we can navigate back to the app’s main page, position the popover near the top, and configure its label, color and shape. We can even show the filter count, so users know how many filters are currently applied. Now we have an easily collapsible popover housing multiple controls. Our page is looking much less cluttered.

3. Let's practice!

Time for you to try it out. In the next exercises, you’ll find several page control filters have appeared in your app for promoting loan officers. Help Oakmark consolidate them into a popover.

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.

Introduction to AI Apps in Sigma

BeginnerSkill Level

0.0+

0 reviews

Chapter 1 introduces the foundational concepts behind building AI Apps in Sigma, with a focus on how apps integrate user input to drive action-based workflows. A major emphasis is placed on linked input tables, one of the most important building blocks for Sigma apps. You explore how to create linked input tables that display warehouse data alongside user-entered values, enabling direct interaction with underlying datasets. The chapter also covers best practices for governing user input, including controlling which data types can be entered and defining when tables are editable. By the end of this chapter, you’ll have a strong understanding of how to safely and effectively collect user input while maintaining data integrity within your app.

Exercise 1: What are AI Apps?Exercise 2: Exploring a finished app for loan approvals Exercise 3: A finished app for loan officer promotions Exercise 4: Enriching existing data with linked input tables Exercise 5: Understanding linked input tables Exercise 6: Creating a linked input table Exercise 7: Capture promotion nominations Exercise 8: Testing linked input table behaviors Exercise 9: Governing linked input table data entry Exercise 10: Managing edits to the loan officers input table

Chapter 3 focuses on refining the user interface and overall experience of your AI apps. You begin by learning about popovers, a versatile UI element used to hide filter menus or display contextual information only when it’s needed. This helps keep apps clean while still providing users with easy access to controls and details. The chapter also explores a range of design and organizational features that enhance both usability and visual appeal. You learn how to incorporate navigational buttons, dividers and tabbed containers to structure content and guide users through your app more effectively. By the end of Chapter 3, you’ll understand how thoughtful layout and design choices can make your AI apps more intuitive, polished, and enjoyable to use.

Exercise 1: Using popovers to simplify an app's interface

Current Exercise

Exercise 2: Configure a popover to contain page controls Exercise 3: Leveraging buttons for navigation & interaction Exercise 4: Adding a 'Clear filters' button in a popover Exercise 5: Adding UI & Layout elements for organization Exercise 6: Tidying up the loan officer promotions app Exercise 7: Bringing it all together Exercise 8: Wrap-up