Liferay 7：使用 URL 参数和 Javascript 预填充表单

Question

我使用 Liferay 7 已经有一段时间了，需要创建一个带有预填值的反馈表。我创建了一个反馈表和一个页面，其中显示了反馈表，我可以在其中添加 Javascript.

用户点击 link（“您觉得这有帮助吗？Yes/No”），它会将您带到反馈页面，页面和答案作为 URL 参数.

URL: {feedback-page-url/} ?pageUrl=/services&answer=Yes

现在问题就从这里开始了。 Liferay 更新它的值非常混乱，虽然通用 document.getElementsByName(...) 等起初似乎有效，但在单击页面时它们会更新回来。困难的是更新正确元素中的正确值，这样它们就不会被 Liferay 覆盖。

我在下面回答了我的问题。有什么问题随时问我，我会尽力提供帮助:)

Answer 1

完整代码块到底！
所以我找到了解决这个问题的方法。 Liferay 创建一个实例 (_com_liferay...) 并使用它的值来更新，因此我们需要获取它并更新它的值。您可以通过检查和查找您的实例来手动执行此操作，但我有一个自动代码可以为您获取它。

我们正在搜索的id是DDMFormPortlet，我们通过这种方式得到的字符串接近完美。 document.querySelector()找到的String是以p_p_id_com...开头的，所以我们可以用.substring去掉不需要的部分，然后在最后加上+"form"使之完整。 如果您找到更好的查找方法，请分享:)

// _com_liferay_dynamic_data_mapping_form_web_portlet_DDMFormPortlet_INSTANCE_randomkey_form
const idFinder = function() {
    const idString = document.querySelector('[id*="DDMFormPortlet"]').id;
    return(idString.substring(6) + "form");
}

现在我们有了正确的字符串文本，我们将找到与之对应的元素：
const formFieldArray = window[idFinder()];

现在，如果您单独尝试它，它很可能找不到任何东西，因为它加载速度很慢。我将所有这些放入 try-catch 和 setTimeout() 以确保一切按预期工作。现在我们需要做的就是从 URL 收集信息并将其设置到正确的位置。

const params = new URLSearchParams(location.search);

const formAutoFiller = function (params) { 
    try {
        const formFieldArray = window[idFinder()];
        // make sure you have the numbers according to your form!
        formFieldArray.pages[0].rows[0].columns[0].fields[0].value=params.get('pageUrl');
        formFieldArray.pages[0].rows[1].columns[0].fields[0].value=params.get('answer');
        // ...
    }
}

最后，随着更改值在单击输入字段后更新到表单中，我们会将选择焦点移动到另一个代码之后的输入字段之一运行:
document.getElementsByClassName("ddm-field-text")[1].focus();

稍微清理一下我自己，我们就完成了！此处完整 Javascript：

const params = new URLSearchParams(location.search);

const idFinder = function() {
    const idString = document.querySelector('[id*="DDMFormPortlet"]').id;
    return(idString.substring(6) + "form");
}

const formAutoFiller = function (params) { 
    try {
        const formFieldRows = window[idFinder()].pages[0].rows;
        formFieldRows[0].columns[0].fields[0].value=params.get('pageUrl');
        formFieldRows[1].columns[0].fields[0].value=params.get('answer');
        document.getElementsByClassName("ddm-field-text")[1].focus();
    } catch (e) {
        setTimeout(formAutoFiller, 500, params);
    }
}

formAutoFiller(params);

Liferay 7：使用 URL 参数和 Javascript 预填充表单

Liferay 7: Using URL params and Javascript to prefill a form

javascript

forms

liferay-7