intra-martでワークフローシステムを作ってみた

# はじめに
はじめまして、入社して2年目の開発エンジニアです。
本記事ではintra-martの概要や使い方を整理していきます。

現場で使うこととなり、これまで学んだことをアウトプットしていきます。

# intra-martとは
intra-martはNTTデータが開発・運用している
Webアプリケーションプラットフォームです。
このサービスはローコード開発と業務プロセスのデジタル化を目的に使用されています。

主にワークフローや文書管理、グループウェアなどの機能が備わっています。

https://document.intra-mart.jp/library/iap/public/iap_introduction/texts/introduction/imart_means.html
# IM-BIS構成
IM-BISとは、IM-FormaDeginerとIM-Workflowの拡張パッケージのことを言います。
ノンプログラミングでの開発やドラッグ&ドロップで
画面やシステムの連携機能を設定することが可能になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/118e00e5-3f51-7329-ee32-cfb6c8b84838.png)

高度な専門スキルを求めることなく、
初心者でも開発できるような仕組みとなっております。

https://document.intra-mart.jp/library/bis/public/bis_manager_guide/common_module/texts/about/index.html
# ワークフローシステムを作ってみよう
intra-martで導入されているワークフローシステムではHTML/CSSで画面を作成したり、
JavaScript等で機能を追加したりなどする必要がありません。

新規でワークフローシステムを作成するには以下の手順に沿って実施します。

下記のサイトはintra-martが公開しているデモサイトになります。
こちらでログインし、実際にワークフローシステムを作ってみます。
https://www.intra-mart.jp/trial/demo-iap.html

まず、ユーザコードとパスワードを入力し、ログインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/634036f0-0610-9fcc-d75f-a9def4bdd669.png)

ログイン後、「サイトマップ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/e8a1654f-fa5a-e475-5974-25ce6b5d81bc.png)


## 1.承認フローの作成
1.intra-martのサイトマップ上で「IM-BIS」の「IM-BIS作成」をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/b793dbdb-2298-2537-abad-da8259bbd237.png)

2.「新規登録」ボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/d604d44b-0d50-4045-3dee-da59a19be99f.png)

3.「BIS名」を入力し、「登録」ボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/2b640e78-c24a-8327-2e4c-5722e144760c.png)


4.「ルート定義」の画面で一番左にある「承認者」をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/04b20dda-5586-652d-622c-40735a61940e.png)


「承認」アイコンが出てきましたね！
5.「申請」アイコンの右側にある「＋」ボタンを押しながら、「承認」アイコンとつなぐ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/12bf7d31-3246-71ff-727d-1618a1cc836d.png)

なんと矢印が出ました！
この矢印はワークフローの申請や承認のステップが進んだ時に、
次のユーザーに承認ステップが進むようになります。

6.「申請」アイコンを選択した状態で、「検索」ボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/310b15ae-430d-d0bb-cabb-513d113c5a95.png)

7.処理対象者のユーザを検索し、ユーザーを追加します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/04b48b97-3f8d-f3ba-5f17-ca6f604d652e.png)

8.「決定」ボタンを押すと。処理対象者が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/b809c7bf-07b4-d32a-d281-bb6dedf39490.png)

同じく「承認」アイコンでも同じように処理対象者を追加します。
処理対象者はintra-mart上で登録されているユーザーのみを追加することができないため、
外部からのユーザーを処理対象者として追加はできません。

9.ルートの定義が完了しましたら、「登録」ボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/b2e83580-f822-9b5f-c93f-74ff722ff014.png)


これでワークフローシステムのルートを定義しました。
次は申請書画面の作成をしていきます。
## 2.申請画面の作成
ルート定義が完了すると、以下の画面が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/0d7ffe80-c927-cd46-26b7-a53255708657.png)

1.「申請」アイコンをダブルクリックします

2.フォーム名を入力した後、「登録」ボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/f4740298-5743-4179-e7b4-ecdf433a696b.png)


3.フォーム編集画面が出てきたので、こちらで画面を作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/4ceea287-a79c-d62e-0770-25761f6494b1.png)

4.「ヘッダーとフッター」をクリックし、設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/67df9cc8-7e21-5423-fb06-84cff54a6b79.png)

すると、申請書画面のヘッダーが表示されましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/6b858d36-455f-ddd4-267d-ade778600740.png)

次は申請や承認するときに必要なアイテムを配置していきます。
こちらは「ツールキット」の中で、申請書画面で入力やボタンなどを
ドラッグ&ドロップで配置することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/5ae24c58-db73-10ce-397f-a7d799205047.png)

5.「入力アイテム」の「文字列」を配置していきます
なんと、文字を入力できるテキストボックスが表示されました。
「文字列」は一番左上にあるので、そちらをドラッグ&ドロップすると配置できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/68493fa8-a2d1-0b1a-77c2-cf38678fc549.png)

配置したアイテムの設定を行いたい場合はプロパティの設定が必要です。
プロパティ設定ではラベルやアイテムの位置などを設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/4eb49973-5a59-29b9-9944-8aa4c1b8a586.png)

6.一通り、アイテムを配置した後「更新」ボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/3495223b-5b63-d86e-895b-13fb19cc6d7a.png)

すると、「申請」アイコンが人型のアイコンになりましたね。
人型のアイコンになっているノードは
申請書画面が設定されている状態になっております。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/68893622-4f04-641f-98e7-4b7e67e06051.png)

同じように、「承認」ノードも申請書画面を設定します。

7.編集が完了したら、「定義の反映」をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3678292/49bcc48c-e432-8c20-4909-828a592b7d8b.png)


これでワークフローシステムを作成することができました。
この後は動作確認として、申請者/承認者毎のアカウントでログインし、
申請および承認できるかの確認を行います。

# おわりに
読んでいただきありがとうございます^_^

intra-martに関する記事を引き続き書いていきますので、
ぜひ参考にしてみてください！