Joget DX Preview Release Available for Download

Check out Joget DX, the next generation successor to Joget Workflow for faster, simpler digital transformation.

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This tutorial will show you on how to make multiple selections in a list and use them to prepopulate a select box in a form.

For example, in the figure below, we are selecting 2 rows and click on the "Add to Form" button.

Image Removed

This would bring us to the page as shown below with a form. The select box in the form has the 2 options earlier checked.

Image Removed

The way to implement this would require just 2 steps. One at the list level and the other one at the form level.

Step 1: Add Hyperlink Action in Datalist Builder

Open up the list in the Datalist Builder. Add a Hyperlink action to and configure it.

Image Removed

In the "Hyperlink", point it to a form. In the example below, we are pointing to a new form in a CRUD menu.

Add a new parameter to the link and populate it with "ID" value.

Remember the parameter name declared as we are going to read it from the form later on.

Image Removed

Step 2: Read and populate selection in Form Builder

Open the intended form that will open up as a result of the button click in the list earlier.

Add in a "Custom HTML" element into the form.

Image Removed

Paste in the code into the custom HTML element.本教程将向您展示如何在列表中进行多项选择,并使用它们预填充表单中的选择框。

例如,在下图中,我们选择了2行,然后单击“添加到表单”按钮。

Image Added

这将带我们到页面如下所示的表格。表单中的选择框早先选中了2个选项。

Image Added

实现这一点的方法只需要两个步骤。一个在列表级别,另一个在表单级别。

第1步:在Datalist Builder中添加超链接操作

打开Datalist Builder中的列表。添加超链接操作并对其进行配置。

Image Added

在“超链接”中,将其指向一个表单。在下面的示例中,我们指向CRUD菜单中的新表单。

向链接添加新参数并使用“ID”值填充它。

请记住声明的参数名称,因为我们稍后将从表单中读取它。

Image Added

第2步:在表单生成器中读取并填充选择

打开由于之前列表中的按钮单击而打开的预期表单。

在表单中添加“自定义HTML”元素。

Image Added

将代码粘贴到自定义HTML元素中。

Code Block
languagejs
linenumberstrue
<script type="text/javascript">
    $(function(){
       var value = decodeURIComponent("#requestParam.applications#"); //replace with the parameter name you declared in datalist action
       var values = value.split(';');
        $.each( values, function( index, value ){
            if(value != ""){
                $(FormUtil.getField("applications")).find("option[value='" + value + "']").attr('selected', 'selected'); //replace with the field ID of the select box in your form
            }
        });
        //$(FormUtil.getField("applications")).trigger("chosen:updated"); //enable this line if you are using Multi Select Box, replace with the field ID of the select box in your form
    });
</script>