Network Map using vis.js Network and NPSP Relationship & Affiliation

Lightning web component that renders a network map on a contact record using the contacts NPSP Affiliations and NPSP Relationships.

Features

• Network view
• Hiearchy view
• Filtering
• SLDS icons and coloring
• relationship labels & weighting
• node hovering

Viewing Network

Viewing Hierarchy

Filter Menu

Salesforce Environment Requirements

• Lightning
• API version > 49
• NPSP Package installed (leverage Affiliations & Relationships)

vis.js library

• vis-network v8.2.0 unpackaged
• vis-data v7.0.0 unpackaged
• vis.js Network Examples
• vis.js Network Docs

How to use

1. Download repository
2. load into Salesforce instance
3. Edit Contact Lightning Page layout
4. add Network Map component to page