工作流活动

To create a table to use inside your form​

1. Inside your workflow, add the Build Data Table activity.

2. Click DataTable... . The Build Data Table wizard opens.

3. 为表格添加所需的列并编辑其属性。当您使用这些名称通过“字段键”组件选项卡链接表单中的列时，请确保列名称中没有空格或特殊字符。

   

4. Click OK to save the table.

5. In the Properties panel > Output field of the Build Data Table activity, set a variable name for your table (for example, myTable ).

   使用此变量，您可以通过“创建表单”活动的“表单字段集合”属性将表绑定到表单。

   

To bind the data table to your form​

1. Add the Create Form activity in your workflow.

2. In the Properties panel > FormFieldsCollection field, click on the three dots menu (fa-ellipsis-v:) . The FormFieldsCollection wizard opens.

3. Create an argument and link it to the previously created table using the variable (i.e., myTable). Set the argument Direction to In/Out and the Type to DataTable. Give a Name to your argument, for example table.

   

4. 单击“确定” 。确保未选中“生成输入字段”框。

要将数据表绑定到“编辑网格”或“数据网格”组件，请执行以下操作：​

1. Open the Form Designer from the Create Form activity.

2. From the Data category, drag and drop a grid component (i.e., Edit Grid and/or Data Grid).

3. 在网格的“字段键”选项卡中，引用表参数（即table ）。

   “字段键值”区分大小写。

   

4. 将文本组件添加到网格中，以复制表格中的列。 保存每个文本组件。

   例如，如果您的表格包含名为Column1 、 Column2和Column3的三个列，则将三个文本组件拖放到网格中，并确保在“字段键”选项卡中使用表格中的列名称。

   “字段键值”区分大小写。

   

5. 保存表单。

使用引导程序 3​

1. 转到“编辑网格组件”设置 。
2. In the Templates tab > Header Template section, change the default generated code with the following template:
   assignment

   <div class="row">
         {% util.eachComponent(components, function(component) { %}
           {% if (displayValue(component)) { %}
           {% if (component.key=== 'Column3') { %}
                 <div class="col-sm-8">
               {% } %}
               {% if (component.key !== 'Column3') { %}
                 <div class="col-sm-2">
               {% } %}
             {{ component.label }}</div>
           {% } %}
         {% }) %}
       </div>
   <div class="row">
         {% util.eachComponent(components, function(component) { %}
           {% if (displayValue(component)) { %}
           {% if (component.key=== 'Column3') { %}
                 <div class="col-sm-8">
               {% } %}
               {% if (component.key !== 'Column3') { %}
                 <div class="col-sm-2">
               {% } %}
             {{ component.label }}</div>
           {% } %}
         {% }) %}
       </div>
   

3. In the Templates tab > Row Template section, change the default generated code with the following template:
   assignment

   <div class="row">
         {% util.eachComponent(components, function(component) { %}
          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}
               {% if (component.key=== 'Column3') { %}
                 <div class="col-sm-8">
               {% } %}
               {% if (component.key !== 'Column3') { %}
                 <div class="col-sm-2">
               {% } %}
               {{ getView(component, row[component.key]) }}
             </div>
           {% } %}
         {% }) %}
         {% if (!instance.options.readOnly && !instance.disabled) { %}
           <div class="col-sm-2">
             <div class="btn-group pull-right">
               <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
               {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
                 <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
               {% } %}
             </div>
           </div>
         {% } %}
       </div>
   <div class="row">
         {% util.eachComponent(components, function(component) { %}
          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}
               {% if (component.key=== 'Column3') { %}
                 <div class="col-sm-8">
               {% } %}
               {% if (component.key !== 'Column3') { %}
                 <div class="col-sm-2">
               {% } %}
               {{ getView(component, row[component.key]) }}
             </div>
           {% } %}
         {% }) %}
         {% if (!instance.options.readOnly && !instance.disabled) { %}
           <div class="col-sm-2">
             <div class="btn-group pull-right">
               <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
               {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
                 <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
               {% } %}
             </div>
           </div>
         {% } %}
       </div>
   

   备注：

   • 请注意，您将component.key值与列的确切名称进行比较，该名称与每个文本组件的“字段键”选项卡中使用的列（将数据表绑定到“编辑网格”或“数据网格”组件 中的第 4 步）。
   • UiPath 表单使用的是 Bootstrap 3 框架。 表格的总宽度分为 12 个部分。 因此，请确保您所做的任何除法之和均为 12。 在此示例中，具有 col-sm-2 类的两列占用 4 个部分，剩余的 8 个部分用于第三列 (col-sm-8)。

使用“样式”属性​

1. Hover over the Edit Grid component and click Edit. The configuration page opens.
2. Navigate to the Templates tab.

   1. 在“标头模板”脚本中，识别所有<div class="col-sm-2">标签并添加自定义宽度，如下所示： style="width:{your_custom_width}px !important" 。宽度必须以像素为单位。

   2. 在“行模板”脚本中，识别所有<div class="col-sm-2">标签并添加自定义宽度，如下所示： style="width:{your_custom_width}px !important" 。宽度必须以像素为单位。

      "col-sm-2"元素表示默认列宽。您可以通过添加自定义样式标签来修改默认列宽。例如， style="width:70px !important"将 70 像素的宽度应用于所有“编辑网格”列。

      

      

3. Save your component and the form.

1. 创建具有所需列宽的本地 CSS 文件。 在我们的示例中，以下模板创建了一个更宽的 Column3 （即 nth-child(3)）：
   assignment

   .mygrid tbody>tr>:nth-child(1){ 
   width: 70px;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }
   .mygrid tbody>tr>:nth-child(1){ 
   width: 70px;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }
   

2. In the Properties panel > LocalCSSFilePath field of the Create Form activity, reference the previously created CSS file. For example,"/file://C:\User\Desktop\EditColumnWidth.css".
3. In the Data Grid component > Display tab > Custom CSS Class field, enter the name of the CSS class (for example, mygrid).