Tip:
Highlight text to annotate it
X
このレッスンでは、Web Blockの再利用性の特別なケースについて見ていきます。
Web Blockのネストです。実際に見ていきましょう。"Issues"Web Blockです。
この1つ目の列、"Issue"列に入っている情報を
新しいWeb Blockに移します。そのために、これを他の画面で
再利用します。では、新しいWeb Blockを作りましょう。
"IssueDesription"と名付けます。Input Parameterを追加し、
"Issue"と名付けます。では、"Issue"Web Blockに戻りましょう。
1つ目の列にある要素を選択したいので、Widget Treeを使います。
これを使うと要素を選択しやすいです。1つ目のCellにあるリンクとContainerを選択後カットして、
"IssueDescription"に戻り、貼り付けます。
いくつかエラーが出ているので、直していきましょう。基本的にこれらのエラーは、
"Issue Table"が見つからないことにより発生しています。従って、これらの値を"Issue Table"からでなく
Input Parameterから取得するように修正します。次も同様にします。
次も同様です。ひとつ思ったのですが、"Issue"の前を、
単純にInput Parameterの"Issue"に置き換えるだけで修正ができそうです。できましたね。
では、これをコピーして早く終わらせてしまいましょう。次のエラーを開いて、"Issue"に置き換え。
次も同様。最後の一つ、Descriptionも同様です。
できました。ただし、まだいくつか警告が残っています。
何が起きているか、説明します。MainFlowにおいて、"Issue"Web Blockから
"Issue_Edit"Web Screenへコネクタがありますが、これは編集画面へのリンクを"Issue"Web Blockが持っていたからです。
今は新しい"IssueDescription"WebBlockにそのリンクは移しました。
従って、これを修正します。コネクタを新しいWeb Blockに移動させましょう。これで
警告も修正することができました。ちょっとフローを整列させましょう。
では、Web Blockをネストさせて画面の一部として再利用していきます。
"IssueDescription"を"Issues"WebBlockの中に入れて、利用します。
"Issues"WebBlockを開いて、"IssueDescription"をドラッグアンドドロップし、パラメータを渡すだけです。
パラメータは"Issue"Recordを渡す必要があるので、Table Recordsから取得して渡しましょう。
このように、最初と同じ情報を表示させることができました。最初と違い今は、
別ページでも再利用可能な新しく作成した"IssueDescription"WebBlockを使っています。新しくページを作ってみましょう。
これをDashboardとしていきます。新しくWebScreenを追加して、
"Dashboard"と名付けます。この画面には、High Priority Issuesのリストと、
Low Priority Issuesのリストを表示させます。ひとまず、画面を参照権限不要(Anonymousu)に
設定しましょう。Titleプロパティには、"Dashboard"と設定します。また、
メニューにもこのDashboardページを追加します。Dashboardはメニューの先頭に表示させたいので、
"Menu"Web Blockを開きましょう。Widget Treeを使います。4つ目のDashboardのWeb Blockを
先頭に移動させます。これでOKです。"Dashboard"ページに戻りましょう。
このページに、2つのリストを作ります。1つがHigh Priority Issues、もう一つがLow Priority Issuesの
リストです。では、Preparationでこの2つのクエリを準備しましょう。
"Issue"Entityからクエリを作成します。これは、"GetHighPriorityIssues"と
名付けます。High PriorityのIssueだけを取得しなければならないので、条件文を追加します。
条件文は、PriorityIdが、High Priorityの値とイコールであることとします。
条件文は追加できたので、次は、
Order Byを変更します。表示するリストは、"Submit Day"でソートされるようにしましょう。
このクエリは再利用できるので、コピーして、貼り付けます。
再利用したクエリは、"GetLowPriorityIssues"と名付けます。
そして、条件文も変更する必要があります。比較対象をHigh Priorityの値から
Low Priorityの値に修正します。Order Byはそのままとしましょう。これで完了です。
次にWeb Screenを実装します。Preparationは既に準備できているので、あとは
各Issueのリストのタイトルとリストを作ります。リストのタイトルの部分には、
Containerを使います。ContainerはHTMLのDIVに相当します。
ContainerにはStyleを付けます。タイトルらしく見せるためです。
StyleはHeading1としました。タイトルとして"High Priority Issues"を設定します。
通常は、画面に一覧を作る場合にはTable Recordsを利用しますが、今回は
List Recordsを利用しましょう。List Recordsウィジェットをリストのタイトル部分の下に
配置します。List Recordsは、レコードを一覧として表示しますが、Table Recordsのように
レコードをテーブル構造化することはしません。より柔軟に
データのレイアウトを作ることが可能です。このList RecordにもTable Recordsと同様、
Source Record Listを紐づける必要があります。まずは、
High Priority Issuesのリストを紐づけましょう。これは先ほど作成した"GetHighPriorityIssues"から
取得することができます。これはベストプラクティスですが、この自動的に設定される名前は
"HighPriorityIssues"と変更しておきましょう。
できました。もうひとつ、List Recordsで特別なのは、ここにある
Line Separatorプロパティです。これは、
表示するリストの要素を何でセパレート(切り離し)するかということを指定します。
選択肢は3つです。1つは"New Line"、改行です。
もう1つは"Bullets"で、これは、箇条書きを作る方法です。
もう1つは、"None"でセパレーターとして何も設定しない方法です。今回はこの"None"を設定します。
"IssueDescription"Web Blockを用いて、レイアウトを作っていきましょう。
以上で、List Recordsの設定以外は終わりました。
今から、Recordの中身を設定していきます。先に言った通り、このために先ほど作成した
"IssueDescription"Web Blockを使います。List Recordsの中にドロップしましょう。
そして、引数に渡す値を設定します。渡す値は、
"HighPriorityIssues"のCurrentの"Issue"Recordとします。以上で、High Priority Issueのリスト表示は
完了しました。これらをコピーアンドペーストしてLow Priority Issueのリストを作りましょう。
Widget Treeで、この2つのContainerをコピーして貼り付けます。
これを変更していきましょう。タイトルは"Low Priority Issues"とします。
List Recordsの紐づけも変更する必要があります。その前に、名前を"HighPriorityIssues"から
"LowPriorityIssues"に変えましょう。
Source RecordListプロパティからデータの紐づけを変更します。"GetLowPriorityIssues"クエリに
紐づけを変更しましょう。これで終わりです。WebBlockへ渡す引数の値も、"LowPriorityIssue"のリストに修正されています。
以上で完了です。最後に一つ、
このそれぞれのリストに表示させるレコードの数を変更しておきましょう。
初期値の50個は不要なので、4個のみ表示するように変更します。
"Low Priority Issues"のリストも同様に変更します。
以上で設定が終わりました。
Publishして、アプリケーションを確認しましょう。
"Dashboard"ページができていますね。ひとつ忘れていました。ServiceStudioに戻ります。
"Dashboard"ページをこのアプリケーションの新しいHomeとしなければいけませんでした。
従って、Homeからのパスを"Dashboard"画面に接続して、再度Publishします。"Dashboard"ページが表示されましたね。
High Priority IssuesとLow Priority Issuesの各リストもできています。
Issueの説明文、リンクがあり、Issueを編集することもできます。
IssueのWebBlockは、"Unclassified Issues"のページにも、別のWebBlockにネストされた状態で、
表示されています。WebBlockは、別のWebBlockにネストさせることが可能なのです。
ネストする場合には1つの制約があり、自身のWebBlockをネストさせることはできません。
よろしいですか?説明部分のWebBlockはこの"Dashboard"ページを作る際に再利用しました。
レッスンは以上です。