Custom page control folding panel folding display

创建自定义页面 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版自定义页面不支持不支持支持支持未升级到新版信息架构的组织，请 点此查看 使用手册1. 操作步骤在应用管理界面，提供了两个创建自定义页面的入口1.1 通过【新建页面】下拉菜单创建左上角新建页面，在下拉菜单中选择【新建自定义页面(Beta)】，开始创建新建自定义页面1....

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. Usage scenarios

This example describes how to control the folding display of the folding panel on the YIDA custom page.

2. Implement functions

2.1 create a custom page

2.2 configure folding panel

(1) enable restricted component options

(2) add variables and bind them

(3) bind events

export function onExpand(expandedKeys){
  console.log(expandedKeys);
  this.setState({
    expandedKeys,
  });
}

2.3 configuration function

The expandedKeys parameter contains the key of the expanded folding panel, starting from 0 from top to bottom. Item 1: 0, Item 2: 1, Item 3: 2...

(1) expand all

export function onExpandAll(){
  this.setState({
    expandedKeys: ["0", "1", "2"],
  });
}

(2) put it all away

export function onShrinkAll(){
  this.setState({
    expandedKeys: [],
  });
}

(3) expand/collapse the specified item

// 展开 / 收起指定项，key：展开 / 收起的项，type：expand（展开） shrink（收起）
export function onDesign(key, type) {
  if (!type || !key) { return };
  const { expandedKeys } = this.state;
  const index = expandedKeys.indexOf(key);
  if (index === -1 && type === 'expand') {
    // 展开
    expandedKeys.splice(1, 0, key);
  } else {
    // 收起
    expandedKeys.splice(index, 1);
  }
  this.setState({
    expandedKeys,
  });
}

// 展开第二个
export function onExpandSecond() {
  this.onDesign('1', 'expand');
}

// 收起第二个
export function onShrinkSecond() {
  this.onDesign('1', 'shrink');
}

3. Achieve results

4. Try it online

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_I7C9SNOI3I62YSIXMS82&from=yuque_subject