JSPによるダイアログ実装

ダイアログコンポーネントの設定

<div id="_xform_contractIdField" _xform_type="dialog">
<xform:dialog propertyId="contractIdField" propertyName="contractNameField" 
             showStatus="edit" required="true" 
             subject="${lfn:message('contract-manage:contractManageKpsq.fdContrantNo')}" 
             style="width:95%;">
dialogSelect(false,'contract_select_dialog','contractIdField','contractNameField');
</xform:dialog>
</div>

フォーム設定ファイルの構成

contract_select_dialog: {
    modelName: 'com.example.contract.model.ContractData',
    sourceUrl: '/contract/data/contractDataService.do?method=fetchContractDetails'
},

dialogLinks: [{
    idField: 'invoiceForm[*].contractIdField',
    nameField: 'invoiceForm[*].contractNameField',
    dialog: 'contract_select_dialog',
    inputs: [],
    outputs: [{
        'key': 'contractTitle',
        'value': 'invoiceForm[*].contractTitleField'
    },{
        'key': 'totalAmount',
        'value': 'invoiceForm[*].contractAmountField'
    },{
        'key': 'collectedAmount',
        'value': 'invoiceForm[*].receivedAmountField'
    },{
        'key': 'projectIdentifier',
        'value': 'invoiceForm[*].projectIdField'
    },{
        'key': 'projectTitle',
        'value': 'invoiceForm[*].projectNameField'
    },{
        'key': 'projectDescription',
        'value': 'invoiceForm[*].projectDescField'
    },{
        'key': 'managerId',
        'value': 'invoiceForm[*].managerIdField'
    },{
        'key': 'managerName',
        'value': 'invoiceForm[*].managerNameField'
    }]
}]

ダイアログデータ表示JSP

<%@ page language="java" contentType="text/json; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/sys/ui/jsp/common.jsp" %>
<list:data>
    <list:data-columns var="contractItem" list="${queryResult.list}" varIndex="position" custom="false">
        <list:data-column property="recordId" />
        <list:data-column property="contractNumber" title="${lfn:message('contract-manage:contractData.contractNumber')}" />
        
        <list:data-column col="positionIndex">
            ${position+1}
        </list:data-column>
        <list:data-column property="contractTitle" title="${lfn:message('contract-manage:contractData.contractTitle')}" />
        <list:data-column property="contractValue" />
        <list:data-column col="formattedAmount">
            <c:out value="${contractItem.formattedAmount == null ? '' : contractItem.formattedAmount}" />
        </list:data-column>
        <list:data-column property="projectId" />
        <list:data-column property="projectName" />
        <list:data-column property="managerId" />
        <list:data-column property="managerName" />
    </list:data-columns>
    <%-- ページネーション情報 --%>
    <list:data-paging page="${queryResult}" />
</list:data>

バックエンド処理の実装

public ActionForward fetchContractDetails(ActionMapping mapping, ActionForm form, 
                                        HttpServletRequest request, HttpServletResponse response) throws Exception {
    try {
        String pageNumber = request.getParameter("pageNumber");
        String pageSize = request.getParameter("pageSize");
        String searchKeyword = request.getParameter("searchQuery");
        
        int currentPage = 0;
        int itemsPerPage = SysConfigParameters.getDefaultPageSize();
        
        if (pageNumber != null && !pageNumber.isEmpty()) {
            currentPage = Integer.parseInt(pageNumber);
        }
        if (pageSize != null && !pageSize.isEmpty()) {
            itemsPerPage = Integer.parseInt(pageSize);
        }
        
        HQLInfo queryInfo = new HQLInfo();
        queryInfo.setPageNo(currentPage);
        queryInfo.setRowSize(itemsPerPage);
        
        StringBuilder whereClause = new StringBuilder();
        if (StringUtil.isNotNull(searchKeyword)) {
            whereClause.append("(contractData.contractNumber like :contractNumber");
            queryInfo.setParameter("contractNumber", "%" + searchKeyword + "%");
            whereClause.append(" or contractData.contractTitle like :contractTitle");
            queryInfo.setParameter("contractTitle", "%" + searchKeyword + "%");
            whereClause.append(")");
        }
        
        String finalQuery = StringUtil.linkString(whereClause.toString(), " and ", 
                                                " contractData.status in ('11','20','30') ");
        queryInfo.setWhereBlock(finalQuery);
        queryInfo.setOrderBy("contractData.contractTitle asc, contractData.createTime desc");
        
        HQLHelper.by(request).buildHQLInfo(queryInfo, ContractData.class);
        queryInfo.setAuthCheckType(SysAuthConstant.AUTH_CHECK_NONE);

        Page resultPage = getServiceInstance(request).findPage(queryInfo);
        request.setAttribute("queryResult", resultPage);
        
    } catch (Exception error) {
        // エラーハンドリング
    }
    
    return mapping.findForward("fetchContractDetails");
}

外部ページへのデータ連携

<table class="dataTable" width="100%">
    <c:import url="/project/management/common/project_layout_info.jsp">
        <c:param name="displayMode" value="edit"/>
    </c:import>
</table>

データ受け取りページの実装

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/resource/jsp/common.jsp"%>

<tr>
    <td class="labelColumn" width="15%">
        主担当部門
    </td>
    <td width="35%">
        <div _xform_type="text">
            <xform:text value="${projectData.departmentId}" property="departmentIdField" 
                       showStatus="noShow" style="width:95%;"/>
            <xform:text value="${projectData.departmentName}" property="departmentNameField" 
                       showStatus="${param.displayMode == 'edit' ? 'readOnly' : param.displayMode}" 
                       style="width:95%;"/>
        </div>
    </td>
    <td class="labelColumn" width="15%">
        プロジェクト責任者
    </td>
    <td width="35%">
        <div _xform_type="text">
            <xform:text value="${projectData.managerId}" property="managerIdField" 
                       showStatus="noShow" style="width:95%;"/>
            <xform:text value="${projectData.managerName}" property="managerNameField" 
                       showStatus="${param.displayMode == 'edit' ? 'readOnly' : param.displayMode}" 
                       style="width:95%;"/>
        </div>
    </td>
</tr>