# 变更记录
| 产品版本 | 更新内容 | 更新日期 |
| --- | --- | --- |
| V6.0.4 | 增加了表单级抽屉容器功能，提供占位模式，满足用户使用场景，提升用户体验 | 2023-12-27 |
| | | |
# 功能介绍
点击单据内的某个按钮，支持单据内侧滑出一个侧边栏的效果，侧边栏可以提供占位属性，占位后不会遮挡单据的内容，同时单据可以与侧边栏做内容的联动；
# 视觉展示
# 如何使用
表单抽屉实现逻辑为使用`showForm`指令能力，**新增ShowType字段PageDrawer；**
1：按钮或者工具栏组注册点击事件（ks脚本）
```js
// 示例代码
// 注册点击事件
registerListener : function(e){
this.addClickListeners("kdtest_buttonap")
},
// 点击事件
click : function(e){
var parameter = new FormShowParameter();
parameter.setFormId("kdtest_duoyuyanwyq");
parameter.getOpenStyle().setShowType(ShowType.PageDrawer);
var styleCss = new StyleCss();
styleCss.setWidth("560px");
parameter.getOpenStyle().setInlineStyleCss(styleCss);
this.getView().showForm(parameter);
}
```
2：设置抽屉属性（java代码）
```java
// 示例代码
FormShowParameter parameter = new FormShowParameter();
// 设置抽屉内部formId
parameter.setFormId("");
//是否需要占位
parameter.getOpenStyle().setPlaceholder(false);
//抽屉容器
parameter.getOpenStyle().setShowType(ShowType.PageDrawer);
//打开位置 上：TopCenter 下：BottomCenter 左：LeftCenter 右：RightCenter
parameter.getOpenStyle().setFloatingDirection(FloatingDirection.LeftCenter);
this.getView().showForm(parameter);
```
# 属性说明
针对showForm指令返回的数据中几个涉及到表单抽屉配置项的字段详细说明：
| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| placeholder | 是否需要占位，默认true，传false不占位，不传和true占位 | boolean | true |
| direction | topCenter | rightCenter | bottomCenter | leftCenter | string | rightCenter |
| caption | 返回抽屉的标题信息 | object | {} |
| isShowClose | 是否显示关闭按钮，点击该按钮调用 **close **指令关闭抽屉，
true和不传时显示，false时不显示 | boolean | - |
| isShowTitle | 是否显示标题，true和不传时显示，false时不显示 | boolean | - |
| width | 抽屉宽度，抽屉方向为left&right时必传，不传时默认378px，top&bottom时不传默认100% | string | - |
| height | 抽屉高度，抽屉方向为top&bottom时必传，不传时默认378px，left&right时不传默认100% | string | - |
