Published at: 2026-09-17

Extend tree components and influence maps with PWC

Overview

Use a PWC plugin to customize graph layout, node styles, and interaction events.

Capability overview

The Account Contact Influence Map and tree component visualize hierarchical relationships. Standard components use predefined layouts and node styles. A PWC plugin can customize these settings for specific display or interaction requirements.

Before you begin

Before you begin - This guide is for implementation consultants and developers. - This capability is available in version 9.9.0 and later. - Supported clients include Web, App, and third-party H5. - Verify the current component version in a test environment.

Extended Content and extension points

Extension point	Purpose	Example
`processGraphOptions`	Adjust the base graph layout	Use a left-to-right layout or change node spacing
`processNodeConfig`	Adjust node styles	Change the border color, line width, or fill color
`processAddEvent`	Bind custom interaction events	Listen for clicks on a custom shape

Configuration example

The following example customizes the layout, node style, and a click event:

return {
  Value: {
    processGraphOptions(graphOptions, context) {
      graphOptions.layout.direction = 'LR';
      graphOptions.layout.getVGap = () => 60;
      return graphOptions;
    },
    processNodeConfig(nodeConfigOptions, context) {
      nodeConfigOptions.style = {
        stroke: '#189DFF',
        lineWidth: 2,
        fill: '#F2F4FB'
      };
      return nodeConfigOptions;
    },
    processAddEvent(graph, context) {
      graph.on('custom-shape:click', (event) => {
        console.log('Custom element has been triggered!', event);
      });
    }
  }
};

Verify the extension

Load the plugin in a test environment.
Check the layout direction and node styles.
Click the custom area and verify the event.
Test the extension on Web, App, and H5.

Note: This example demonstrates the configuration approach. Use the APIs and context parameters available in your current PWC environment.

Disable the extension

If the plugin affects graph display or interaction, disable it or restore the previous verified implementation. Test all three client types again after restoration.