Froce.comで作ったアプリケーションにVisualforceで作った独自画面を足してみる

こんにちは。mp_hskです。

今日は下記ブログ記事の続きです。

Force.com で 出張申請システムを作ってみる - mp_hskのブログ

上記で作った取引先オブジェクトを一括登録する独自画面を

実装していきたいと思います。

まずざっくり用語解説

作る前に要素について少し解説します。

Visualforceは基本MVCモデルで設計されており、

  • View → Visualforce ページ
  • Controller → Apexのコントローラークラス
  • Model → Apex のモデルクラス

という構成になっています。

今回は簡単な画面なんでModelはなしで View ←→ Controllerで作ります。

Visualforce ページのコーディング

設定→開発者コンソール→File→New →Visualforce Pageでページを作ります

■AccountAdd.vfp(ファイル名)

<apex:page controller="MyCustomCtrl">
  <apex:sectionHeader title="取引先の一括登録" />
  <apex:form >
    <apex:pageBlock title="取引先情報">
      <apex:dataList value="{!acts}" var="ad">
        <apex:pageBlockSection title="Account Information">
           <apex:inputField value="{!ad.name}"/>
        </apex:pageBlockSection>
     </apex:dataList>
     <apex:commandButton value="一括登録" action="{!save}" />
    </apex:pageBlock>
  </apex:form>
</apex:page>

これもざっくり解説すると

  • <apex:page> → ルートタグ+コントローラー紐付け
  • <apex:sectionHeader> → ページのヘッダータグ
  • <apex:form > → HTMLのformタグと同じ
  • <apex:pageBlock> → HTMLのdivタグみたいなモンで背景などのスタイルをデフォルトで入れてくれる
  • <apex:dataList> → ループのタグで valueに指定した変数の要素数分ループでHTMLを生成
  • <apex:pageBlockSection>→ これもHTMLのdivタグみたいなモン
  • <apex:inputField> → HTML のinputタグみたいなモン
  • <apex:commandButton>→HTMLのbuttonタグみたいなもん

処理内容としては、MyCustomCtrlの acts プロパティに指定されたリスト数分、入力用のテキストボックスを作る感じのプログラム。

コントローラーのコーディング

設定→開発者コンソール→File→New →Apex Classでコントローラーを作ります

public class MyCustomCtrl {

  public List<Torihikisaki__c> acts{ get; set; }

  public MyCustomCtrl(){
    acts = new List<Torihikisaki__c>();
    for(Integer i = 0;i < 3;i++){
      acts.add(New Torihikisaki__c());
    }
  }

  public void save(){
    insert acts;
  }
}

これもざっくり解説すると

  • Torihikisaki__cオブジェクトのリストをプロパティにもつ
  • コンストラクタでプロパティに空のTorihikisaki__cオブジェクトを3つセット
  • saveメソッドでプロパティのTorihikisaki__cオブジェクトを永続化

申請業務アプリに作ったページへ遷移するタブを作成

設定→クイック検索で "タブ"を検索 → タブ を選び

Visualforceタブを新規作成する(名前とスタイルは適当に)

f:id:mp_hsk:20170609172612p:plain

作ったら基本デフォルトで申請業務にタブが追加されるが、もし追加されなかったら

アプリケーションマネージャ→申請業務→編集→項目を選択 のタブ

で追加することができます。

作った画面を使ってみる

作った画面はこちらのように取引先名を3つ入力できる感じになる

f:id:mp_hsk:20170609172958p:plain

この状態で一括登録ボタンをクリックして、取引先タブに移動すると

f:id:mp_hsk:20170609173112p:plain

入力した3つの取引先が無事登録されてる。やっ↑た↑ぜ↓

学習のまとめ

今回は以下の点を学習した。

  1. Visualforce Pageを使った独自ページの実装
  2. ページに対してコントローラーを作成し独自処理を実装

Visualforceのタグは紹介した以外にも豊富にあるし、Apexはかなり柔軟に

プログラミングできるので、カスタマイズもこれでいけそう。

ただ、柔軟すぎて色々出来てしまう分、折角Saasを使ってるのに

構築コストがフルスクラッチと同じ!ってなことにならないように

標準でできることをもっと覚えてバランスよく利用できるように

これからは勉強していきたいと思った(小並感)

 

 

以上で紹介した書籍の内容はほぼ網羅したけど、Apexは色々できそうだから

なれるためにもう一回自分で何か書いてみようかな??