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

Question

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

用户点击一个链接（“你觉得这有帮助吗？是/否”），它会将你带到反馈页面，页面和答案作为 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);