Expanding and Collapsing Grouped Items

Expanding and Collapsing Grouped Items

Expanding and Collapsing Grouped Items

The Situation

Picture this: A client approached us with a requirement to manage and track engagements and their related conversations. An engagement represents a topic of interest, while conversations are the interactions tied to each engagement. They wanted an interface where engagements could be expanded to reveal their related conversations, creating a seamless and user-friendly experience.

Here’s what we were working with:

  • Engagement Table: Contains all engagements, uniquely identified by an Engagement ID.
  • Conversation Table: Contains all conversations, each linked to an engagement via the Engagement ID. Each row is uniquely identified by a Conversation ID.
  • Relationship: A one-to-many relationship between engagements and conversations through the Engagement ID.

The Task

The objective was to create a gallery that:

  • Displays all engagements.
  • Allows users to expand an engagement to view its related conversations.
  • Enables seamless navigation between engagements and conversations.

The Action Plan

Step 1: Setting Up the Data

To simulate the data structure, we created two collections:

    ClearCollect(
Engagement_Col,
{
Title: "Engagement 1",
Purpose: "Demonstration of how to expand a gallery view",
Engagement_ID: 1
},
{
Title: "Engagement 2",
Purpose: "Second purpose for the demonstration of how to expand a gallery view",
Engagement_ID: 2
}
);

ClearCollect(
Conversation_Col,
{
Title: "Conversation 1",
Summary: "First conversation dummy summary",
Engagement_ID: 1
},
{
Title: "Conversation 2",
Summary: "Second conversation dummy summary",
Engagement_ID: 1
}
);

Engagement_Col holds engagement data, while Conversation_Col contains conversations linked to engagements by the Engagement ID.

Step 2: The Engagement Gallery

The main gallery displays all engagements. The Items property is set to:

    Engagement_Col

Placeholder for an image of the Engagement Gallery.

Step 3: Expanding the Engagement

When users click the Expand button, the following actions occur:

  1. Capture the selected engagement record: 
    Set(ENGAGEMENT_SELECTED_RECORD, ThisItem);
  2. Track the expanded engagement: 
    Collect(ExpEngIDCol, ThisItem.Engagement_ID);
Set(ExpEngUniqueID, Last(ExpEngIDCol).Value);
  3. Filter conversations for the selected engagement: 
    ClearCollect(ExpConvCol, Filter(Conversation_Col, Engagement_ID = ExpEngUniqueID));

Step 4: Visibility Controls

To toggle visibility between the engagement and conversation galleries:

  • Engagement Gallery: 
    IsEmpty(ExpConvCol)
  • Conversation Gallery: 
    !IsEmpty(ExpConvCol)

Step 5: The Conversation Gallery

The second gallery displays conversations from ExpConvCol. Each conversation is linked to the selected engagement.

Placeholder for an image of the Conversation Gallery.

Step 6: Collapsing Back

To collapse the view and return to engagements:

    Remove(ExpEngIDCol, Last(ExpEngIDCol));
Set(ExpEngUniqueID, Last(ExpEngIDCol).Value);
Clear(ExpConvCol);

The Result

The final gallery dynamically switches between engagements and their conversations. This clean, intuitive interface gives users full control over the data they see and ensures relevance.

Placeholder for an image showcasing the final result.

Conclusion

This project demonstrates the power of Power Apps in creating dynamic, user-friendly interfaces. By leveraging galleries, collections, and visibility controls, we delivered a solution that met the client’s needs and improved user experience.

Try this approach in your apps, and let me know how it works for you. I’d love to hear your feedback and see how you’re innovating with Power Apps!

Until next time, happy building!

– Gowtham

Related Posts