独自の画面を作成する
Salesforce 上に独自の画面を作成できることを理解し、業務に利用可能なページを作成する。
0.はじめに
Salesforce の画面を独自に作成するには、Visualforce という言語を理解する必要があります。
難解なものではなく、HTML をベースのタグを記述する言語です。
- ヒント：
-
HTML とは？
http://e-words.jp/w/HTML.htmlさらに詳しく HTML を説明しているサイト
http://www.kanzaki.com/docs/html/htminfo10.html
※ 歴史的な経緯も含めて非常に丁寧に説明されています。分量があるので時間があるときにご一読ください。
実際に Visualforce のシンプルなサンプルは以下のようになります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
このサンプルを実際に Salesforce に登録して表示すると、以下のように見えます。
（ヘッダや左のメニューはログインしている組織、ユーザ によって異なります）
ここでは Visualforce を使った画面の作成とその利用方法について説明します。
Salesforce の画面を独自に作成するには、Visualforce という言語を理解する必要があります。
難解なものではなく、HTML をベースのタグを記述する言語です。
- ヒント：
-
HTML とは？
http://e-words.jp/w/HTML.htmlさらに詳しく HTML を説明しているサイト
http://www.kanzaki.com/docs/html/htminfo10.html
※ 歴史的な経緯も含めて非常に丁寧に説明されています。分量があるので時間があるときにご一読ください。
実際に Visualforce のシンプルなサンプルは以下のようになります。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
このサンプルを実際に Salesforce に登録して表示すると、以下のように見えます。
（ヘッダや左のメニューはログインしている組織、ユーザ によって異なります）
ここでは Visualforce を使った画面の作成とその利用方法について説明します。
1.Visualforce ページの作成方法
Visualforce ページを作成する方法です。
まず、[ 設定 ] | [ ビルド ] | [ 開発 ] | [ ページ ] を開きます。[ 新規 ] をクリックしてください。
ページを作成する画面です。下のコードを編集エリアに入力します。ほぼ HTML と同じ書き方ができます。
表示ラベルに「CustomePage」と入力します。（名前は自動的に入力されます）
[ 適用 ] をクリックしてページの内容を登録します。ここでなにか記述に間違いがあればエラーとして表示されます。[ プレビュー ] をクリックします。
Visualforceページのコード
| <apex:page> | |
| <h1>CustomPage</h1> | |
| <table border="0" width="200" height="200" bgcolor="#90ee90"> | |
| <tr align="center" bgcolor="#f0f8ff"> | |
| <td valign="middle">Activation!トレーニングで使用するVisualforceページです。</td> | |
| </tr> | |
| </table> | |
| </apex:page> |
登録したページが表示されます。作成されたページのアドレスは、[ https://ap.salesforce.com/apex/CustomPage ] になります。
次に、いつでも Visualforce ページを編集できるように、設定を行います。
ユーザメニューから [ 私の設定 ] | [ 個人用 ] | [ 高度なユーザの詳細 ]を開きます。
[ 編集 ] をクリックして編集画面に移り、[ 開発モード ] にチェックをつけて、[ 保存 ] をクリックします。
作成したVisualforceページを再び表示します。
[ https://ap.salesforce.com/apex/CustomPage ] にアクセスします。
ページの最下部に、ページ編集用のメニューが追加されています。
このメニューに表示された [ CustomPage ] をクリックすると、ページを表示しながら、Visualforce コードを編集することができます。
Visualforceページを作成する方法です。
まず、[ 歯車マーク ] | [ 設定 ] | [ カスタムコード ] | [ Visualforceページ ] を開きます。[ 新規 ] をクリックしてください。
ページを作成する画面です。下のコードを編集エリアに入力します。ほぼ HTML と同じ書き方ができます。
表示ラベルに「CustomePage」と入力します。（名前は自動的に入力されます）
[ 適用 ] をクリックしてページの内容を登録します。ここでなにか記述に間違いがあればエラーとして表示されます。[ プレビュー ] をクリックします。
Visualforce ページのコード
| <apex:page> | |
| <h1>CustomPage</h1> | |
| <table border="0" width="200" height="200" bgcolor="#90ee90"> | |
| <tr align="center" bgcolor="#f0f8ff"> | |
| <td valign="middle">Activation!トレーニングで使用するVisualforceページです。</td> | |
| </tr> | |
| </table> | |
| </apex:page> |
登録したページが表示されます。作成されたページのアドレスは、
[ https://ap5.visual.force.com/apex/CustomPage ] になります。
次に、いつでも Visualforce ページを編集できるように、設定を行います。
ユーザメニューから [ 設定 ] | [ 私の個人情報 ] | [ 高度なユーザの詳細 ] を開きます。
[ 編集 ] をクリックして編集画面に移り、[ 開発モード ] にチェックをつけて、[ 保存 ] をクリックします。
作成した Visualforce ページを再び表示します。
[ https://ap5.visual.force.com/apex/CustomPage ] にアクセスします。
ページの最下部に、ページ編集用のメニューが追加されています。
このメニューに表示された [ CustomPage ] をクリックすると、ページを表示しながら、Visualforce コードを編集することができます。
2.ページを利用する （Apex クラスを実行する）
Apex クラスを ページから呼び出す方法です。
まず、次の Apex クラスを登録します。
OpportunityAmountSammaryToAccount クラス
| global class OpportunityAmountSammaryToAccount implements Schedulable { | |
| global void execute (SchedulableContext sc) { | |
| Integer limitAccountVal=10000; | |
| List<Account> accountlist = [select id from account limit :limitAccountVal]; | |
| Integer totalAmmount=0; | |
| for (Account at:accountlist ) { | |
| List<AggregateResult> offsetList = | |
| [SELECT accountid, SUM(Amount) summary FROM | |
| Opportunity WHERE accountid=:at.id and IsWon = true | |
| group by accountid]; | |
| for (AggregateResult ar:offsetList ) { | |
| totalAmmount = Integer.valueOf(ar.get('summary')); | |
| } | |
| at.totalAmmount__c = totalAmmount; | |
| } | |
| update accountlist; | |
| } | |
| } |
OpportunityAmountSammaryToAccountExecute クラス
| public with sharing class OpportunityAmountSammaryToAccountExecute{ | |
| // 実行ボタン | |
| public PageReference execute() { | |
| // スケジュールの実行 | |
| String jobId = System.schedule('SampleSchedule', '0 0 * * * ?', new OpportunityAmountSammaryToAccount ()); | |
| return null; | |
| } | |
| } |
Apex クラスの登録方法については【プログラムを作成して業務を自動化する】を参照してください。
OpportunityAmountSammaryToAccount クラスは商談の金額を集計して取引先のカスタム項目に登録する処理のクラスです。
OpportunityAmountSammaryToAccountExecute クラスは処理のクラスを毎日00:00に実行するようにスケジュール登録します。こちらは Visualforce ページ から 呼び出されるクラスで、コントローラ（制御）クラスと呼ばれます。
次に、新しく Visualforce ページを作成します。
| <apex:page controller="OpportunityAmountSammaryToAccountExecute" sidebar="false"> | |
| <apex:form > | |
| <apex:commandButton action="{!execute}" value="実行" /> | |
| </apex:form> | |
| </apex:page> |
このページは先に登録した制御クラスを呼び出します。制御クラスの指定は「controller=”OpportunityAmountSammaryToAccountExecue”」の部分で行っています。<apex:commandButton>タグでボタンを表示し、このタグの属性「action=”{!execute}”」としていることで、OpportunityAmountSammaryToAccountExecue クラスの execute の処理が実行されます。
実際にページを表示してボタンをクリックしてみましょう。
https://(アクセスしているドメイン)/apex/OpportunityAmountSammaryToAccountPage
エラーが表示されなければ登録が完了しています。
[ 設定 ] | [ 監視 ] | [ スケジュール済みジョブ ] を開くと新しくジョブが登録されています。
Apex クラスを ページから呼び出す方法です。
まず、次の Apex クラスを登録します。
OpportunityAmountSammaryToAccount クラス
| global class OpportunityAmountSammaryToAccount implements Schedulable { | |
| global void execute (SchedulableContext sc) { | |
| Integer limitAccountVal=10000; | |
| List<Account> accountlist = [select id from account limit :limitAccountVal]; | |
| Integer totalAmmount=0; | |
| for (Account at:accountlist ) { | |
| List<AggregateResult> offsetList = | |
| [SELECT accountid, SUM(Amount) summary FROM | |
| Opportunity WHERE accountid=:at.id and IsWon = true | |
| group by accountid]; | |
| for (AggregateResult ar:offsetList ) { | |
| totalAmmount = Integer.valueOf(ar.get('summary')); | |
| } | |
| at.totalAmmount__c = totalAmmount; | |
| } | |
| update accountlist; | |
| } | |
| } |
OpportunityAmountSammaryToAccountExecute クラス
| public with sharing class OpportunityAmountSammaryToAccountExecute{ | |
| // 実行ボタン | |
| public PageReference execute() { | |
| // スケジュールの実行 | |
| String jobId = System.schedule('SampleSchedule', '0 0 * * * ?', new OpportunityAmountSammaryToAccount ()); | |
| return null; | |
| } | |
| } |
Apex クラスの登録方法については【プログラムを作成して業務を自動化する】を参照してください。
OpportunityAmountSammaryToAccount クラスは商談の金額を集計して取引先のカスタム項目に登録する処理のクラスです。
OpportunityAmountSammaryToAccountExecute クラスは処理のクラスを毎日00:00に実行するようにスケジュール登録します。こちらは Visualforce ページから 呼び出されるクラスで、コントローラ（制御）クラスと呼ばれます。
次に、新しく Visualforce ページを作成します。
| <apex:page controller="OpportunityAmountSammaryToAccountExecute" sidebar="false"> | |
| <apex:form > | |
| <apex:commandButton action="{!execute}" value="実行" /> | |
| </apex:form> | |
| </apex:page> |
このページは先に登録した制御クラスを呼び出します。制御クラスの指定は「controller=”OpportunityAmountSammaryToAccountExecue”」の部分で行っています。<apex:commandButton>タグでボタンを表示し、このタグの属性「action=”{!execute}”」としていることで、OpportunityAmountSammaryToAccountExecue クラスの execute の処理が実行されます。
実際にページを表示してボタンをクリックしてみましょう。
https://(アクセスしているドメイン)/apex/OpportunityAmountSammaryToAccountPage
エラーが表示されなければ登録が完了しています。
[ 歯車マーク ] | [ 設定 ] | [ 環境 ] | [ ジョブ ] | [ スケジュール済みジョブ ] を開くと新しくジョブが登録されています。
3.演習
Visualforce で Apexクラスを起動するページを作成してください。
起動するApexクラスはどのようなものでも結構です。例えばすでに作成していれば【プログラムを作成して業務を自動化する】で説明したクラスにしてください。
