概要

Gluegent Flow では、入力フォームの配置やフォーム欄のデザインを、Google ドライブのドキュメントやHTML で設定できます。ここでは例として、「施設利用申請」というモデルを作成し、自由なレイアウトで申請画面を設定します。

※Microsoft 365 および  Gluegent Flow Plus では HTML を使う方法のみお使いいただけます。

設定の手順(ドキュメントを使う場合)

モデルの作成

モデルを新規作成し、以下の各入力フォームを作成します。

• 利用施設（リスト）
• 利用開始日（日付）
• 利用開始時刻（時刻）
• 利用終了日（日付）
• 利用終了時刻（時刻）
• 備考（複数行テキスト）

ドキュメントの用意

レイアウト用のドキュメントを作成します。

入力フォームを配置したい場所に、「${項目名}」の形式で入力します。例えば、「利用施設」を配置したい場所には、「${利用施設}」と入力します。

「ファイル」メニューの「ページ設定」での設定値も、余白、背景色などはフォーム画面に反映されます。用紙サイズ設定は、横幅のみが反映されます。

レイアウトの例

レイアウト用ドキュメントの設定

モデル編集画面の「入力フォーム」にて「フォーム全体の設定」をクリックします。「Google Docs」を選択します。虫めがねアイコンをクリックし、作成したドキュメントを選択します。

ここで、「プレビュー」をクリックすると、作成したレイアウトにフォームが埋め込まれた状態をプレビューできます。

モデルを保存しますと、このレイアウトで申請できるようになります。

Google ドライブ側の変更を反映したい場合は更新アイコンをクリックしてください。

設定の手順(HTML を使う場合)

モデルの作成

モデルを新規作成し、以下の各入力フォームを作成します。

• 利用施設（リスト）
• 利用開始日（日付）
• 利用開始時刻（時刻）
• 利用終了日（日付）
• 利用終了時刻（時刻）
• 備考（複数行テキスト）

レイアウトの追加

モデル編集画面の「入力フォーム」にて「フォーム全体の設定」をクリックします。「HTMLレイアウトエディター」を選択します。「＋レイアウトを追加」をクリックします。

HTML Layout Editor が表示されますので、レイアウトを作成します。入力フォームを配置したい場所に、「${項目名}」の形式で入力します。例えば、「利用施設」を配置したい場所には、「${利用施設}」と入力します。設定が完了したら「OK」をクリックします。

レイアウトの例

ここで、「プレビュー」をクリックすると、作成したレイアウトにフォームが埋め込まれた状態をプレビューできます。

モデルを保存しますと、このレイアウトで申請できるようになります。

便利な使い方

書式

フォントの大きさや色、アンダーライン、イタリックなどの書式を「${項目名}」に設定すると「経路ごとの表示」設定が「表示」の場合に適用されます。

書式を設定する場合は、「${項目名}」の全体に対して設定して下さい。部分的に設定すると、正常にフォームを埋め込めない場合があります。

計算式・関数

計算式、関数もレイアウト上に埋め込むことができるので、「単価 × 数量 = 金額」というフォームを、横並び表示できます。

以下の入力フォームを追加します。

• 単価（数値）
• 数量（数値）
• 金額（計算式 単価 × 数量で設定）

以下のようなレイアウト設定を作成します。

フォームが埋め込まれるとこのようになります。

単価、数量に値を入力すると、金額欄に計算結果が表示されます。

通常のフォームとの違い

通常のフォームでは、項目名や接頭辞、接尾辞が入力フォーム欄に表示されますが、Google ドライブのドキュメントや HTML で作成したレイアウトの場合、表示されるのは入力欄部分のみとなります。

項目名、接頭辞、接尾辞は、レイアウトに直接入力してください。