“操作列”凭什么就能提升用户体验？

栏目：云苍穹知识作者：金蝶来源：金蝶云社区发布：2024-09-23浏览：1

“操作列”凭什么就能提升用户体验？

当我们遇到以下场景时：

场景1

通常我们通过超链接来对单据进行查看和修改，如下图：

如果实际的业务中超链接存在多个，用户希望更明确的交互。

场景2

当用单据体控件实现数据展开的操作时，用户希望单据体的每行数据放置一个按钮去处理业务，如下图：

那么如何实现这两种场景呢？

这时候“操作列”就闪亮登场啦，一起来看看解决方案吧！

1 解决方案

1.1 列表上增加操作列来提高用户体验

1.首先进入到列表设计器，在左侧的树形菜单找到“操作列”。

2.接着将操作列拖到列表设计器的表格视图上。

3.选定操作列控件，设置操作列的操作项。

4.通过操作项设置窗体可以设置操作列绑定的操作，以及一些基本的样式，比如：可见性，背景色，字体等。

5.完成配置后可以看到下面的效果，是不是好看了很多了，并且给用户的体验是非常清晰的感觉。

1.2 通过操作列实现单据体展开数据

在需要的单据体控件上放置操作列，设置操作项，设置操作列显示方式为下拉列表。

操作项的设置界面：

操作列默认支持无交互的操作功能，要实现交互效果需要在beforeDoOperation方法来实现页面交互逻辑。

效果预览：

展开后的效果：

2 方案解析与价值

对于批量场景较少的如修改、查看等操作，放置在列上，这样可以提高用户操作的明确性。

工具栏的按钮更适合批量处理，如:提交，审核等。

操作列的价值在于通过对操作场景的细分，给业务提供了进行针对行数据操作的实现方式，这样产品设计和需求人员在进行界面设计时能给用户提供更加有价值，清晰，明确的交互，大大提高用户的交互体验性。

3 高级技巧

当我们对眼前的成果沾沾自喜时，聪明的你会发现目前的方案并不完美。

举个例子，如果用户A没有对第一条数据的修改权限，那么修改按钮是不是不应该放出来呢？你可以说我可以在点击“修改”按钮的时候做数据权限校验。

那么有没有更好方式呢，当然有！那就是将它隐藏。

列表上操作列控制列的显示与隐藏实例代码

@Override
public void packageData(PackageDataEvent e) {
   // 判断是操作列
   if (e.getSource() instanceof ListOperationColumnDesc) {
      // 获取操作列的所有操作项
      List<OperationColItem> operationColItems = (List<OperationColItem>) e.getFormatValue();
      // 遍历操作列的所有操作项
      for (OperationColItem operationColItem : operationColItems) {
         // 如果是修改操作,并且没有修改权限，设置为隐藏
         if ("modify".equalsIgnoreCase(operationColItem.getOperationKey())
               && !hasModifyRight()) {
            // 设置可见性
            operationColItem.setVisible(false);
         }
      }
   }
   super.packageData(e);
}

单据体上操作列控制列的显示与隐藏实例代码

值更新的情况下进行控制。

public void propertyChanged(PropertyChangedArgs propertychangedargs) {
   // 获取单据体控件
   EntryGrid entryGrid = this.getControl("entryentity");
   List<String> opeIds = new ArrayList<>();
   // 设置元数据为“查看”操作列
   opeIds.add("view");
   // 隐藏操作列
   entryGrid.hideOperateItems("operationcolumnap", 0, opeIds);
}

初始加载时控制显示与隐藏。

@Override
public void initialize() {
   // 获取单据体控件
   EntryGrid entryGrid = this.getControl("entryentity");
   // 注册包装数据监听
   entryGrid.addPackageDataListener(pkEvent -> {
      Object status = pkEvent.getRowData().get("status");
      // 根据列的元数据判断是操作列
      if (pkEvent.getSource() instanceof OperationColumn
            && "operationcolumnap".equalsIgnoreCase(((OperationColumn) pkEvent.getSource()).getKey())) {
         List<OperationColItem> operationColItems = (List<OperationColItem>) pkEvent.getFormatValue();
         for (OperationColItem operationColItem : operationColItems) {
            // 如果是审核操作
            if ("audit".equalsIgnoreCase(operationColItem.getOperationKey()) && status.equals("审核")) {
               // 设置为不可见
               operationColItem.setVisible(false);
            }
         }
      }
   });
   super.initialize();
}

隐藏后的效果如下：

4 常见问题

1. 操作列的设计原理是什么？

操作列实际上绑定的还是操作，如果需要对操作进行插件干预，需要在操作上注册操作插件来实现。

2. 如何设置操作列的锁定性？

可以参考上面高级技巧的例子做下调整：

// 设置前景色
operationColItem.setForeColor("green");
// 设置操作列内容
operationColItem.setOperationName(new LocaleString("test"));
// 设置可见性
operationColItem.setVisible(false);
// 设置锁定性
operationColItem.setLocked(true);
// 设置字体大小
operationColItem.setFontSize("12px");
// 设置图标
operationColItem.setIcon("xxx");
// 设置操作Key值
operationColItem.setOperationKey("modify");
// 设置操作列默认显示风格，0：默认风格 1：下拉列表
operationColItem.setShowStyle(1);

以上就是本期的全部内容了，更多资料详见下方链接~

列表设计

#往期推荐#