【Garoon JavaScript API】ガルーンのワークフロー申請画面からkintoneのレコードを検索してデータをセットする

フォローする

 

Index

概要

「【Garoon JavaScript API】kintoneの事前費用申請アプリから内容を引き継いでガルーンの支払申請を作成する」でご紹介した、ガルーンとkintoneの連携Tipsに続き、ワークフロー連携をご紹介します。

今回は、kintoneを開かずに、ガルーンのワークフロー画面からkintoneのデータを検索して、そのデータをセットするという内容です。
前回よりも、もう一歩踏み込んだ連携をご紹介します!

前提条件と注意事項

  • このカスタマイズには、現時点では「Garoon on cybozu.com」のクラウド版と「kintone」のスタンダードコースの契約が必要です。(2017年6月時点)
  • ワークフロー JavaScriptカスタマイズは、JavaScriptを適用した後に申請されたWFが対象になります。
    それ以前に申請されたワークフローには適用されません。
  • サンプルプログラムは、その動作を保証するものではありません。
  • サンプルプログラムの技術的なサポート等は行っていません 。

できること

パッケージ版だとできる外部DB連携をクラウド版でも実現できるようになりました!
今回は、そんな外部DB連携をkintoneにして、一歩踏み込んだ設定でご紹介したいと思います。

kintoneのアプリに日々利用した交通費を登録し、ガルーンでワークフロー申請するという場合、kintoneにあるデータをガルーンに持ってこなくてはいけません。

その際に、kintoneを開かなくてもガルーンのワークフロー申請画面から、kintoneのデータが検索できて、該当のデータをセットできるようになります。

完成イメージ

例)kintoneの「交通費申請」アプリに日々の交通費を登録し、月末にガルーンの「交通費申請」ワークフローで申請する場合

「申請者(検索用)」項目で名前を入力して、「kintone検索」をクリックすると、kintoneのレコードが検索され、そのデータがガルーンに設定されるという流れになります。

Grkin_completionGif.gif

 

今回はkintoneのアプリにはJavaScript/CSSファイルの設定は不要です。
ガルーンのワークフローの設定にのみ、JavaScript/CSSファイルを設定しカスタマイズしていきます。
kintoneアプリのフィールドコードは利用するため、まずはkintoneアプリの設定からはじめます。

kintone アプリの設定手順

交通費申請アプリを作成する

最初はkintoneの交通費申請アプリを作成します。
完成すると、作成画面は下記のようになります。
※アプリストアの「交通費申請」アプリを修正していただくと、簡単につくれます。
※アプリの具体的な作成方法は、以下のヘルプをご参照ください。
 アプリをはじめから作成する ~FAQアプリを作ってみよう~

______________.png

 

フィールドは以下の通り設定してください。  
フィールドコードは、ガルーン側に設定するJavaScriptコード内でそれぞれのフィールドを指定するための一意の文字列となります。
間違えないように設定してください。

フィールド名 フィールドコード フィールドタイプ 備考
申請者 Author 文字列(一行)  
申請月 ApplicationMonth 文字列(一行)  
社員番号 EmployeeNumber 数値  
所属部署 Department ドロップダウン  
承認者 Authorizer ユーザー選択  
タイトル Title 文字列(一行)  
日付(テーブル)

Date

日付

「日付」から「金額」まではテーブルとして設定します。

訪問先(テーブル) Destination 文字列(一行)  
交通手段(テーブル) Transportation ドロップダウン  
適用(テーブル) Application ラジオボタン  
金額(テーブル) Amount 数値  
(テーブルの設定) LineItem    
合計金額 Total 計算  
備考 Remarks 文字列(複数行)  


これでkintoneアプリの設定は完了です!
ガルーン側に設定するJavaScriptファイルの中にkintoneのアプリIDを入力しますので、アプリIDは覚えておいて下さい。

例)https://xxxxx.cybozu.com/k/xxx/ ←アプリIDはこの赤文字の部分に書いてある数字です。

ガルーン ワークフローの設定手順

ワークフローの項目の内容は、会社さんによって異なります。  
ここでは、サンプルということで完成イメージで利用した支払申請の申請フォームにJavaScript/CSSカスタマイズを設定する流れをご説明します。

①ガルーン ワークフローの申請フォームを作成する

まずはkintoneでアプリを準備したのと同じく、ガルーンで以下の項目を配置して、支払申請ワークフローの申請フォームを作成していきます。  
申請フォームの作成方法についてはこちらをご参照ください。  
フォーム作成は少し手間がかかるので、今回はそのまま読み込んで使えるサンプルフォームもご用意しています。(後述)

Garoon_WFCreate.png

 

それぞれの項目は以下の通り設定してください。  
ここでも項目コードは、JavaScriptコード内でそれぞれの項目を指定するための一意の文字列になります。
項目数が多いですが、こちらも間違えないように設定してください。

項目名 項目タイプ 項目コード 備考
標題 文字列(1行)(標準項目) Title 必須項目に設定
申請者(検索用) 文字列(1行) ApplicantForSearch  
(JavaScriptカスタマイズ用項目) JavaScriptカスタマイズ用 AddButton  
所属組織 メニュー    
(空白行) (空白行) 「空白行を追加する」で設定
1. 日付 SUB1_ITEM1_1  
行き先 文字列(1行) SUB1_ITEM1_2  
詳細 メニュー SUB1_ITEM1_3  
適用 ラジオボタン SUB1_ITEM1_4  
金額 数値 SUB1_ITEM1_5  
(空白行) (空白行) 「空白行を追加する」で設定
2. 日付 SUB1_ITEM2_1  
行き先 文字列(1行) SUB1_ITEM2_2  
詳細 メニュー SUB1_ITEM2_3  
適用 ラジオボタン SUB1_ITEM2_4  
金額 数値 SUB1_ITEM2_5  
(空白行) (空白行) 「空白行を追加する」で設定
3. 日付 SUB1_ITEM3_1  
行き先 文字列(1行) SUB1_ITEM3_2  
詳細 メニュー SUB1_ITEM3_3  
適用 ラジオボタン SUB1_ITEM3_4  
金額 数値 SUB1_ITEM3_5  
(空白行) (空白行) 「空白行を追加する」で設定
4. 日付 SUB1_ITEM4_1  
行き先 文字列(1行) SUB1_ITEM4_2  
詳細 メニュー SUB1_ITEM4_3  
適用 ラジオボタン SUB1_ITEM4_4  
金額 数値 SUB1_ITEM4_5  
(空白行) (空白行) 「空白行を追加する」で設定
5. 日付 SUB1_ITEM5_1  
行き先 文字列(1行) SUB1_ITEM5_2  
詳細 メニュー SUB1_ITEM5_3  
適用 ラジオボタン SUB1_ITEM5_4  
金額 数値 SUB1_ITEM5_5  
(空白行) (空白行) 「空白行を追加する」で設定
合計金額 自動計算    
(空白行) (空白行) 「空白行を追加する」で設定
備考 Remarks    

 

上記の通り設定が完了したら、土台となる申請フォームの作成は完了です。

サンプルフォームのダウンロードについて

申請フォームを作成するのに少し時間がかかるので、まずは動きを見てみたいという方向けに、そのまま環境に読み込んで使っていただけるサンプルの申請フォームをXML形式でご用意しました。  
完成イメージにある支払申請の申請フォームになります。

以下からサンプルフォームをダウンロードして下さい。

Grkin_sample_form.xml

このXMLファイルを、「申請フォーム一覧」から読み込んでいただくと、「【サンプル】交通費申請」という申請フォームが追加されます。  
項目コードも設定済みの状態です。  
サンプルフォームを追加する方法については、こちらをご参照ください。

※経路情報は各環境で異なり、存在しない経路を読み込むことはできないので、上記のXMLでは経路情報を省いています。
 申請フォームを有効化するには、経路情報の設定が必要になりますので、そちらも忘れず設定してください。

②JavaScript/CSSファイルを適用する

申請フォームの作成が完了したので、あと一歩です。  
ここから作成した申請フォームにJavaScriptファイルを適用していきます。  
設定するJavaScript/CSSファイルが少し多いですが、頑張ってください!

適用ファイルの準備

下記のサンプルコードをエディタにコピーして、ファイル名を「grkin_common.js」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
※こちらのJavaScriptファイルには、kintoneアプリのIDを設定したり、テーブル数の設定などお客様の環境に合わせて修正していただく箇所がございます。

次に、下記のJavaScriptファイルとCSSファイルもダウンロードしてください。
※こちらのファイルは修正せず、そのまま適用して利用いただくファイルとなります。

・grkin.jsファイル 
 grkin.js

・girkin.cssファイル
 grkin.css

JavaScript/CSSファイルとして使用するファイルのおよびリンクの追加

  1. 「申請フォーム情報」部分の右端にある「JavaScript / CSSによるカスタマイズ」をクリックします。
    ※申請フォームの詳細画面に「JavaScript/CSSによるカスタマイズ」というリンクが表示されない場合  
    ワークフローのカスタマイズが許可されていない場合はリンクが表示されませんので、こちらをご参照下さい。  

    Garoon_WFRequestFormDetails.png
  2.  [カスタマイズ] 項目に「適用する」を選択してください。
  3.  [JavaScriptカスタマイズ] 項目に下記を設定します。
    1. Cybozu CDNの次のライブラリを使用しますので、下記のリンクを追加してください。
      - jQuery
       https://js.cybozu.com/jquery/3.1.1/jquery.min.js
      - JQuery UI
       https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js
      - Moment.js
       https://js.cybozu.com/momentjs/2.17.1/moment.min.js
      - Spin.js
       https://js.cybozu.com/spinjs/2.3.2/spin.min.js
      - SweetAlert
       https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.min.js
    2. 「適用ファイルの準備」で用意した「grkin_common.js」と「grkin.js」のファイルを追加してください。
      ※設定するファイルおよびリンクの順番には意味がありますので、下記の点をご注意下さい。
      ・「grkin.js」のファイル内で、各ライブラリや「grkin_common.js」ファイルの内容を参照している為、
       各ライブラリや「grkin_common.js」ファイルを先に読み込まなければいけません。
       そのため、JavaScriptカスタマイズの適用するファイルおよびリンクの順番は下記のようにお願いします。
       - 設定する順番:
        1. 各ライブラリ
        2. grkin_common.js
        3. grkin.js
  4.  [CSSカスタマイズ]項目には、下記を設定します。
    1. Cybozu CDNの次のライブラリを使用しますので、下記のリンクを追加してください。
      - jQuery UI
       https://js.cybozu.com/jqueryui/1.12.1/themes/smoothness/jquery-ui.css
      - SweetAlert
       https://js.cybozu.com/sweetalert/v1.1.3/sweetalert.css
    2. 「適用ファイルの準備」で用意した「grkin.css」のファイルを追加してください。
      ※こちらも設定する順番にはご注意下さい。
  5. 上記設定完了後の完成イメージはこちらです。
    同じように設定ができましたら、「設定」をクリックしてください。
    JScustomization.png

 

以上ですべての設定は完了です!
最初にお見せした完成イメージの通り、動けば成功です。
お疲れ様でした!

おわりに

今回のサンプルはいかがだったでしょうか?

「grkin.js」というファイルは、変更しないことを前提にサンプルを作成しており、そのファイルの内容は上級者向けです。
そのため、今までのサンプルにはない内容となっております。
エンジニアの方なら、こちらのファイルも修正してみようかな?と思う方もいらっしゃるかもしれません。

GaroonにJavaScriptカスタマイズが追加されて、できることが広がっています。
このサンプルをきっかけに是非、色々と試していただければと思います。

今後もこのようなサンプルをご紹介させていただきますので、また見に来て下さい♪

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk