5.6. 画面の作成¶
- Formクラスから受け取った情報に基づいてユーザコンテンツ画面を表示させるためのJSPファイルを作成します。
5.6.1. タグライブラリの指定¶
JSPファイルのtaglibディレクティブにてタグライブラリの読み込みの指定を行います。
- クライアントタイプ「PC」 : IM-Workflow タグライブラリ
<%@ taglib prefix="workflow" uri="http://www.intra-mart.co.jp/taglib/imw/workflow" %>
- クライアントタイプ「SP」 : IM-Workflow スマートフォン タグライブラリ
<%@ taglib prefix="workflowSmartphone" uri="http://www.intra-mart.co.jp/taglib/imw/workflow-smartphone" %>
5.6.2. ユーザコンテンツ画面の表示権限制御¶
ワークフロー上の権限が有効なユーザのみがユーザコンテンツ画面を表示できるように、workflowUserContentsAuthタグを配置します。
workflowUserContentsAuthタグ を配置することで、ログインユーザがユーザコンテンツ画面の表示権限があるかどうかを確認します。
<workflow:workflowUserContentsAuth imwApplyBaseDate='${f:h(purchaseForm.imwApplyBaseDate)}' imwAuthUserCode = '${f:h(purchaseForm.imwAuthUserCode)}' imwFlowId='${f:h(purchaseForm.imwFlowId)}' imwNodeId ='${f:h(purchaseForm.imwNodeId)}' imwPageType = '${f:h(purchaseForm.imwPageType)}' imwSystemMatterId='${f:h(purchaseForm.imwSystemMatterId)}' imwUserDataId='${f:h(purchaseForm.imwUserDataId)}'/>クライアントタイプ「SP」の場合は、spWorkflowUserContentsAuthタグ を利用します。
<workflowSmartphone:spWorkflowUserContentsAuth imwApplyBaseDate='${f:h(purchaseForm.imwApplyBaseDate)}' imwAuthUserCode = '${f:h(purchaseForm.imwAuthUserCode)}' imwFlowId='${f:h(purchaseForm.imwFlowId)}' imwNodeId ='${f:h(purchaseForm.imwNodeId)}' imwPageType = '${f:h(purchaseForm.imwPageType)}' imwSystemMatterId='${f:h(purchaseForm.imwSystemMatterId)}' imwUserDataId='${f:h(purchaseForm.imwUserDataId)}'/>コラム
ユーザコンテンツ画面の表示権限制御の仕様については、 「 IM-Workflow プログラミングガイド 」-「 ユーザコンテンツ画面への不正な直接アクセスを抑止する 」を参照してください。
5.6.3. 標準申請・処理画面の呼び出し（クライアントタイプ「PC」）¶
ユーザコンテンツ画面での入力完了後に、標準申請・処理画面を呼び出す処理を記述します。
workflowOpenPageCsjsタグ を設置し、workflowOpenPageタグを利用するためのデザインスタイルシートの宣言・Javascriptを読み込みます。
<workflow:workflowOpenPageCsjs />workflowOpenPageタグ 設置します。
workflowOpenPageタグは標準申請・処理画面へ遷移するためのHTMLのフォームタグ（<FORM>）を生成するため、ユーザアプリケーションデータのINPUTタグが内包されるように配置します。
<workflow:workflowOpenPage name="workflowOpenPageForm" id="workflowOpenPageForm" method="POST" target="_top" imwUserDataId="${f:h(purchaseForm.imwUserDataId)}" imwSystemMatterId="${f:h(purchaseForm.imwSystemMatterId)}" imwAuthUserCode="${f:h(purchaseForm.imwAuthUserCode)}" imwApplyBaseDate="${f:h(purchaseForm.imwApplyBaseDate)}" imwNodeId="${f:h(purchaseForm.imwNodeId)}" imwFlowId="${f:h(purchaseForm.imwFlowId)}" imwCallOriginalParams="${f:h(purchaseForm.imwCallOriginalParams)}" imwNextScriptPath="${f:h(purchaseForm.imwCallOriginalPagePath)}"> <div class="imui-title-small-window"> <h1><spring:message code="SAMPLE.IMW.TSFW.CAP.001" /></h1> </div> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar"> <li> <a href="javascript:void(0);" id="back"> <span class="im-ui-icon-common-16-back"></span> </a> </li> </ul> </div> </div> <div class="imui-form-container"> <header class="imui-chapter-title"> <h2><spring:message code="SAMPLE.IMW.TSFW.CAP.001" /></h2> </header> <table class="imui-form"> <tbody> <tr> <th><label class="imui-required"><spring:message code="SAMPLE.IMW.CAP.020" /></label></th> <td><input type="text" value="${f:h(purchaseForm.item_name)}" id="item_name" name="item_name" size="50"></td> </tr> <tr> <th><label class="imui-required"><spring:message code="SAMPLE.IMW.CAP.021" /></label></th> <td><input type="text" value="${f:h(purchaseForm.item_amount)}" id="item_amount" name="item_amount" size="50"></td> </tr> <tr> <th><label class="imui-required"><spring:message code="SAMPLE.IMW.CAP.022" /></label></th> <td><input type="text" value="${f:h(purchaseForm.item_price)}" id="item_price" name="item_price" size="50"></td> </tr> <tr> <th><label><spring:message code="SAMPLE.IMW.CAP.024" /></label></th> <td> <textarea id="item_comment" name="item_comment" rows="3" cols="40">${f:h(purchaseForm.item_comment)}</textarea> </td> </tr> </tbody> </table> <div class="imui-operation-parts"> <imart:decision case="0" value="${f:h(purchaseForm.imwPageType)}"> <input type="button" value='<spring:message code="SAMPLE.IMW.CAP.003" />' id="openPage0" name="openPage0" class="imui-large-button" escapeXml="true" escapeJs="false" /> <input type="button" value='<spring:message code="SAMPLE.IMW.CAP.002" />' id="openPage1" name="openPage1" class="imui-large-button" escapeXml="true" escapeJs="false" /> </imart:decision> <imart:decision case="1" value="${f:h(purchaseForm.imwPageType)}"> <input type="button" value='<spring:message code="SAMPLE.IMW.CAP.003" />' id="openPage0" name="openPage0" class="imui-large-button" escapeXml="true" escapeJs="false" /> <input type="button" value='<spring:message code="SAMPLE.IMW.CAP.002" />' id="openPage1" name="openPage1" class="imui-large-button" escapeXml="true" escapeJs="false" /> </imart:decision> <imart:decision case="2" value="${f:h(purchaseForm.imwPageType)}"> <input type="button" value='<spring:message code="SAMPLE.IMW.CAP.003" />' id="openPage2" name="openPage2" class="imui-large-button" escapeXml="true" escapeJs="false" /> </imart:decision> <imart:decision case="3" value="${f:h(purchaseForm.imwPageType)}"> <input type="button" value='<spring:message code="SAMPLE.IMW.CAP.004" />' id="openPage3" name="openPage3" class="imui-large-button" escapeXml="true" escapeJs="false" /> </imart:decision> </div> </div> </workflow:workflowOpenPage>ユーザコンテンツ画面での入力完了後に、csjsファンクション workflowOpenPage(String pageType, String callback)を呼び出します。
$('#openPage0').click(function(){ if (!imuiValidate('#workflowOpenPageForm', rules, messages)) return; workflowOpenPage('0'); return false; });
5.6.4. 標準申請・処理画面の呼び出し（クライアントタイプ「SP」）¶
ユーザコンテンツ画面での入力完了後に、標準申請・処理画面を呼び出す処理を記述します。
spWorkflowOpenPageCsjsタグ を設置し、spWorkflowOpenPageタグを利用するためのデザインスタイルシートの宣言・Javascriptを読み込みます。
<workflowSmartphone:spWorkflowOpenPageCsjs />spWorkflowOpenPageタグ 設置します。
spWorkflowOpenPageタグは標準申請・処理画面へ遷移するためのHTMLのフォームタグ（<FORM>）を生成するため、ユーザアプリケーションデータのINPUTタグが内包されるように配置します。
<workflowSmartphone:spWorkflowOpenPage name="workflowOpenPageForm" id="workflowOpenPageForm" method="POST" target="_top" imwUserDataId='${f:h(purchaseForm.imwUserDataId)}' imwSystemMatterId='${f:h(purchaseForm.imwSystemMatterId)}' imwAuthUserCode='${f:h(purchaseForm.imwAuthUserCode)}' imwApplyBaseDate='${f:h(purchaseForm.imwApplyBaseDate)}' imwNodeId='${f:h(purchaseForm.imwNodeId)}' imwFlowId='${f:h(purchaseForm.imwFlowId)}' imwCallOriginalParams='${f:h(purchaseForm.imwCallOriginalParams)}' imwNextScriptPath='${f:h(purchaseForm.imwCallOriginalPagePath)}'> <ul data-role="listview" class="wrap"> <li data-role="fieldcontain"> <label for="item_name" class="imui-smart-ui-required"><spring:message code="SAMPLE.IMW.CAP.020" /></label> <input type="text" id="item_name" name="item_name" value='${f:h(purchaseForm.item_name)}' data-theme="d" /> </li> <li data-role="fieldcontain"> <label for="item_amount" class="imui-smart-ui-required"><spring:message code="SAMPLE.IMW.CAP.021" /></label> <input type="number" id="item_amount" name="item_amount" value='${f:h(purchaseForm.item_amount)}' data-theme="d" /> </li> <li data-role="fieldcontain"> <label for="item_price" class="imui-smart-ui-required"><spring:message code="SAMPLE.IMW.CAP.022" /></label> <input type="number" id="item_price" name="item_price" value='${f:h(purchaseForm.item_price)}' data-theme="d" /> </li> <li data-role="fieldcontain"> <label for="item_comment"><spring:message code="SAMPLE.IMW.CAP.024" /></label> <textarea id="item_comment" name="item_comment" data-theme="d">${f:h(purchaseForm.item_comment)}</textarea> </li> <imart:decision case="10" value='${f:h(purchaseForm.imwPageType)}'> <li data-role="fieldcontain"> <fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="button" id="openPage0" data-theme="b"><spring:message code="SAMPLE.IMW.CAP.003" /></button></div> <div class="ui-block-b"><button type="button" id="openPage1" data-theme="b"><spring:message code="SAMPLE.IMW.CAP.002" /></button></div> </fieldset> </li> </imart:decision> <imart:decision case="11" value='${f:h(purchaseForm.imwPageType)}'> <li data-role="fieldcontain"> <fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="button" id="openPage0" data-theme="b"><spring:message code="SAMPLE.IMW.CAP.003" /></button></div> <div class="ui-block-b"><button type="button" id="openPage1" data-theme="b"><spring:message code="SAMPLE.IMW.CAP.002" /></button></div> </fieldset> </li> </imart:decision> <imart:decision case="12" value='${f:h(purchaseForm.imwPageType)}'> <li data-role="fieldcontain"> <fieldset> <div><button type="button" id="openPage2" data-theme="b"><spring:message code="SAMPLE.IMW.CAP.003" /></button></div> </fieldset> </li> </imart:decision> <imart:decision case="13" value='${f:h(purchaseForm.imwPageType)}'> <li data-role="fieldcontain"> <fieldset> <div><button type="button" id="openPage3" data-theme="b"><spring:message code="SAMPLE.IMW.CAP.004" /></button></div> </fieldset> </li> </imart:decision> </ul> </workflowSmartphone:spWorkflowOpenPage>ユーザコンテンツ画面での入力完了後に、csjsファンクション workflowOpenPage4Sp(String pageType, String callback)を呼び出します。
$('#openPage0').click(function(){ if (!imspValidate('#workflowOpenPageForm', rules, messages)) return; workflowOpenPage4Sp('10'); return false; });