PDF/Word/Excelの稟議書をHTMLレイアウトエディターで再現してみよう！(コーディングなしで)
- Gluegent Flow
数多くのワークフローサービスからGluegent Flowをご検討いただきありがとうございます。ワークフローを導入するにあたり、現在お使いのPDF/Word/Excelの様式に合わせたいという声をよくお聞きします。Gluegent FlowのHTMLレイアウトエディターでどうすればできるのか解決方法をご紹介します。また HTMLのコーディングができない、もしくはしたくない方向けにどうすれば簡単に作れるかを中心に解説します。
紙で運用中の稟議書とエディタで作成した入力フォーム
今回PDFで運用している稟議書をHTMLレイアウトエディターでどこまで再現できるかをご紹介します。まずは現行の稟議書と実際に入力フォームで作成したものを紹介します。
下記が現行運用中の稟議書です。
下記がHTMLレイアウトエディタで作成した入力フォームです。
ほぼ遜色なく、再現できているかと思います。ではどうやったら上記のような入力フォームが作れるか順番にご説明します。
まずは入力フォームの追加で項目を作成
入力させる予定の項目をまずは入力フォームの＋ボタンで追加しタイプを編集していきます。項目に合わせて単行テキスト、数値、複数行テキスト、添付ファイルなど設定していきます。
HTML Layout Editorで表や項目名を追加
「フォーム設定」の上の「フォーム全体の設定」からHTMLレイアウトエディターにチェックをしてエディタを起動します。その後、稟議書をテキストで直接書き、サイズ大きくし押印枠、入力項目枠を表追加で入れます。下記では押印枠にプレースホルダを利用しています。詳しくは、Gluegent Flowでよくいただくご要望と解決方法 第３回「ハンコの設定」を参考にしてください。また申請日、申請者、発注部署についてはプレースホルダで自動入力としており、ユーザーが入力する手間を減らしています。詳しくは、プレースホルダーの説明を参照ください。
中央揃えや右揃えで体裁を整える
入力項目ができたら、テキストの位置や表の位置を整える必要があります。表を選択し、右クリックするとメニューが現れます。ここで「表のプロパティ」を選択します。
「表のプロパティ」の「行揃え」がデフォルトは「左」に設定されていますので、ここで「右」に設定することで表自体を右に寄せることができます。
単行テキスト/複数行テキストの横幅を調整
件名や目的の項目は追加しただけですと横幅が短めに設定されています。もし枠ギリギリまで入力項目の枠を広げたい時には「表示設定」から「入力幅設定」の「入力欄の幅」を修正することで広げることができます。一旦、表ギリギリの９５％で設定してみます。同じように目的や意見の項目も９５％で設定しました。決裁金額の箇所は円の記載を入れたので９０％で幅を設定してあります。プレフィックスやサフィックスなどそのほかの細かい設定については、モデル編集 データタイプの説明を参照ください。
プレビューで最終確認
細かい点はプレビューで確認し、ズレがないか、思った通りの表示になっているか確認いただきます。最終的には下記のような入力フォームを実現することができますので現行でお使いのPDF/Word/Excelの稟議書などを再現することが可能です。ただし、PDFなどそのままコピーしても罫線などが大きくずれてうまく表示されないことが多くありますので、一から作成していただく方がスムーズかと思います。もしくはデフォルトフォーマットを利用することで、作成の手間を減らせますのでそちらでの運用も併せてご検討いただければと思います。
いかがでしたでしょうか。既存の様式に合わせないといけないケースでも問題なさそうでしょうか。ご縁があって、ご導入いただきましたら、是非ともいろんな機能や用途でのご利用をしていただければと思います。
(Tsukada)
