在Mendix的PDFTron自定义PDF查看方案中用下拉框替代文本框设置Field Name

1. 准备后端数值列表并传递到前端页面 #

• 在Mendix页面中创建一个字符串列表类型的页面变量（比如fieldNameOptions），用来存储后端生成的字段名选项。
• 通过微流/ nanoflow从后端数据源（数据库、API等）拉取数值列表，赋值给这个页面变量，可通过页面加载事件触发微流完成数据填充。

2. 自定义PDFTron WebViewer Widget的前端修改 #

假设你用的是基于PDFTron WebViewer的自定义Mendix Widget，需修改Widget前端代码：

• 找到原来渲染Field Name文本框的代码，替换为HTML下拉框：

  <!-- 替换前的文本框 -->
  <input type="text" id="fieldNameInput" />
  
  <!-- 替换后的下拉框 -->
  <select id="fieldNameSelect"></select>
  

• 在Widget初始化逻辑中，接收Mendix传递的列表数据，动态填充下拉框选项：

  // 从Widget属性获取后端传递的选项列表
  const fieldOptions = this.props.fieldNameOptions; // 属性名需和Widget配置一致
  const selectElement = document.getElementById('fieldNameSelect');
  
  selectElement.innerHTML = '';
  fieldOptions.forEach(option => {
    const optionElement = document.createElement('option');
    optionElement.value = option;
    optionElement.textContent = option;
    selectElement.appendChild(optionElement);
  });
  

3. 关联下拉框选择与PDFTron字段名设置 #

修改PDFTron设置Field Name的逻辑，监听下拉框的change事件，将选中值传递给PDFTron的表单字段API：

const selectElement = document.getElementById('fieldNameSelect');
const annotManager = viewerInstance.annotManager; // 获取PDFTron的AnnotManager实例

selectElement.addEventListener('change', (e) => {
  const selectedFieldName = e.target.value;
  // 获取当前选中的表单注释
  const selectedAnnots = annotManager.getSelectedAnnotations();
  if (selectedAnnots.length > 0) {
    const fieldAnnot = selectedAnnots[0];
    // 设置字段名称
    fieldAnnot.setFieldName(selectedFieldName);
    annotManager.redrawAnnotation(fieldAnnot);
  }
});

4. 配置Mendix Widget的属性绑定 #

• 在Mendix的Widget配置面板中，添加一个列表类型的输入属性（比如FieldNameOptions），用于接收页面变量的数值列表。
• 将页面中创建的fieldNameOptions变量绑定到这个Widget属性，确保数据能传递到前端。

注意事项 #

• 如果用的是Mendix Marketplace的现有PDFTron Widget，需要克隆其代码进行自定义修改，无法直接在Studio中修改前端逻辑。
• 确保PDFTron的AnnotManager实例已正确初始化，避免出现viewerInstance或annotManager未定义的情况。
• 若需要默认选中某个选项，可在填充下拉框后设置selectElement.value = 目标默认值。

内容的提问来源于stack exchange，提问作者Marwane_Be