intra-mart Accel Platform IM-Workflow プログラミングガイド 第21版 2019-12-01

7.2.1. 画面

7.2.1.1. 申請/一時保存/申請(起票案件)/再申請画面

PC用画面とスマートフォン用画面について説明します。

7.2.1.1.1. PC用画面

../../../_images/appendix_2_figure_1.png
  • スクリプト開発モデル

    <./jssp/src/sample/im_workflow/purchase/screen/apply.html>
    <./jssp/src/sample/im_workflow/purchase/screen/apply.js>
    
  • JavaEE開発モデル

    <./lib/im_workflow-8.0.x-sample.jar/service-config-imw_sample_purchase.xml>
    
1
2
3
4
5
6
7
8
<service>
  <service-id>apply</service-id>
  <controller-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ApplyServiceController</controller-class>
  <transition-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ApplyServiceTransition</transition-class>
  <next-page>
    <page-path>/sample/im_workflow/purchase/apply.jsp</page-path>
  </next-page>
</service>

7.2.1.1.2. スマートフォン用画面

../../../_images/appendix_2_figure_2.png
  • スクリプト開発モデル

    <./jssp/src/sample/im_workflow_smartphone/purchase/screen/apply.html>
    <./jssp/src/sample/im_workflow_smartphone/purchase/screen/apply.js>
    
  • JavaEE開発モデル

    <./lib/im_workflow_smartphone-8.0.x-sample.jar/service-config-imw_sp_sample_purchase.xml>
    
1
2
3
4
5
6
7
8
<service>
  <service-id>apply</service-id>
  <controller-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ApplyServiceController</controller-class>
  <transition-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ApplyServiceTransition</transition-class>
  <next-page>
    <page-path>/sample/im_workflow_smartphone/purchase/apply.jsp</page-path>
  </next-page>
</service>

7.2.1.2. 処理画面

PC用画面とスマートフォン用画面について説明します。

7.2.1.2.1. PC用画面

../../../_images/appendix_2_figure_3.png
  • スクリプト開発モデル

    <./jssp/src/sample/im_workflow/purchase/screen/approve.html>
    <./jssp/src/sample/im_workflow/purchase/screen/approve.js>
    
  • JavaEE開発モデル

    <./lib/im_workflow-8.0.x-sample.jar/service-config-imw_sample_purchase.xml>
    
1
2
3
4
5
6
7
8
<service>
  <service-id>approve</service-id>
  <controller-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ApproveServiceController</controller-class>
  <transition-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ApproveServiceTransition</transition-class>
  <next-page>
    <page-path>/sample/im_workflow/purchase/approve.jsp</page-path>
  </next-page>
</service>

7.2.1.2.2. スマートフォン用画面

../../../_images/appendix_2_figure_4.png
  • スクリプト開発モデル

    <./jssp/src/sample/im_workflow_smartphone/purchase/screen/approve.html>
    <./jssp/src/sample/im_workflow_smartphone/purchase/screen/approve.js>
    
  • JavaEE開発モデル

    <./lib/im_workflow_smartphone-8.0.x-sample.jar/service-config-imw_sp_sample_purchase.xml>
    
1
2
3
4
5
6
7
8
<service>
  <service-id>approve</service-id>
  <controller-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ApproveServiceController</controller-class>
  <transition-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ApproveServiceTransition</transition-class>
  <next-page>
    <page-path>/sample/im_workflow_smartphone/purchase/approve.jsp</page-path>
  </next-page>
</service>

7.2.1.3. 確認画面

PC用画面とスマートフォン用画面について説明します。

7.2.1.3.1. PC用画面

../../../_images/appendix_2_figure_5.png
  • スクリプト開発モデル

    <./jssp/src/sample/im_workflow/purchase/screen/approve.html>
    <./jssp/src/sample/im_workflow/purchase/screen/approve.js>
    
  • JavaEE開発モデル

    <./lib/im_workflow-8.0.x-sample.jar/service-config-imw_sample_purchase.xml>
    
1
2
3
4
5
6
7
8
<service>
  <service-id>confirm</service-id>
  <controller-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ConfirmServiceController</controller-class>
  <transition-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ConfirmServiceTransition</transition-class>
  <next-page>
    <page-path>/sample/im_workflow/purchase/confirm.jsp</page-path>
  </next-page>
</service>

7.2.1.3.2. スマートフォン用画面

../../../_images/appendix_2_figure_6.png
  • スクリプト開発モデル

    <./jssp/src/sample/im_workflow_smartphone/purchase/screen/confirm.html>
    <./jssp/src/sample/im_workflow_smartphone/purchase/screen/confirm.js>
    
  • JavaEE開発モデル

    <./lib/im_workflow_smartphone-8.0.x-sample.jar/service-config-imw_sp_sample_purchase.xml>
    
1
2
3
4
5
6
7
8
<service>
  <service-id>confirm</service-id>
  <controller-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ConfirmServiceController</controller-class>
  <transition-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.ConfirmServiceTransition</transition-class>
  <next-page>
    <page-path>/sample/im_workflow_smartphone/purchase/confirm.jsp</page-path>
  </next-page>
</service>

7.2.1.4. 処理詳細/参照詳細/過去案件詳細/確認詳細画面

../../../_images/appendix_2_figure_7.png
  • スクリプト開発モデル

    <./jssp/src/sample/im_workflow/purchase/screen/detail.html>
    <./jssp/src/sample/im_workflow/purchase/screen/detail.js>
    
  • JavaEE開発モデル

    <./lib/im_workflow-8.0.x-sample.jar/service-config-imw_sample_purchase.xml>
    
1
2
3
4
5
6
7
8
<service>
  <service-id>detail</service-id>
  <controller-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.DetailServiceController</controller-class>
  <transition-class>jp.co.intra_mart.sample.workflow.purchase.controller.service.DetailServiceTransition</transition-class>
  <next-page>
    <page-path>/sample/im_workflow/purchase/detail.jsp</page-path>
  </next-page>
</service>
処理詳細/参照詳細/過去案件詳細/確認詳細画面(以下、詳細画面)では、コンテンツ定義で定義した画面が表示されます。
そのため、詳細画面にIM-Workflowの情報(案件名や添付ファイルなど)を表示する場合は、IM-Workflow が提供するタグライブラリを使用します。
案件の情報を表示するためのタグライブラリです。
../../../_images/appendix_2_figure_8.png
  • スクリプト開発モデル  detail.html

    43 | </header>
    44 | <imart type="workflowMatterData" systemMatterId=$data.imwSystemMatterId
    45 |                                  displayItem="matter_number,matter_name,apply_user,apply_base_date" />
    46 | <table class="imui-form">
  • JavaEE開発モデル detail.jsp

    51 | </header>
    52 | <workflow:workflowMatterData systemMatterId='<%=(String)request.getAttribute("imwSystemMatterId")%>'
    53 |                              displayItem="matter_number,matter_name,apply_user,apply_base_date" />
    54 | <table class="imui-form">
案件の添付ファイルを表示するためのタグライブラリです。
../../../_images/appendix_2_figure_9.png
  • スクリプト開発モデル  detail.html

    69 |  </table>
    70 |  <imart type="workflowMatterFile" systemMatterId=$data.imwSystemMatterId />
    71 | </div>
    
  • JavaEE開発モデル detail.jsp

    78 |  </table>
    79 |  <workflow:workflowMatterFile systemMatterId='<%=(String)request.getAttribute("imwSystemMatterId")%>' />
    80 | </div>
    
    ※ 案件に添付ファイルがない場合は、表示されません。
これらの詳細画面は、スマートフォン版 IM-Workflow から画面遷移した際、PC用の画面を新しいウィンドウで開きます。
スマートフォンからの画面遷移でPC用の画面を表示させたい場合は、明示的にクライアントタイプをPCに切り替える必要があります。
  • スクリプト開発モデル detail.js

    19 | function init ( request ) {
    20 |    ClientTypeSwitcher.oneTimeSwitchTo('pc');
    21 |
    
  • JavaEE開発モデル detail.jsp

    7 | <%
    8 | ClientTypeSwitcher.oneTimeSwitchTo("pc");
    9 | %>
    
    ClientTypeSwitcher について、詳細は「 APIドキュメント 」を参照してください。
また、新しいウィンドウで表示する画面にグローバルナビやマイメニューを表示させないようにするには、以下のフィルターに画面のパスを追加する必要があります。
<./conf/theme-head-only-path-config/*.xml>
  • スクリプト開発モデル

    7 |  <path>/sample/im_workflow/purchase/screen/detail</path>
    
  • JavaEE開発モデル

    8 |  <path>/imw_sample_purchase-detail.service</path>