向 Navigator 添加一个按钮以进行选择答案

【问题标题】：Adding a button to Navigator to exercise a choice向 Navigator 添加一个按钮以进行选择
【发布时间】：2019-11-08 13:24:28
【问题描述】：

Navigator 包含一项功能，用户可以在其中定义自己的表格视图，请参阅DAML docs for Navigator。

是否可以创建一个视图，其中一列呈现一个按钮，当单击该按钮时，会立即执行选择？

【问题讨论】：

标签： daml

【解决方案1】：

是的，这是可能的。自定义视图允许您渲染任意 React 组件，所以让我们创建一个来进行选择。

首先，从一个有效的frontend-config.js 文件开始。 DAML quickstart project 包含一个。

然后，确保在文件顶部至少导入以下符号：

import React from 'react';
import { Button, DamlLfValue, withExercise } from '@da/ui-core';

然后，定义以下顶级值（例如，就在export const version={...} 下方）：


// Create a React component to render a button that exercises a choice on click.
const ExerciseChoiceButtonBase = (props) => (
  <Button
    onClick={(e) => {
      props.exercise(props.contractId, props.choiceName, props.choiceArgument);
      e.stopPropagation();
    }}
  >
    {props.title}
  </Button>
)
ExerciseChoiceButtonBase.displayName = 'ExerciseChoiceButtonBase';

// Inject the `exercise` property to the props of the wrapped component.
// The value of that property is a convenience function to send a
// network request to exercise a choice.
const ExerciseChoiceButton = withExercise()(ExerciseChoiceButtonBase)
ExerciseChoiceButton.displayName = 'ExerciseChoiceButton';

最后，在表格单元格定义中使用以下代码：

{
        key: "id",
        title: "Action",
        createCell: ({rowData}) => {
          // Render our new component.
          // The contract ID and choice argument are computed from the current contract row.
          return ({
            type: "react",
            value: <ExerciseChoiceButton
              title='Transfer to issuer'
              contractId={rowData.id}
              choiceArgument={
                DamlLfValue.record(undefined, [
                  {label: 'newOwner', value: DamlLfValue.party(DamlLfValue.toJSON(rowData.argument).issuer)}
                ])
              }
              choiceName='Iou_Transfer'
            />
          });
        },
        sortable: true,
        width: 80,
        weight: 3,
        alignment: "left"
}

另一种选择是创建一个 React 组件，其中 onClick 处理程序使用 fetch() 发送 REST API 请求。在通过 Navigator UI 执行选择时检查网络流量，以找出请求的格式。

【讨论】：