icCube图表下钻导航：保留原始成员及通用子项下钻方案咨询

Great question! This is a super common need when building interactive dashboards in icCube, and there’s a flexible, universal approach that works regardless of whether your row dimension is a single hierarchy or a multi-level combination. Let’s walk through how to make this happen:

Core Idea #

By default, icCube’s drilldown replaces the selected member with its children. We need to override this behavior: when a user triggers a drilldown, we’ll keep the original member visible and append its children below it instead of replacing it. We’ll use icCube’s custom navigation script to implement this logic, which dynamically adapts to any row dimension structure.

Step-by-Step Implementation #

1. Enable Custom Navigation for the Chart #

First, open your chart’s settings and head to the Navigation tab. Switch the navigation mode from the default "Drilldown" to Custom Script. This lets us take full control of the drilldown behavior.

2. Write the Custom Drilldown Script #

Paste this script into the custom script editor—it handles both expanding (drilldown) and collapsing, and works for any row dimension setup:

// Get context data from the chart's navigation event
const member = context.member();
const axis = context.axis(); // Targets the row axis (typically axis 1)
const currentMembers = axis.members();

// Find the position of the clicked member in the current row axis
const memberIndex = currentMembers.findIndex(m => m.uniqueName() === member.uniqueName());

// Check if the member is already expanded (contains its children in the axis)
const isExpanded = currentMembers[memberIndex].isSet() && 
                   currentMembers[memberIndex].members().some(child => 
                       child.uniqueName().startsWith(`${member.uniqueName()}.`)
                   );

// Build the updated member set
const updatedMembers = [...currentMembers];
if (isExpanded) {
    // Collapse: revert to the original single member
    updatedMembers[memberIndex] = member;
} else {
    // Expand: keep the original member + add its children
    const expandedSet = icCube.mdxSet(`${member.uniqueName()}, ${member.uniqueName()}.children`);
    updatedMembers[memberIndex] = expandedSet;
}

// Apply the modified query to the chart
axis.setMembers(updatedMembers);
context.applyQuery(axis.query());

3. Test the Behavior #

• Click any row member: it will stay visible, with its children appended directly below.
• Click the same member again: the children will hide, reverting to just the original member.
• This works seamlessly for single hierarchies (e.g., [Product].[Category]) and multi-level combinations (e.g., [Year].[2023] + [Product].[Category])—no prior setup for specific dimensions is needed.

Key Notes for Reliability #

• Dynamic Axis Detection: The script uses context.axis() to target the row axis, so it automatically adapts if you modify your chart’s row dimensions later.
• Hierarchy Agnostic: Whether you’re working with a parent-child hierarchy, level-based hierarchy, or even a mix of multiple dimensions, the script will correctly identify and expand/collapse the selected member.
• Performance: For very large hierarchies, you can add a check to limit the number of children (e.g., using TopCount), but the base script works efficiently for most standard use cases.

内容的提问来源于stack exchange，提问作者Arthur