无法在 Liferay 7.2 中呈现自定义表单字段

Posted 2023-02-19

【中文标题】无法在 Liferay 7.2 中呈现自定义表单字段

【英文标题】：Can not render custom form field in Liferay 7.2

【发布时间】：2020-06-28 00:10:33

【问题描述】：

我正在将 7.1 DXP 门户迁移到 7.2 DXP，但我无法使用我的自定义表单域。 我使用dynamic-data-mapping-form-field-type 模块作为蓝图。我的新字段在表单构建器中可用 - 但是在使用它时，什么都不会呈现。我在构建、部署或 JS 控制台中没有错误。不幸的是，7.2 还没有刀片示例，所以我无法从一个简单的示例开始。 我的问题是：如何挂钩字段 Soy 模板进行渲染？

【参考方案1】：

如果有人在这里使用 Liferay 7.3。 Liferay 7.3 从大豆模板转移到纯反应组件。你可以再次使用 Liferay 的模块作为蓝图。

import  FieldBase  from 'dynamic-data-mapping-form-fieldtype/FieldBase/ReactFieldBase.es'

import React,  useState, useEffect, useRef  from 'react';

const Text = ( readOnly,
    id,
    name,
    onBlur,
    onChange,
    onFocus,
    placeholder,
    value: initialValue ) => 

    const [value, setValue] = useState(initialValue);

    return (
        <>
            <input type="text" />
        </>
    );
;

const Main = (props) => 
    return (
        <FieldBase  ...props>
            <Text ...props />
        </FieldBase>
    );


export default Main;

在这种情况下，我们正在导入作为 Liferay 字段包装器的 FieldBase 组件，它将负责添加任何默认的 Liferay 行为（验证、名称、占位符、工具提示等）。我们在使用 Soy 模板时也是这样做的。

您可以从表单域刀片模板创建模块。然后删除大豆模板文件以及 package.json 中的以下行 "build-soy": "metalsoy --externalMsgFormat \"Liferay.Language.get(‘\\$2’)\" --soyDeps \"./node_modules/clay-*/src/**/*.soy\" \"./node_modules/com.liferay.dynamic.data.mapping.form.field.type/META-INF/resources/+(FieldBase|components)/**/*.soy\"" 因为我们没有任何大豆模板来生成 JS。

你最终得到的只是一个es.js 文件。

编辑： 如果您使用刀片生成模板，则可以使用此选项生成基于反应的组件： --js-framework react

【参考方案2】：

它正在https://issues.liferay.com/browse/LPS-98417 中实现，确实没有刀片示例。

同时您可以下载以下示例代码：

https://github.com/natocesarrego/slider

【讨论】：

非常感谢，参考的 GitHub 表单域有效，是一个很好的起点。

@AndreAlbert@jorgetdiaz-lr 有任何可用的补丁吗？我有类似的要求来创建新的表单字段类型。谢谢

@Dipti - 我不知道是否有补丁。我使用了引用的示例 repo，并且可以添加一个开箱即用的字段

@AndreAlbert 感谢您的回答将尝试使用相同的 repo 来实现我需要的表单字段。

@AndreAlbert 我在您提到的仓库中进行了必要的更改以满足我的要求。除了必填属性外，一切都很好，如果我将字段标记为必填项，无论我是否输入输入，我都无法提交表单并且控制台中没有任何提示错误？提前致谢。