定制现代命令按钮(Modern commands)示例

Posted 2022-09-01 luoyong0201

我是微软Dynamics 365 & Power Platform方面的工程师/顾问罗勇，也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面的微软最有价值专家(Microsoft MVP)，这是我的第481篇原创文章，写于2022年8月31日。

以前我们常使用Ribbon Workbench来定制命令栏，不过以前的命令栏被成为经典命令(Classic commands)了。2011版本的时候是叫Ribbon区，应该是从2013或者更晚版本开始推出命令栏(command bar)，也有接近10年了，我也写了不少定制经典命令栏的博文，最近产品组推出了现代命令按钮的定制方法，已经GA了，所以我们来了解下。

请先参考官方文档，因为是新功能，发展比较快，请随时参阅最新官方文档，我的博文也会争取不断更新以反映最新的更新。

• ​​Modern commanding overview​​
• ​​Customize the command bar using command designer​​
• ​​Using Power Fx with commands​​
• ​​Open custom pages as dialogs and use cloud flows​​
• ​​Manage commands in solutions​​
• ​​Scopes for modern commands​​
• ​​Modern commanding known limitations​​

为啥要学新的modern commands的定制，除了这是已经GA的新功能，性能上有提升外，我挑几个我比较喜欢的理由，全面的比较请参考官方文档。

• 支持 Power Fx 和javascript，支持多一种，就多一个选择嘛，而且Power Fx在某些情况下用起来比JavaScript更加简单点。
• 多语言支持更加便捷，经典命令栏的多语言支持不是通过导出翻译，导入翻译来做的，而现代命令栏按钮的多语言支持和大部分多语言支持的方式统一起来了，通过导出翻译，导入翻译来做。
• 经典命令栏的按钮不支持仅限某个Model-Driven App的命令(当然用JavaScript调用客户端API来判断当前Model-driven App后确定是否显示改按钮也是支持的，麻烦些)，现代命令栏默认添加的按钮就是仅限当前App显示，它还支持其他两种范围，分别是Table和Global，Table就相当于以前的命令栏的范围。
• 以前经典命令栏的定制我们一般借助第三方工具，常用的就是Ribbon Workbench，发布的时候特别慢，而且这工具也不是官方工具，不在官方支持范围内。而定制现代命令栏不需要第三方工具，操作起来也简单多，不那么容易出错。
• 现代命令栏对解决方案和ALM支持更好。对经典命令栏的定制不会有单独的solution层，所以在使用托管解决方案的时候会产生问题，主要是修改后用托管解决方案布署不会生效等。现在现代命令栏和其他组件一样，可以方便的加入解决方案或者移除出解决方案，有单独的soluton层。
• 现代命令栏支持通过​​Custom Page​​调用Flow更加方便，这里我还没有完全搞懂，待以后补充。

优点那么多，那可以用现代命令编辑器来编辑经典命令栏吗？答案是目前不能，等以后经典命令转换成了现代命令就可以了，等通知吧。

下面我们来做个表单现代命令栏按钮的例子，看看如何做的。我这里假设的场景是，新增一个提交按钮，在审批状态为草稿，当前表单状态为编辑状态时候显示，点击按钮的时候弹出对话框请用户确认，确认后提交，提交结果告知用户。

首先，打开现代命令编辑器的方式变了，你需要编辑这个命令按钮默认绑定的Model-Driven App。如下，我打开这个Model-Driven App,为了方便我一般会选择 Edit in new tab。

确保左侧导航栏选择的是 Pages 这个菜单项，然后选择要编辑现代命令栏的表旁边的 ... 图标，选择 Edit command bar这个菜单项。

会打开新的浏览器Tab页，这个页面会弹出窗口，因为我是要编辑表单的现代命令栏，所以我选择 Main form，然后点击 Edit按钮。

打开的命令栏编辑器如下图，可以看到是三栏式布局：

然后我们选择 New > Command：

可以将新增的按钮拖动到合适位置，Label就是按钮显示的文本，我这里设置为提交。Icon就是按钮旁边的图标，我选择使用Use Icon，然后选择选择一个合适的图标，我这里使用的是QueueItemRoute这个图标，当然还可以使用SVG格式的Web资源作为图标。不过标准的图标很丰富也好看，我就直接选择一个标准的图标就可以了。Action既可以用Run JavaScript也可以用Run formula，我这里选择后者。Visibility 可以选择一直可见的Show选项也可以选择根据条件可见的 Show on condition from formula，我这里选择后者。因为按钮的Label属性已经很清晰的表明用途的，我就不设置Tooltip Title和Tooltip Description属性了。

我们现来定义显示规则，点击 Visibility 下面的Open formula bar，可以看到是有智能提示的。但是有个问题就是我今天添加的字段没有办法显示出来，哪怕我发布了新加字段所在表所在的解决方案后重新来编辑现代命令栏也还是看不到。甚至打开component library后刷新里面的Datasource，返回再打开现代命令栏编辑器也还是看不到。

后来我用的就是打开component library，

在打开的新窗口中，点击左侧导航栏的Data菜单，然后对用到的表进行刷新。

然后选择左边的Tree view菜单，切换到 Components菜单，选择 提交_1这个组件，选择Visible属性来设置这个按钮的可见规则。

我这里设置的值为：

Self.Selected.State = FormMode.Edit && Self.Selected.Item.审批状态 = 审批状态.未提交审批

然后我设置OnSelect属性的值为：值得注意的是，目前 NotificationType.Success 并不会显示对应的样式，而是使用  NotificationType.Information 的样式，希望尽快能改善。

If(
    Confirm("确定提交吗？提交后记录不可修改!",Title: "提交确认"),
    Patch(
        Test Entities,
        Self.Selected.Item,
        
            审批状态:审批状态.审批中,
            最近审批提交时间: Now(),
            最近审批提交人: LookUp(
                Users,
                Primary Email = User().Email
            )
        
    );
    Notify(
        "提交成功!",
        NotificationType.Success
    );
    Navigate(Self.Selected.Item),
    Notify(
        "您选择了不提交.",
        NotificationType.Information
    )
)

设置好以后选择 File > Save， 一般建议填入 Version notes，点击Save按钮。

然后点击 Publish 按钮。

在弹出的窗口中点击 Publish this version 这个按钮。

然后可以安全的关闭浏览器的这个Tab了。回到现代命令栏编辑器，我们可以看到修改的内容呈现出来了。

点击右上角的Play按钮来测试，最好到对应的页面再强制刷新下，确保修改效果可以看到。我这里点击 提交 按钮看到的效果如下：

如果我点击 Cancel 按钮，会看到界面有提示，可以看到这个提示信息不是表单级别的提示信息，位置不一样。

如果我点击 OK 按钮，执行完毕后会自动刷新当前页面展示最新信息，我代码设置的几个字段的值也展示出来了，提交按钮也不见了。但是你发现没有，最近审批提交人不是当前登录Model-Driven App的用户，而是一个 INTEGARTION的特殊用户，估计和SYSTEM账户差不多，有管理员权限的，不可以在界面上登录该用户。这个问题如何解决？前端我没有找到好的办法，当然可以结合后端来解决，命令按钮不给这个字段赋值，而用插件来监控审批状态字段，当审批状态变成审批中的时候给最近审批提交人赋值，这个是肯定没问题的。