機械翻訳について

Webフォームの作成準備が整ったら

その場合は、Webフォームの作成からエンドユーザーとしてのテストまで、主なステップを実行します。 ここでは、フォームとそのコントロールについて学習し、Webフォーム・エディタに関するヒントを習得し、Webフォームの開発ライフサイクル全体を完了します。

• 単純なアプリケーションの作成

• Webフォームの作成

• コントロールの追加および構成

• 別のプレゼンテーションの追加

• フォームのスタイルシートの変更

• フォームのプレビュー

• プロセス内でのフォームとプレゼンテーションの使用

• コントロールの動作の定義

• 実行時にフォームを試す

• 拡張フォーム・オプションの確認

単純なアプリケーションの作成

Webフォームを使用すると、人がビジネス・プロセスを操作できます。 たとえば、フォームでアプリケーションを開始したり、ヒューマン・タスクでフォームを使用できます。 最初に、トラベル・リクエスト・フォームで使用する要素を含む単純なアプリケーションを作成します。

1. ホームページに移動して、「プロセス」をクリックし、「プロセス・アプリケーション」、「作成」をクリックします。
2. 「アプリケーションを作成」をクリックします。
3. 「Create Application」ダイアログ・ボックスで、Travelと入力し、「Create」をクリックします。
4. 「Create a Process」ページで、「Start with a form」を選択します。
5. 「Create Process」ウィンドウで、Travel Processと入力し、「Create」をクリックします。
6. プロセスに承認ヒューマン・タスクを追加し、Approveというタイトルを付けます。

図create-simple-application.pngの説明

「最初のアプリケーションの作成(クイック・スタート)」を参照してください。

Webフォームの作成

従業員がトラベル・リクエストの詳細を入力できるようにフォームを作成します。 このフォームは、リクエストの承認または拒否を担当するユーザーにも表示する必要があります。

1. プロセスで、開始フォームのプロパティを開きます。 「Start」アイコンをクリックし、そのアクション・メニューをクリックします。 (フォームがフロー要素にまだ関連付けられていないため、「Open Form」コマンドはグレー表示されます。) 「Open Properties」を選択します。
2. 「Title」フィールドにRequest Travelと入力します。
3. 「Form」フィールドの近くにある「Create New Form」をクリックし、「New Web Form」を選択します。
4. 「Create New Web Form」ダイアログ・ボックスで、「Name」フィールドにTravelFormと入力し、「Create」をクリックします。

   
   図create-new-web-form.pngの説明

   新しいフォームの識別情報は「Properties」ペインの「Form」フィールドに表示されます。

5. 「Edit Form」アイコンをクリックします。

   フォーム用に入力したタイトルを持つ新しいタブでWebフォーム・エディタが開きます。

   エディタの中央にはキャンバスが配置されており、パレットに用意されているコントロールをそのキャンバス上にドラッグ・アンド・ドロップすることによってフォームを作成できます。 「Properties」ペインでは、設定を選択できます。 「Data」ペインには、フォームのコントロールのデータ属性がリストされます。

図form-editor.pngの説明

コントロールの追加および構成

基本パレットと先進パレットのコントロールを旅行リクエスト・フォームに追加しましょう。

1. フォームのキャンバス上に名前フィールドを1行で追加し、構成します。
   1. 基本パレットにある入力テキスト・コントロールをキャンバス上にドラッグ・アンド・ドロップします。
   2. 別の入力テキスト・コントロールを最初のコントロールの横にドラッグ・アンド・ドロップします。

      ドラッグ時には、コントロールを配置できる場所(別のコントロールの横、間または下など)が点線で囲まれたボックスで示されます。 ドロップすると、スペースを確保するために、非表示のグリッド上でコントロールが調整されます。 (フォームでは1行に最大で12個のコントロールを配置できます。)

      コントロールの位置を調整するには、点線のハンドルをドラッグして新しい場所にドロップします。 その周囲のコントロールは、それに従って調整されます。 編集するとき、必要に応じて「Undo」および「Redo」をクリックします。

   3. 最初のテキスト・コントロールを選択します。 「Properties」に「General」タブと「Styling」タブが表示されます。 タブ設定は選択したコントロールに適用されます。
   4. 「General」タブで、「Name」フィールドをFirstNameに変更し、「Label」フィールドをFirst Nameに変更します。 (「Name」フィールドはコントロール自体に適用され、「Label」フィールドはその表示名を示します。)
   5. ステップcとdを繰り返して、2番目のコントロール名をLastNameに変更し、そのラベルをLast Nameに変更します。
2. 日付フィールドを追加し、構成します。
   1. 2つの日付コントロールを名前コントロールの下の行にドラッグ・アンド・ドロップします。
   2. 最初の日付コントロールを選択し、その名前をStartDateに、ラベルをStart Dateに変更します。 「General」タブでスクロール・ダウンし、「Format」フィールドで日付書式(MM/dd/yyなど)を選択します。
   3. 2つ目の日付コントロールを選択し、その名前をEndDateに、ラベルをEnd Dateに変更し、「Format」フィールドで書式を設定します。
3. 出張の根拠のテキスト・コントロールを追加します。
   1. テキスト・コントロールを日付コントロールの下にドラッグ・アンド・ドロップします。
   2. コントロールを選択し、その名前とラベルをJustificationに変更します。
4. コスト・コントロールを追加し、構成します。
   1. アドバンス・パレットから、Justificationテキスト・コントロールの上にMoneyコントロールをドラッグ・アンド・ドロップします。
   2. コントロールを選択し、その名前とラベルをCostに変更し、「Currency」フィールドで通貨を選択します。
5. 経費管理を追加および構成します。
   1. 調整可能テキスト・コントロールの下に反復可能セクション・コントロールを配置します。
   2. コントロールを選択し、その名前を Expensesに変更します。 「一般」タブを下にスクロールし、「ユーザーは行を追加/削除できます」を選択します。
6. 経費明細コントロールを追加および構成します。
   1. 表コントロールを支出セクションにドラッグ・アンド・ドロップします。
   2. コントロールを選択し、その名前をExpenseDetailsに変更し、そのラベルをExpense Detailsに変更します。
   3. 「一般」タブをColumnsセクションまでスクロールし、「追加」 をクリックして別の列を追加します。 「列」を Expense Typeに、「列1」を「金額」にそれぞれ変更します。
   4. 下にスクロールして「ユーザーは行を追加/削除できます」を選択します。
7. 経費タイプ列を構成します。
   1. 経費タイプ列内の点線領域に選択コントロールを配置します。
   2. コントロールを選択し、その名前を SelectExpenseTypeに変更し、そのラベルをSelect Expense Typeに変更します。
   3. 全般タブを下にスクロールし、「プレースホルダー」フィールドに Select expense type…と入力します。
   4. さらにオプション・ソースセクションまでスクロール・ダウンし、オプション名およびオプション値フィールドに次のように入力します:

      • 航空運賃

      • タクシー

      • 宿泊

      • レストラン

      • その他

      
      図advanced-controls-options.pngの説明

      ノート:

      オプション名とオプション値の数は同じでなければなりません。
8. 金額列を構成します。
   1. Moneyコントロールを金額列内の点線領域にドラッグ・アンド・ドロップします。
   2. コントロールを選択し、その名前をAmountSpentに変更し、そのラベルをAmount Spentに変更し、「通貨」フィールドで通貨を選択します。
   
   図advanced-controls.pngの説明
9. コントロールのプロパティからフォームのプロパティに切り替えます。
   1. フォーム・キャンバスの空白の領域をクリックします。

      「Properties」のタブが「Form」と「Presentation」に変わり、選択したコントロールではなくフォーム全体に適用されるようになります。 コントロールをクリックすると、タブが「General」と「Styling」に変わり、そのコントロールに適用されます。

      また、「Data」ペインに、コントロールと同名(大/小文字は異なる)のデータ属性がリストされます。 これらの属性は、各コントロールを追加したときに自動的に作成されたものです。 これは、「Form」タブの「Auto Binding」フィールドを選択した場合の動作です。 これらの属性には、プロセスが実行されている間、フォームのペイロード(作業)データが保持されます。

   2. 「Save」をクリックしてフォームを保存します。

図add-configure-controls-travelform.pngの説明

別のプレゼンテーションの追加

出張リクエストをレビューおよび承認するユーザーにのみ表示されるフォームの代替ビューを追加します。

1. 「Properties」ペインの「Presentation」タブをクリックします。 (かわりに「General」タブと「Styling」タブが表示される場合は、最初にキャンバスの空白領域を選択して「Presentation」タブを表示します。)
2. 「Name」フィールドで、Main (デフォルト名)をEmployeesに置き換えます。 このプレゼンテーションはすでに作成されていましたが、デフォルトのプレゼンテーションです。
   プレゼンテーションとはフォームの単一ビューです。 フォームは、複数のプレゼンテーションを持つことができます。
3. 「Form」タブをクリックします。 「Presentations」表にEmployeesというプレゼンテーションがリストされるようになります。 星は、従業員がデフォルト・プレゼンテーションであることを示します。
4. 「Presentations」表で、「Add」をクリックしてプレゼンテーションを追加します。 プレゼンテーションを最初からビルドするかわりに、既存のプレゼンテーションからクローンを作成できます。 「プレゼンテーション・タイプの選択」ダイアログ・ボックスで、「クローン」を選択します。 「プレゼンテーションの作成」ダイアログ・ボックスで、「前のプレゼンテーションから選択」フィールドに「従業員」を選択し、「名前」フィールドに「承認者」と入力します。 「このプレゼンテーションに切り替えます」のチェック・ボックスを選択したままにし、「作成」をクリックします。
   
   図create-presentation.pngの説明

   Employeesプレゼンテーションのコントロールはすべて、新しく作成された承認者プレゼンテーションにコピーされます。 承認者プレゼンテーションは独立したプレゼンテーションです。 コントロールを追加または変更し、ビジネス・ニーズにあわせてカスタマイズできます。

5. 2つのプレゼンテーションを切り替えるには、キャンバスの最上部にある「プレゼンテーション」フィールドを使用します。
   次に、2つのプレゼンテーションを変えてみます。
6. これらのプレゼンテーションに対してそれぞれ異なる背景色を選択します。
   1. Approversプレゼンテーションを選択し、「Presentation」タブをクリックします。
   2. 「Background Color」の下にある四角形をクリックし、薄い黄色を選択してカスタム色に追加し、「OK」をクリックします。 オプションで、枠線の色を選択します。
   3. 同じステップを繰り返して、Employeesプレゼンテーションの背景色を薄い緑に変更します。
7. 承認者に名前フィールドを読取り専用で表示します。
   1. Approversプレゼンテーションを選択します。
   2. 「First Name」フィールドを選択します。 「General」タブで、スクロール・ダウンして「Read Only」を選択します。 フィールドが空白に変わり、その値を変更できないことが示されます。
   3. 「姓」フィールドを読取り専用に変更します。

フォームのスタイルシートの変更

組織のブランディングを適用するには、スタイルシートをアップロードして適用します。 1つのフォームには1つのスタイルシートを割り当てることができます。

1. フォームの空白領域をクリックし、「Properties」ペインの「Form」タブをクリックします。
2. 必要に応じてスクロール・ダウンし、「Stylesheet」フィールドの「Edit」をクリックします。 「Stylesheets」ページが表示されます。
3. スタイルシートをアップロードするには、「Upload」をクリックし、スタイルシート・ファイル(.cssまたは.txt)を選択します。 「Stylesheets」領域で、使用可能なスタイルシートをクリックして適用します。
4. 「Preview」領域で、「CSS」をクリックしてスタイルシートの書式を表示するか、「Form」をクリックしてプレビューします。
5. 「X」をクリックしてCSSブラウザを閉じ、フォームに戻ります。

図stylesheet-page.pngの説明

フォームのプレビュー

作成したフォームは、エンド・ユーザーがモバイル・デバイス、タブレットまたは大画面のいずれで表示しても、画面サイズに合わせて自動的に調整されます。

1. Webフォーム・エディタで、「Preview」をクリックします。
2. 「Preview」ウィンドウで、異なるデバイス・サイズを選択してフォームを表示します。
3. フォームのコントロールにサンプル値を入力し、「Submit」をクリックします。
   ウィンドウの下部にあるフィールドは、フォームへの入力(ペイロード値とも呼ばれる)がどのようなデータ属性として格納され、プロセスでどのように使用されるかを示しています。
4. 「Close」をクリックして「Preview」ウィンドウを閉じます。 「Save」をクリックします。

図preview-window.pngの説明

プロセス内でのフォームとプレゼンテーションの使用

開始フォームではEmployeesプレゼンテーションを使用し、承認タスクではApproversプレゼンテーションを使用します。

1. 「Application Home」タブ、「Forms」の順にクリックします。 フォームはここに表示されます。
   「Forms」ペインには、実際に使用されているかどうかに関係なく、アプリケーション用に作成されたすべてのフォームが表示されます。 アプリケーションではWebと基本の両方のタイプのフォームを作成して使用できることに注意してください。
2. 「Travel Process」タブをクリックします。
3. 承認ヒューマン・タスクを選択し、そのアクション・メニューをクリックします。 フォームがまだ関連付けられていないため、「Open Form」コマンドはグレー表示されます。 「Open Properties」を選択します。 ペインが展開され、そのプロパティが表示されます。
4. 「Form」フィールドで、TravelFormを参照して選択します。
5. 「Presentation」フィールドで、このタスク用に表示するプレゼンテーションとしてApproversを選択します。

図travel-process.pngの説明

コントロールの動作の定義

コントロールの動作を変更するには、Webフォーム・エディタに備えられている各種のイベント、アクション、条件およびコネクタ・オプションを使用します。 トラベル・リクエストの場合、イベント、条件およびアクションをCostコントロールに適用します。つまり、コストが一定額($500など)を超えた場合に、「Justification」テキスト・フィールドを空白にできないようにします。

1. 承認タスクのプロパティで、「Form」フィールドの「Edit Form」アイコンをクリックします。
2. Webフォーム・エディタのキャンバスで、Costコントロールを選択します。 「General」タブで、「Events」フィールドまでスクロール・ダウンし、「Add」をクリックしてイベントを作成します。

   イベントとは、発生する可能性があるなんらかのことで、特定の条件、アクションまたはRESTコネクタ・コールのトリガーとなります。

   各コントロールに対して、考えられるイベントをそれぞれ定義できます。 たとえば、「Cost」入力テキスト・フィールドでは、フォームがロードされたとき(「On Load」)、エンド・ユーザーがコントロールの値を変更したとき(「On Change」)、カーソルがコントロールに置かれているとき(「On Focus」)、コントロールからフォーカスが外れたとき(「On Blur」)、またはフォームが送信されたとき(「On Submit」)にイベントを起動できます。

3. イベント・タイプとして「On Change」を選択し、「Edit」をクリックします。
   イベント・タイプが「On Change」のイベント・ウィンドウが表示されます。 「+」が示された四角形のボタンを使用すると、アクション、if条件またはコネクタ・コールを追加できます。 アクションは赤で表示され、条件は青で表示されます。
4. イベントの条件およびアクションを作成します。
   1. 青い線で囲まれた「+If」ボタンをクリックして条件を追加します。 これで、条件を構成するために使用する、青一色の円形のボタンが表示されます。
   2. 青一色の「If」ボタンの下で、次のようにIf条件を構成します。 選択した内容に応じて、関連するフィールドが表示されます。

      • 「Control Name」フィールドでCostを選択します。

      • 「Property」フィールドで「Value」を選択し、その下で「is greater than」をクリックします。

      • 「Value」フィールドに500と入力します。

   3. 青一色の「Then」ボタンの横にある「+Action」ボタンをクリックします。
   4. 赤一色の「Action」ボタンが表示されたら、その下でThen条件を構成します。

      • 「Control Name」フィールドでJustificationを選択します。

      • 「Action」フィールドで「Required」を選択します。

   5. スクロール・ダウンします。 青一色の「Else」ボタンの横にある「+Else Action」ボタンをクリックします。
   6. 赤一色の「Action」ボタンの下でElse条件を構成します。ここでは、条件が満たされなかった場合の動作を指定します。

      • 「Control Name」フィールドでJustificationを選択します。

      • 「Action」フィールドで「Optional」を選択します。

      イベントは完成です。(IF)エンド・ユーザーが入力したコストが500を超える場合(Then)、「Justification」フィールドを必須に、それ以外の場合(Else)、「Justification」フィールドをオプションにします。
   7. 「OK」をクリックしてイベント・ウィンドウを閉じ、「Save」をクリックします。

図change-event.pngの説明

実行時にフォームを試す

従業員および承認者としてフォームを使用してみます。

1. 「Test」をクリックします。 「Test Application」タブが開きます。
2. 「Activate」をクリックします。 「すべてのロールに私を加える」フィールドは選択されたままにして、「アクティブ化」をクリックします。 アプリケーションが正常にデプロイされたことを示すメッセージが表示されます。
3. 「テスト・モードで試してみてください」をクリックします。
4. ランタイムで、「自分のアプリケーション」の下であなたのラベル・リクエスト・アプリケーションをクリックしてください。 出張フォームが表示されます。 これは、作成したEmployeesプレゼンテーション(緑)です。
   1. 一部のフィールドの組込み検証を確認します。 たとえば、日付フィールドに無効な文字を入力した場合、別のフィールドに移動するときにエラーが表示されます。
   2. 「Cost」フィールドに500を超えるコストを入力し、別のフィールドに移動します。 「Justification」フィールドに、必須であることを示すアスタリスクが表示されます。
   3. 「Submit」をクリックします。 値が必須であることを示すエラーが表示されます。 根拠を入力し、再び送信します。
5. タスクを承認者として表示するには、「マイ・タスク」をクリックします。

タスクを開くと、黄色のApproversプレゼンテーションが表示されます。 名前フィールドは、構成に従い、読取り専用になります。

拡張フォーム・オプションの確認

ここでは、Webフォーム・エディタ内の他のいくつかの領域を確認します。

• 拡張コントロールの試行

  拡張パレットを使用すると、パネル、セクション、タブ、表などをフォームに追加できます。 コネクタを介して外部サービスを呼び出すことによって動的にデータが移入されるコントロールを構成することもできます。 「拡張コントロールの構成」を参照してください。

• アプリケーションに定義されているその他のフォームの再利用

  前に作成したフォームは、フォーム・パレットにリストされ、なんらかの形で再利用できます。 フォームをキャンバス上にドラッグ・アンド・ドロップし、次の2つの方法のいずれかで使用します。

  • 参照フォームとして。このフォーム上のコントロールは編集できません。

  • 単一のコントロールとして。「Detach」をクリックして、元のフォームとのリンクを解除することによって、各コントロールの編集、位置変更および削除が可能になります。

  「フォームの再利用」を参照してください。

• データ優先フォームの作成

  この演習では、コントロールを追加することによってフォームを作成する手順について説明しました。データ属性は自動バインディングを介して自動的に作成されました。 アプリケーションに定義されたビジネス・タイプを選択することもできます。「プロセス」は、そのデータ属性に基づいてフォームを作成します。 「ビジネス・タイプに基づいたWebフォームの作成」を参照してください。