SPFX自适应卡片按需显示：SharePoint无数据时隐藏

步骤1：修正无效的CAML查询 #

你的现有CAML查询中<Neq>节点缺少匹配值，会导致查询逻辑失效，先补全过滤条件（示例中假设排除Status为"Completed"的条目，可根据实际业务调整）：

const renderListDataParams: IRenderListDataParameters = {
    ViewXml: `<View>
                <Query>
                    <Where>
                        <Neq>
                            <FieldRef Name='Status'/>
                            <Value Type='Text'>Completed</Value>
                        </Neq>
                    </Where>
                    <OrderBy>
                        <FieldRef Name='Modified' Ascending='False'/>
                    </OrderBy>
                </Query>
            </View>`,            
};

步骤2：通过状态管理控制卡片显示逻辑 #

在SPFX React组件中，使用useState维护卡片显示状态，结合useEffect执行数据查询并更新状态，最终通过条件渲染实现无数据时不占空间的效果：

import * as React from 'react';
import { IRenderListDataParameters } from '@microsoft/sp-listview-extensibility';
import { sp } from "@pnp/sp";
import { AdaptiveCard } from '@microsoft/sp-adaptive-card-extension-base'; // 引入对应Adaptive Card组件

const ListDrivenCardComponent: React.FC = () => {
    const [showCard, setShowCard] = React.useState(false);
    const [isLoading, setIsLoading] = React.useState(true);

    React.useEffect(() => {
        const fetchAndCheckData = async () => {
            try {
                const renderListDataParams: IRenderListDataParameters = {
                    ViewXml: `<View>
                                <Query>
                                    <Where>
                                        <Neq>
                                            <FieldRef Name='Status'/>
                                            <Value Type='Text'>Completed</Value>
                                        </Neq>
                                    </Where>
                                    <OrderBy>
                                        <FieldRef Name='Modified' Ascending='False'/>
                                    </OrderBy>
                                </Query>
                            </View>`,            
                };
                
                const query = new Map<string, string>();      
                const data = await sp.web.lists.getByTitle('test list').renderListDataAsStream(renderListDataParams, null, query);
                const rows = data.Row || []; // 处理数据返回为空时的undefined情况

                // 根据条目数量设置卡片显示状态
                setShowCard(rows.length > 0);
            } catch (error) {
                console.error('列表数据查询失败:', error);
                setShowCard(false); // 出错时默认隐藏卡片
            } finally {
                setIsLoading(false);
            }
        };

        fetchAndCheckData();
    }, []);

    // 加载状态可根据需求保留，避免仪表板出现空白闪烁
    if (isLoading) {
        return <div>加载中...</div>;
    }

    // 仅当有数据时渲染Adaptive Card，无数据时返回空片段（不占用空间）
    return (
        <>
            {showCard && (
                <AdaptiveCard 
                    cardJson={/* 你的自适应卡片JSON配置 */}
                    data={/* 绑定的列表数据 */}
                />
            )}
        </>
    );
};

export default ListDrivenCardComponent;

核心细节说明 #

• 边界处理：用data.Row || []避免因数据返回为空导致的rows.length报错
• 异常兼容：捕获查询异常，确保组件不会崩溃，同时默认隐藏卡片
• 无空间占用：通过{showCard && ...}的条件渲染逻辑，无数据时组件不输出任何DOM元素，彻底避免在Viva Connections仪表板占位

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