无法在 Liferay 7.2 中呈现自定义表单字段
Can not render custom form field in Liferay 7.2
我正在将 7.1 DXP 门户迁移到 7.2 DXP,但我无法使用自定义表单域。
我使用 dynamic-data-mapping-form-field-type
模块作为蓝图。我的新字段在表单生成器中可用 - 但在使用它时,不会呈现任何内容。我在构建、部署或 JS 控制台中没有错误。不幸的是,7.2 还没有 blade 示例,所以我无法从一个简单的示例开始。
我的问题是:如何在 Soy 模板中挂钩渲染?
它正在 https://issues.liferay.com/browse/LPS-98417 中实施,确实没有 blade 示例。
同时您可以下载以下示例代码:
万一有人来这里是为了 Liferay 7.3。 Liferay 7.3 从 soy 模板转移到纯反应组件。您可以再次使用 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;
在这种情况下,我们正在导入 FieldBase 组件,它是 Liferay 字段包装器,它将负责添加任何默认的 Liferay 行为(验证、名称、占位符、工具提示等)。我们在使用 Soy 模板时也是这样做的。
您可以从 form-field blade 模板创建模块。然后删除 soy 模板文件以及 package.json 中的以下行
"build-soy": "metalsoy --externalMsgFormat \"Liferay.Language.get(‘\’)\" --soyDeps \"./node_modules/clay-*/src/**/*.soy\" \"./node_modules/com.liferay.dynamic.data.mapping.form.field.type/META-INF/resources/+(FieldBase|components)/**/*.soy\""
因为我们没有任何 soy 模板来生成 JS。
您最终得到的只是一个 es.js
文件。
编辑:
如果您使用 blade 生成模板,则可以使用此选项生成基于 React 的组件:
--js-framework react
我正在将 7.1 DXP 门户迁移到 7.2 DXP,但我无法使用自定义表单域。
我使用 dynamic-data-mapping-form-field-type
模块作为蓝图。我的新字段在表单生成器中可用 - 但在使用它时,不会呈现任何内容。我在构建、部署或 JS 控制台中没有错误。不幸的是,7.2 还没有 blade 示例,所以我无法从一个简单的示例开始。
我的问题是:如何在 Soy 模板中挂钩渲染?
它正在 https://issues.liferay.com/browse/LPS-98417 中实施,确实没有 blade 示例。
同时您可以下载以下示例代码:
万一有人来这里是为了 Liferay 7.3。 Liferay 7.3 从 soy 模板转移到纯反应组件。您可以再次使用 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;
在这种情况下,我们正在导入 FieldBase 组件,它是 Liferay 字段包装器,它将负责添加任何默认的 Liferay 行为(验证、名称、占位符、工具提示等)。我们在使用 Soy 模板时也是这样做的。
您可以从 form-field blade 模板创建模块。然后删除 soy 模板文件以及 package.json 中的以下行
"build-soy": "metalsoy --externalMsgFormat \"Liferay.Language.get(‘\’)\" --soyDeps \"./node_modules/clay-*/src/**/*.soy\" \"./node_modules/com.liferay.dynamic.data.mapping.form.field.type/META-INF/resources/+(FieldBase|components)/**/*.soy\""
因为我们没有任何 soy 模板来生成 JS。
您最终得到的只是一个 es.js
文件。
编辑:
如果您使用 blade 生成模板,则可以使用此选项生成基于 React 的组件:
--js-framework react