こんにちは。にいるです。
今回でVisualforceの記事は4回目ですね。
前回までは標準コントローラや数式を使用したデータの表示方法でした。
※前回までの記事はこちらからご覧ください。
今回は表示させるデータをしっかりとしたページとして表示させるという内容です。
しっかりと言うのはブロックやテーブルを用いてという意味です。
タグで言えばapex:pageblockとかapex:pageblocktableを使用します。
文字だと分かりにくいかもしれませんが、慣れれば簡単なのでどんどん書いていきましょう。
※Trailheadはここからご覧ください。
1.コンポーネントの種類
コンポーネントにはデータを表示させる出力コンポーネントとデータを入力する入力コンポーネントがあります。
例えば、出力コンポーネントならoutputField、outputText、outputLabelなどoutから始まるコンポーネントがあります。
Salesforceに登録されているレコードのデータを表示するには、このようなコンポーネントを使用します。
入力コンポーネントと言うのは、もう想像つくかと思いますが、ユーザがデータを入力する場合に使用するコンポーネントになります。
種類でいうと、inputFieldやinputCheckbox、inputTextがあります。
これは検索キーワードやレコード登録に使用したいデータを入力するために使用するコンポーネントです。
他にも反復コンポーネントと言うものがあります。
今回のチャレンジは反復コンポーネントと出力コンポーネントに関する出題ですので、実際に解きながら見ていきましょう。
※各コンポーネントの詳細は下記公式サイトで確認できます。
→「Visualforce 開発者ガイド」標準のコンポーネントの参照
2.レコード、項目、テーブルの表示
はい、ではチャレンジ内容を見ていきます。
もう4回目なので見慣れたかと思いますが、まずは問題を訳します。
コンポーネントを使用して、
商談名と金額、完了日、取引先名を表示する、
OppViewという名前のページを作成してね。
ということです。
オブジェクトを参照するためにはstandardcontrollerを使う必要がありますね。
あとはコンポーネントの使い方を理解すれば簡単ですね！
試しにちょっとだけ書いてみました。
|
1 2 3 4 |
<apex:page standardController="Opportunity"> <p>出力コンポーネントで商談情報を取得したい</p> <apex:outputField value="{! Opportunity.name}"/> </apex:page> |
WEBではこのように見えています。
outputFieldのvalue属性に参照させたい項目を指定すれば、このようにデータを取得することができます。
※コンパイルする時はプレビュー画面のURLに商談IDを指定しないとデータは表示されないので要注意です。
→この点については前回の記事をご覧ください。
このままだと枠組みもないので、UIを考えると見にくいですよね。。。
では反復コンポーネントのapex:pageblockを追加してみましょう。
|
1 2 3 4 5 6 |
<apex:page standardController="Opportunity"> <apex:pageblock> <p>出力コンポーネントで商談情報を取得したい</p> <apex:outputField value="{! Opportunity.name}"/> </apex:pageblock> </apex:page> |
ブロックが追加され、apex:pageBlockに挟まれている二行がブロック内に表示されましたね！
さっきのプレーンバージョンよりは見やすくなりました。
もう少しらしく書き足してみます。
|
1 2 3 4 5 6 7 8 9 |
<apex:page standardController="Opportunity"> <apex:pageblock> <p>出力コンポーネントで商談情報を取得したい</p> <apex:outputField value="{! Opportunity.name}"/> <apex:outputField value="{! Opportunity.closedate}"/> <apex:outputField value="{! Opportunity.amount}"/> <apex:outputField value="{! Opportunity.Account.name}"/> </apex:pageblock> </apex:page> |
これだとチャレンジは通ると思うんですが、ユーザ目線を考えると見にくいデザインになりますね。
WEB画面で見てみると、、、
と、改行もなくただ取得したデータが横一列に並んでしまってます。
ので、もう少し見やすいようにコンポーネントを追加して、さらに属性でタイトルも付けたいと思います。
|
1 2 3 4 5 6 7 8 9 10 |
<apex:page standardController="Opportunity"> <apex:pageBlock title="セーブポイントが見つからない"> <apex:pageBlockSection title="出力コンポーネントで商談情報を取得したい"> <apex:outputField value="{! Opportunity.name}"/> <apex:outputField value="{! Opportunity.closedate}"/> <apex:outputField value="{! Opportunity.amount}"/> <apex:outputField value="{! Opportunity.Account.name}"/> </apex:pageblocksection> </apex:pageblock> </apex:page> |
段落をPタグで使用していましたが、新規に追加したblocksectionの属性で枠から出して表示させました。
このblocksectionは下記のように複数使うこともできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<apex:page standardController="Opportunity"> <apex:pageBlock title="セーブポイントが見つからない"> <apex:pageBlockSection title="出力コンポーネントで商談情報を取得したい"> <apex:outputField value="{! Opportunity.name}"/> <apex:outputField value="{! Opportunity.closedate}"/> <apex:outputField value="{! Opportunity.amount}"/> <apex:outputField value="{! Opportunity.Account.name}"/> </apex:pageBlockSection> <apex:pageBlockSection title="出力コンポーネントで商談情報を取得したい2"> <apex:outputField value="{! Opportunity.name}"/> <apex:outputField value="{! Opportunity.closedate}"/> <apex:outputField value="{! Opportunity.amount}"/> <apex:outputField value="{! Opportunity.Account.name}"/> </apex:pageBlockSection> </apex:pageBlock> </apex:page> |
と記載すると、関連リストのようにセクションを分割して項目を表示させることが可能です。
チャレンジも問題なく通りました。
どのタグを使えばどういう表示がされるかはコンポーネントを実際に使ってみるしかありません。
ここでは簡単なものを紹介しましたが、Visualforceで使用できるコンポーネントの種類はとても多いです。
公式ドキュメントに記載されているので、使用用途に応じて調べてみるのがいいですが、何があるかを把握する上でもざっと読むのもありだと思います。
→「Visualforce 開発者ガイド」標準のコンポーネントの参照
※同モジュール内のTrailheadに関する記事はこちらからご覧頂けます。
ではでは！