Understanding how individuals are connected to organizations is at the heart of nonprofit success. Whether you're managing volunteers, board members, or long-term donors, having a clear view of these relationships can make all the difference. That’s where Affiliations in Salesforce’s Nonprofit Success Pack (NPSP) come into play.
What Are Affiliations in NPSP?
In NPSP, Affiliations represent the relationship between a Contact and an Account. They help nonprofit users track how individuals are involved with various organizations, be it as volunteers, donors, employees, or board members.
These connections are stored in the npe5__Affiliation__c object and define:
- Which Contact is associated with
- Which Organization (Account)
- And in what role
This model provides a consolidated view of a person’s engagement across institutions, essential for fundraising, program management, and stakeholder reporting.
However, the standard Salesforce interface displays these affiliations as list views. While functional, it becomes hard to interpret when dealing with multiple, overlapping relationships. You’re left scanning tables and digging into records just to get a basic understanding.
What We Built (And Why)
To solve this challenge, we built a custom Lightning Web Component (LWC) that brings affiliation data to life through a dynamic, interactive graph. Instead of reading tables, users can see relationships unfold visually, just like a network map.
Key Features of the Affiliation Viewer Component
- Contact-Centric View: The selected Contact is placed at the center of the graph.
- Connected Nodes: All affiliated organizations are shown as surrounding nodes.
- Role Labels: Lines between the Contact and Organizations are labeled with the Contact’s role.
-
Interactive Popups: Click any node to:
- View the Contact or Account record
- Create a new Affiliation (if applicable)
- Re-center the view on a different node
- Dynamic Layout: Users can drag and reposition nodes for better visibility.
Why It Matters
- Clarity at a Glance: Get a complete picture of a person’s affiliations in one view.
- Faster Navigation: Jump into records or create new affiliations without leaving the screen.
- Stronger Insights: Instantly understand how deeply a contact is engaged across your ecosystem.
- Improved UX: Designed for program managers, fundraisers, and admins alike, reducing the learning curve.
Behind the Scenes: How the Component Works
To create a seamless experience, we combined powerful backend logic with a dynamic front-end display.
1. Apex Controller
This Apex controller gathers all relevant data and ensures the front-end receives clean, non-redundant affiliations:
- Queries all
npe5__Affiliation__crecords linked to the selected Contact. - Groups results by unique Account to eliminate duplicate lines.
-
Gathers each organization’s:
- Name
- Role of the Contact
- Salesforce ID (for navigation)
Why this matters: Prevents graph clutter and makes the visual map readable and actionable.
2. Lightning Web Component: AffiliationGraph
This is the heart of the solution. Here's what it handles:
Loads D3.js for Graph Rendering
- Uses Salesforce’s loadScript() to bring in D3.js dynamically.
- Ensures minimal load time and maximum interactivity.
Renders the Graph Layout
- Contact node is centered.
- All affiliated organizations are connected via labeled lines.
- Responsive layout adapts as new nodes are added or moved.
Adds Interactivity with Popups
-
Each node can be clicked to reveal a popup menu:
- View Record (Contact or Account)
- Create New Affiliation (when applicable)
- Re-center on selected Contact
Supports Drag-and-Drop
- Users can rearrange the nodes for better visibility.
- The layout self-adjusts using D3’s force simulation, ensuring nodes don’t overlap.
Why this matters: Keeps the interface user-friendly, even as relationships grow more complex.
The image above showcases a visual affiliation map centered around a contact named John Smith, created using a custom Salesforce Lightning Web Component. This diagram represents how John is connected to various organizations within a nonprofit context, helping users instantly understand his involvement across multiple entities.
Conclusion
Affiliations in NPSP are crucial, but their full potential is often buried under standard list views. Our custom Affiliation Viewer changes that by turning data into insight.
With this tool:
- Users get an instant visual snapshot of complex relationships.
- Teams work faster by reducing clicks and simplifying exploration.
- Nonprofits make smarter decisions, powered by a clearer view of their network.
This isn’t just a visualization tool—it’s a smarter, more human way to understand your relationships in Salesforce.
Get in touch today to discuss your project and see how our Xano expertise can make a difference. Contact us at support@astreait.com or visit astreait.com to schedule a consultation.