SkyVisualEditor

Transcription

1 SkyVisualEditor インプリメンテーションワークブック 株 式 会 社 テラスカイ 2016 年 6 月 29 日

2 目 次 1. はじめに... 1 本 ワークブックの 目 的... 1 対 象 利 用 者... 1 本 ワークブックで 習 得 できるスキルセット SkyVisualEditor の 動 作 環 境 事 前 準 備... 3 Developer Edition にサインアップする... 3 AppExchange パッケージをインストールする... 3 人 材 紹 介 アプリケーションをインストールする... 4 SkyVisualEditor Studio にサインアップする... 4 Microsoft Silverlight をインストールする... 4 Salesforce と Studio の 接 続 顧 客 要 件 の 把 握 と 実 装 方 法 の 選 定... 6 顧 客 要 件 に 基 づく 使 用 機 能 の 選 定... 8 Salesforce のオブジェクト 構 成 に 基 づく 画 面 レイアウトの 選 定 SkyVisualEditor の 特 徴 及 び 機 能 制 限 に 基 づくレイアウトの 選 定 本 ワークブックにおける 実 装 方 法 のまとめ Salesforce レイアウトによる 画 面 の 実 装 Salesforce レイアウトの 特 徴 ページブロックの 表 示 モードによる 出 力 の 違 い 入 力 項 目 の 配 置 コンポーネントの 配 置 コンポーネントプロパティの 設 定 ページプロパティの 設 定 マージフィールドを 使 用 した 表 示 テキストの 動 的 表 示 設 定 データテーブルの 設 定 ページレイアウト 取 得 パネルグリットによる 整 形 入 れ 子 にしたページブロックセクションよる 整 形 計 算 式 の 設 定 参 照 画 面 作 成 自 由 レイアウトによる 画 面 の 実 装 自 由 レイアウトの 特 徴... 38

3 背 景 画 像 の 設 定 PDF 化 カスタムボタンからの 呼 び 出 し 検 索 テンプレートによる 画 面 の 実 装 検 索 テンプレートの 特 徴 ウィザードでの 設 定 ウィザード 完 了 後 の 設 定 マスク 設 定 絞 込 条 件 検 索 結 果 保 持 形 式 カスタムルックアップテンプレートによる 画 面 の 実 装 カスタムルックアップテンプレートの 特 徴 ウィザードでの 設 定 呼 び 出 し 元 画 面 の 設 定 1( 単 一 レコード 選 択 画 面 ) 呼 び 出 し 元 画 面 の 設 定 2( 複 数 レコード 選 択 画 面 ) Dashboard レイアウトによる 画 面 の 実 装 Dashboard レイアウトの 特 徴 コンポーネントの 配 置 デプロイ 後 に 行 う Salesforce の 設 定 画 面 呼 び 出 し 設 定 (ボタン/リンクの 上 書 き) 画 面 呼 び 出 し 設 定 (Visualforce タブ) Visualforce ページ Apex クラスへのアクセス 有 効 化 より 便 利 に 利 用 いただくために ルックアップ 時 に 任 意 の 項 目 値 を 取 得 する 機 能 (ルックアップ 設 定 ) ウィザード 画 面 テンプレート ページ 割 り 当 てテンプレート 親 子 登 録 テンプレート AppComponent 高 度 なカスタマイズ JavaScript 機 能 Apex クラス 拡 張 機 能 ユースケース Salesforce コンソールインテグレーションツールキットの 利 用 SkyVisualEditor のバージョンアップの 仕 組 み 大 規 模 開 発 向 け 機 能 複 数 組 織 への 接 続... 67

4 デザインデータのバックアップ グループユーザー 旧 環 境 ( 前 バージョン)の 利 用 Force.com プラットフォームの 理 解 Apex コードカバー 率 ガバナ 制 限 パフォーマンスチューニング トラブルが 発 生 した 際 の 対 処 方 法 Appendix お 問 い 合 わせ 先... 74

5 1. はじめに 本 ワークブックの 目 的 本 ワークブックは SkyVisualEditor で 画 面 開 発 を 行 う 方 のために 開 発 手 法 をチュートリアル 形 式 で 学 習 いただくことを 目 的 としています 本 ワークブックに 沿 って 演 習 することで 一 連 の SkyVisualEditor 画 面 開 発 手 法 を 習 得 できます 対 象 利 用 者 本 ワークブックは 以 下 に 当 てはまる 方 を 対 象 として 作 成 しています Salesforce の 認 定 Administrator 認 定 Platform アプリケーションビルダー 認 定 Developer と 同 等 の 知 識 を 有 する 方 SkyVisualEditor の 画 面 開 発 手 法 を 基 礎 から 学 ばれる 方 SkyVisualEditor で 画 面 を 作 成 して 顧 客 または 社 内 の 利 用 ユーザに 提 案 する 立 場 の 方 本 ワークブックで 習 得 できるスキルセット 本 ワークブックで 習 得 できるスキルセットは 以 下 の 通 りです Salesforce の 宣 言 的 開 発 並 びに Visualforce/Apex 開 発 に 関 するスキルは 対 象 外 です SkyVisualEditor の 標 準 機 能 を 使 用 した 画 面 開 発 スキル SkyVisualEditor の Apex クラス 拡 張 機 能 及 び JavaScript 機 能 の 基 本 知 識 SkyVisualEditor の AppComponent による 開 発 に 関 する 基 本 知 識 p. 1

6 SkyVisualEditor インプリメンテーションワークブック 2. SkyVisualEditor の動作環境 SkyVisualEditor の動作環境は以下の通りです 学習を始める前に ご利用の環境が条件を満たして いるか確認してください なお 本ワークブックはデスクトップのみ動作保証をしています モバイル タブレッ ト等でご利用いただいた場合の動作保証はしておりません ブラウザ SkyVisualEditor Studio Mozilla Firefox Microsoft Internet Explorer salesforce.com 社と同様のブラウザバ ージョン 且つ Microsoft Silverlight のシステム要件に準拠します Microsoft Silverlight のシステム要件詳細は以下を参照ください 但し Silverlight のバージョンは 5 のみのサポートとします デプロイ後の Salesforce 画面 Visualforce Mozilla Firefox Microsoft Internet Explorer Google Chrome に つ い て salesforce.com 社と同様のブラウザバージョンで動作します 但し 一部機能においてはブラウザによって動作しないものがあります Google Chrome で動作しない機能 IME モード 注 Apple Safari でも動作しません SkyOnDemand 連携 注 Apple Safari でも動作しません Microsoft Internet Explorer 7 8 で動作しない機能 ページブロックセクションの枠線の角丸 Salesforce Salesforce の各製品の Enterprise Edition 以上及び Developer Edition で動作します より 詳細な情報を確認する場合はヘルプを参照してください 本ワークブックは Salesforce Classic でのご利用を前提としています 対応言語 SkyVisualEditor Studio 日本語 英語 デプロイ後の Salesforce 画面 Visualforce 日本語 英語 中国語 繁体中国語 簡体中国語 画面に表示される文言は全てトランスレーションワークベンチに対応しているため 各言語の 文言を設定すれば Salesforce が対応している言語への対応は全て可能です 設定文言は組織毎に変更することが可能です p. 2

7 3. 事 前 準 備 本 ワークブックをご 利 用 になる 前 に 必 要 なサインアップ 及 びインストールを 行 います 1. Developer Edition にサインアップする 2. AppExchange パッケージをインストールする 3. 人 材 紹 介 アプリケーションをインストールする 4. SkyVisualEditor Studio にサインアップする 5. Microsoft Silverlight をインストールする Developer Edition にサインアップする 本 ワークブックでは 開 発 用 の Developer Edition 組 織 ( 以 降 DE 組 織 と 表 記 )を 使 用 します 1. DE 組 織 のサインアップページにアクセスします 2. 各 項 目 を 入 力 し フォームを 送 信 します 3. フォームに 入 力 したメールアドレス 宛 にログインリンクが 記 載 されたメールが 届 きます リンクをクリックし パスワードを 変 更 します AppExchange パッケージをインストールする SkyVisualEditor を 利 用 してページを 作 成 するには ページをデプロイする 組 織 に SkyVisualEditor の AppExchange パッケージをインストールしておく 必 要 があります このパッケージは 30 日 間 に 限 り 2 ユー ザで 利 用 できます 機 能 制 限 はありませんので 本 ワークブックの 学 習 にあたり 支 障 はありません 1. AppExchange の SkyVisualEditor インストールページにアクセスします OBEA4 2. [ 今 すぐ 入 手 ] をクリックします 3. [AppExchange にログインする] をクリックします 4. AppExchange サイトにログインするアカウントのユーザ 名 /パスワード を 入 力 し [ログイン] をクリッ クします 必 ずしもパッケージをインストールする 組 織 のユーザ 名 でログインする 必 要 はありませんが 今 回 は 先 に 取 得 した DE 組 織 のユーザ 名 でログインしてください 5. [ 本 番 環 境 にインストール] をクリックします 6. 利 用 規 約 の 同 意 にチェックを 入 れ [ 確 認 してインストール!] をクリックします 7. ログインダイアログが 表 示 されるので 先 に 取 得 した DE 組 織 のユーザ 名 でログインします 8. [すべてのユーザのインストール] を 選 択 し [インストール] をクリックします p. 3

8 人 材 紹 介 アプリケーションをインストールする 取 得 した DE 組 織 に 学 習 用 のパッケージをインストールします パッケージには 本 ワークブックを 進 めるにあ たり 必 要 なアプリケーション 及 びカスタムオブジェクトが 含 まれます 1. インストール 用 URL リンクを 開 きます 0QqxZ 2. DE 組 織 のユーザ 名 とパスワードを 入 力 します 3. 以 下 パッケージのパスワードを 入 力 し インストールします app8wvvn SkyVisualEditor Studio にサインアップする SkyVisualEditor の 画 面 をデザインする SkyVisualEditor Studio( 以 降 Studio と 表 記 )は ユーザ 登 録 することで 無 償 利 用 できます 1. Studio サインアップページにアクセスします 2. 各 項 目 を 入 力 し フォームを 送 信 します 3. フォームに 入 力 したメールアドレス 宛 にログインリンク ユーザ 名 仮 パスワードが 記 載 されたメールが 届 きます リンクをクリックし パスワードを 変 更 します Microsoft Silverlight をインストールする Studio を 利 用 するには ご 使 用 の 端 末 に Microsoft 社 が 提 供 する Sliverlight5 をインストールする 必 要 があります Studio にログイン 時 Silverlight5 が 未 インストールだった 場 合 またはバージョンが 低 か った 場 合 には インストールダイアログが 表 示 されます 表 示 された 場 合 はインストールを 行 ってください 1. [ 今 すぐクリックして Sliverlight をインストール] をクリックします 2. [ファイルのダウンロード] ダイアログが 表 示 されます [ 実 行 ] をクリックします 3. [セキュリティの 警 告 ] ダイアログが 表 示 されます [ 実 行 する] をクリックします 4. [Silverlight のインストール] ダイアログが 表 示 されます [ 今 すぐインストール] をクリックします p. 4

9 SkyVisualEditor インプリメンテーションワークブック Salesforce と Studio の接続 SkyVisualEditor は Studio から Salesforce に接続し オブジェクトや項目等のメタデータを取得する ことで画面をデザインします また デザイン後には同じ接続を使用して Salesforce に Visualforce ペー ジと Apex クラスをデプロイします 以下に相関図を示します 図 1 Salesforce AppExchange パッケージと Studio の相関図 Studio から Salesforce に接続するためには 事前にセキュリティの設定を行う必要があります A) セキュリティトークンを使用する B) IP アドレスを許可する C) ネットワークアクセスを設定する IP アドレスの制限がない組織のみ有効 本ワークブックでは C の設定を行い Studio サーバのグローバル IP アドレスからの接続を許可します 1. Salesforce の設定画面を開きます 2. [クイック検索] に ネットワークアクセス と入力します 3. 管理 > セキュリティのコントロール の ネットワークアクセス をクリックします 4. 信頼済み IP 範囲の [新規] をクリックします 5. 開始 IP アドレス欄と終了 IP アドレス欄に と入力して保存します 6. 再度 [新規] をクリックし もう 1 つの IP アドレスを入力します 開始 IP アドレス欄と終了 IP アドレス欄に と入力して保存します A 及び B の設定についてはヘルプを参照してください p. 5

10 4. 顧 客 要 件 の 把 握 と 実 装 方 法 の 選 定 SkyVisualEditor は Salesforce の 画 面 開 発 (Visualforce,Apex クラス 等 )を GUI で 行 うツール です 従 って 事 前 に 運 用 状 況 やオペレーションフローを 考 慮 した 上 で 顧 客 要 件 を 明 確 にし Salesforce もしくは SkyVisualEditor の 標 準 機 能 で 実 現 可 能 な 部 分 と 個 別 開 発 (Visualforce, Apex クラス 等 のコーディング 開 発 もしくは SkyVisualEditor の 拡 張 機 能 開 発 )が 必 要 な 部 分 の 切 り 分 けを 行 う 必 要 があります 顧 客 要 望 の 優 先 度 や 開 発 コストによってトレードオフとなる 場 合 もありますので このプロセ スは 大 変 重 要 です この 章 では 仮 想 の 顧 客 要 件 に 基 づく 実 装 方 法 の 選 定 について 学 びます p. 6

11 SkyVisualEditor インプリメンテーションワークブック 架空の人材紹介会社 TS スタッフィング株式会社 にて 運用状況 既に Salesforce で 人材紹介アプリケーション を運用中 求人情報 人材情報 紹介情報をそれぞれカスタムオブジェクトで構築している オペレーションフロー 求人情報詳細画面から紹介予定の人材情報レコードの紐付けを行い 紹介履歴を管理してい る 顧客の課題 Salesforce 標準レイアウトを使用しているが 関連リストのレコードを編集または追加する際に画面 遷移するのが使いづらいという悩みを抱えている 求人案件にマッチする人材をもっと検索しやすくならないかと営業からクレームが来ている 人材情報にはスキル等の管理項目が多く Salesforce 標準レイアウトでは管理しづらく感じている 取引先 求人元 に人材のスキルシートを提示しているが 毎回 Salesforce の内容を Excel に コピーして作成しているため 負担が大きくミスも発生しやすい Salesforce から帳票を直接出力し たい p. 7

12 顧 客 要 件 に 基 づく 使 用 機 能 の 選 定 TS スタッフィング 株 式 会 社 の 要 件 を 整 理 すると 以 下 のようになります 親 子 情 報 を 一 括 で 登 録 編 集 し 作 業 効 率 を 上 げたい 求 人 案 件 にマッチする 人 材 を 迅 速 に 検 索 したい 管 理 項 目 が 多 いオブジェクトの 画 面 をコンパクトにまとめ 視 認 性 を 高 めたい Salesforce から 帳 票 を 直 接 出 力 することで Excel との 二 重 入 力 を 廃 止 したい さらに 要 件 定 義 を 進 めると 以 下 のような 課 題 も 表 面 化 するかもしれません これらの 事 項 は 多 くの 顧 客 に 当 てはまる 場 合 があり Salesforce/SkyVisualEditor/コーディング 開 発 いずれかの 方 法 での 解 決 手 段 が 用 意 されているものです リッチな 画 面 を 使 いたいが デザインは Salesforce 標 準 レイアウトを 踏 襲 したい マスタオブジェクトを 参 照 するレコードをより 素 早 く 登 録 したい ユーザごとにレイアウトを 分 岐 したい マニュアルを 見 なくてもスムーズに 操 作 できるよう ホームタブに 手 順 を 載 せたい 特 定 のオブジェクトに 対 して 検 索 条 件 を 動 的 に 変 えながら 検 索 したい 画 像 を 表 示 したい 選 択 リスト 項 目 に 選 択 肢 以 外 の 値 を 入 力 したい Web からの 問 い 合 わせ 情 報 を Salesforce に 取 り 込 みたい 重 要 項 目 の 文 字 を 大 きくしたり 色 付 けしたりして 目 立 たせたい 電 子 サインを 付 けたい 特 定 のオブジェクトのレコードが 作 成 されたら Chatter に 投 稿 したい Salesforce1 モバイルアプリケーション 用 の 画 面 をカスタマイズしたい これらの 要 件 とソリューションを 以 下 の 表 にまとめます p. 8

13 SkyVisualEditor インプリメンテーションワークブック 要件 ソリューション 宣言的開発 コーディング開発 親子情報を一括で登 SkyVisualEditor で親子登録画面を作 Visualforce 録 編集し 作業効率を 成する Apex クラス 上げたい JavaScript 等で 求人案件にマッチする人 SkyVisualEditor の 検索テンプレート ま 材を迅速に検索したい たは カスタムルックアップテンプレート を利用 する 管理項目が多いオブジェ SkyVisualEditor でパネルグリッド タブを クトの画面をコンパクトに 活用した画面を作成する まとめ 視認性を高めた い Salesforce から帳票を 画面をそのまま出力する場合 直接出力することで SkyVisualEditor で帳票画面を作成し Excel との二重入力を ブラウザの印刷機能で出力する もしくは 廃止したい SkyVisualEditor の PDF 化機能を 制 限を理解した上で利用する より高度な帳票を出力する場合 帳票サービス SVF OPROARTS 等 や データ連携サービス SkyOnDemand 等 を利用する リッチな画面を使いたい SkyVisualEditor の Salesforce レイア が デザインは ウト を利用する Salesforce 標準レイア ウトを踏襲したい マスタオブジェクトを参照 SkyVisualEditor の カスタムルックアップテ するレコードをより素早く ンプレート と マスター取得 機能を利用す 登録したい る ユーザごとにレイアウトを SkyVisualEditor の ページ割り当てテンプ 分岐したい レート を利用する マニュアルを見なくてもス SkyVisualEditor の Dashboard レイア ムーズに操作できるよう ウト を利用する Salesforce 上に手順 を載せたい 検索条件を動的に設定 SkyVisualEditor の 検索テンプレート を しながら検索し 検索結 利用する 果を直接編集したい p. 9 UI を開発する

14 SkyVisualEditor インプリメンテーションワークブック 要件 画像を表示したい ソリューション 宣言的開発 コーディング開発 ページに静的な画像を表示する場合 Visualforce ファイル や ドキュメント と数式項目 Apex クラス を組み合わせて画像を表示する JavaScript 等で SkyVisualEditor の 画像 コンポー UI を開発する ネントもしくは 背景画像 機能を利用 する 背景画像 は自由レイアウトの み利用可能 レコード毎に画像を動的表示する場合 メモ 添付 や ファイル ドキュメン ト と数式項目を組み合わせて画像を 表示する リッチテキスト項目に画像を貼付する 選択リスト項目に選択 SkyVisualEditor 標準 肢以外の値を入力した AppComponent の 編集可能な選択リ い スト を利用する Web からの問い合わせ SkyVisualEditor の ウィザード画面テンプ 情報を Salesforce に レート を利用する 取り込みたい 重要項目の文字を目立 SkyVisualEditor に配置した項目のプロパ たせたい ティで設定する 電子サインを付けたい SkyVisualEditor の 手書きサイン を利 用する 特定のオブジェクトのレコ Salesforce の プロセスビルダー を利用す ードが作成されたら る Chatter に投稿したい Salesforce1 モバイル SkyVisualEditor でモバイルアプリケーショ アプリケーション用の画面 ンに最適化した画面を作成し をカスタマイズしたい Salesforce1 に適用する TS スタッフィング株式会社では 上記の内 が予め顕在化していた顧客要件 が要件定義中に 課題として認識され 追加された要件となりました これらの要件を満たす画面を実装するために 次項 以降で画面レイアウトを決定し SkyVisualEditor の宣言的開発で画面を作成します p. 10

15 SkyVisualEditor インプリメンテーションワークブック Salesforce のオブジェクト構成に基づく画面レイアウトの選定 SkyVisualEditor で画面を作成する際は Dashboard レイアウト以外のレイアウト テンプレートで必 ず 主オブジェクト を宣言します 主オブジェクトを中心に SkyVisualEditor で 1 画面内に入力項目 として配置可能なオブジェクトをシンプルにまとめた図を以下に示します 図 2 1 画面内に入力項目として配置可能なオブジェクト 上図では どのオブジェクトを主オブジェクトにするかにより 配置可能な範囲がスライドしていることが確認 できます では実際に どのような形式で配置できるのかを具体的なデータモデルを例に解説します p. 11

16 SkyVisualEditor インプリメンテーションワークブック 図 3 :データモデルの具体例 主な用語の解説 主オブジェクトである カスタムオブジェクト C から 5 階層上までアクセスできますが 入力項目としては配 置できないため 注意が必要です また 子オブジェクトもデータテーブル及び関連リストでの配置のみとな るため 詳細形式での画面レイアウトはできません 兄弟オブジェクトまたは孫オブジェクトについては同一画面上に表示することができませんが 共通する子オ ブジェクトレコードを介して画面遷移することが可能です 以下に具体例を示します p. 12

17 SkyVisualEditor インプリメンテーションワークブック 図 4 兄弟または孫オブジェクトへの遷移 このように 画面を作成する際にはどのオブジェクトの項目をどのようなレイアウトで編集 参照したいかに より主オブジェクトを確定させ その結果どのような画面が構成可能であるかが自ずと決まります では 実際に TS スタッフィング株式会社の 人材紹介アプリケーション のオブジェクト構成を確認し 主オ ブジェクトを確定します 図 5 TS スタッフィング株式会社の 人材紹介アプリケーション オブジェクト構成 p. 13

18 SkyVisualEditor インプリメンテーションワークブック ここで 人材紹介アプリケーション のオペレーションフローを思い出してください 求人情報詳細画面 親 から紹介予定の人材情報レコードの紐付けを行い 紹介履歴 子 を管 理している このオペレーションフローの中で 親子オブジェクトレコードを一括で登録 編集できる画面を作成する必要 がありますので 主オブジェクトは 求人案件 とし 紹介 オブジェクトはデータテーブルで配置します また 紹介レコードを登録する際にはもう一つの親である 人材 を紐付けることも重要なキーワードです データテーブルに配置したオブジェクト A に 別のオブジェクト B を親とするリレーション 主従 参 照関係 が設定されている場合 B をマスタオブジェクトとする マスター取得 機能を利用して 紹介オ ブジェクトを一括で登録することが可能となります 例えば B に山田さんと佐藤さんと高橋さんが人材マス タとして登録されており とある求人案件に 3 名とも紹介したい場合 マスター取得 ボタンをクリックし SkyVisualEditor のカスタムルックアップ画面を起動させ 3 名にチェックを入れて 選択 ボタンをクリック することで 3 名分の紹介レコードが一括登録できます 具体的な設定方法は後の章で学びますが まずここでは実装イメージを掴んでおいてください p. 14

19 SkyVisualEditor インプリメンテーションワークブック SkyVisualEditor の特徴及び機能制限に基づくレイアウトの選定 Studio には 8 つのレイアウトまたはテンプレートがあります 各レイアウトの特徴並びに機能制限を理解 し 顧客要件に最適なレイアウト テンプレートを選択します また レイアウト テンプレートは一度選択 すると後から変更することができないので 注意が必要です 種別 特徴 機能制限 Salesforce レイアウト Salesforce(Classic)の標準レイ アウトに似たデザインで画面を作成 できるレイアウト 画面に配置した部品類(コンポーネ ント)はすべて左寄せで固定される 背景画像の利用不可 ページブロック ページブロックセクシ ョンが利用可能 自由レイアウト 背景画像を利用して 既存の帳票 ページブロック ページブロックセクシ と同様のデザインで画面を作成でき ョンの利用不可 るレイアウト 検索テンプレ ート ページブロックが利用できないため 部品類(コンポーネント)を任意の場 データテーブルの出力形式はデータ 所に配置可能 テーブルのみ 特定のオブジェクトに対する検索画 検索対象は 1 オブジェクトのみ 面をウィザード形式で作成できるテ 検索結果のグルーピング不可 ンプレート AppComponent の利用不可 行動結合テーブル データテーブ 検 索項目 並びに検 索結果 項目 (参照)として 5 階層上までのオブジ ェクトの項目を配置可能 検索結果を直接編集したり 画面 遷移なく新規レコードを追加するこ とが可能 ウィザード画面 テンプレート ウィザード形式の入力画面を作成 できるテンプレート ル 複数行データテーブル コピ 複数ページに渡り入力項目を配置 ー ボタン 帳票出力 ボタン でき 入力内容を確認する確認ペ PDF メニューの利用不可 ージの作成が可能 連動関係の連動項目として設定さ ウィザード内で利用できるレイアウト れている複数選択リスト項目の利 は Salesforce レイアウトもしくは 用不可 自由レイアウト p. 15

20 種 別 特 徴 機 能 制 限 Dashboard 主 オブジェクトを 特 定 しない 参 照 専 入 力 項 目 の 利 用 不 可 レイアウト 用 の 部 品 類 (コンポーネント)を 配 置 可 能 なレイアウト データテーブルや 画 像 AppComponent 等 を 配 置 して 作 成 するホーム 画 面 に 最 適 ページブロック ページブロックセクシ ョンが 利 用 可 能 カスタムルック アップテンプレ 主 従 / 参 照 項 目 のルックアップ 画 面 をウィザード 形 式 で 作 成 できるテ 検 索 条 件 項 目 に 親 オブジェクト 項 目 の 利 用 不 可 ート ンプレート AppComponent の 利 用 不 可 動 的 に 絞 り 込 みが 出 来 る 検 索 条 件 を 設 定 することが 可 能 Salesforce 標 準 レイアウトでの 利 用 不 可 ページ 割 り 当 てテンプレート ユーザに 表 示 される Visualforce ページを 割 り 当 てることのできるテン Salesforce1 モバイルアプリケーシ ョンでの 利 用 不 可 プレート AppComponent の 利 用 不 可 レコードタイプ 及 びプロファイルごとに 割 り 当 ての 設 定 が 可 能 割 り 当 て 設 定 には 標 準 レイアウトと Visualforce ページを 混 在 させるこ とが 可 能 親 子 登 録 テン 親 子 オブジェクト( 主 従 関 係 )を 背 景 画 像 の 利 用 不 可 プレート 同 時 登 録 する 画 面 をウィザード 形 式 で 作 成 できるレイアウト AppComponent の 利 用 不 可 p. 16

21 SkyVisualEditor インプリメンテーションワークブック 本ワークブックにおける実装方法のまとめ 前項までで 顧客要件と Salesforce オブジェクト構成 SkyVisualEditor の機能制限について理解 し 実装方法の選定ができました 実際に画面を作成する前に 実装方法を以下にまとめます 図 6 実装方法 求人情報画面 図 7 実装方法 人材情報画面 p. 17

22 SkyVisualEditor インプリメンテーションワークブック 図 8 実装方法 紹介情報検索画面 図 9 実装方法 マニュアル画面 これで TS スタッフィング株式会社の Salesforce 画面カスタマイズ実装方法が整理できました 次章以 降でこれらの画面を実際に作成しながら SkyVisualEditor による画面開発手法を学びます p. 18

23 SkyVisualEditor インプリメンテーションワークブック 5. Salesforce レイアウトによる画面の実装 所要時間 分 TS スタッフィング株式会社の人材紹介アプリケーションでは リッチな画面を使いたいが デザインは Salesforce 標準レイアウトを踏襲したいという要望がありました この要望を満たすために Salesforce レイアウトを使用して求人情報画面と人材情報画面を作成します Salesforce レイアウトの特徴 Salesforce レイアウトは Salesforce 標準レイアウトと似たデザインで画面を作成するためのベースとな るレイアウトです Visualforce で用意されている各種コンポーネントをこのレイアウトでは利用できるため 画面デザインの統一性を保つことができます 図 10 ページブロック ページブロックセクションによるデザインの統合 p. 19

24 SkyVisualEditor インプリメンテーションワークブック 上図の通り SkyVisualEditor で ページブロック ページブロックセクション コンポーネントを利用す ることにより Salesforce 標準レイアウトと同じデザインで画面が作成できます この ページブロック ペ ージブロックセクション は次章で学習する自由レイアウトでは利用できませんので これらを利用する場合 には必ず Salesforce レイアウトを選択してください ページブロックの表示モードによる出力の違い Salesforce 標準レイアウトは 1 つのレイアウト設定で参照画面と編集画面の両方を制御しますが SkyVisualEditor 画面 Visualforce を利用する場合は必要に応じて参照画面と編集画面をそれ ぞれ準備します その際 ページブロックの表示モードを切り替えることで Salesforce 標準レイアウトの参 照画面 編集画面のいずれのデザインで出力するかが決定します 図 11 ページブロックの表示モードによる出力に違い p. 20

25 SkyVisualEditor インプリメンテーションワークブック Salesforce レイアウトの特徴とページブロックの出力タイプの違いについて理解ができたので 早速 SkyVisualEditor の様々な機能を駆使しながら 求人情報画面と人材情報画面を作成していきましょ う まずは 求人情報画面を作成しながら SkyVisualEditor の基本的な操作方法を学習します 入力項目の配置 求人情報画面として 入力項目を並べた編集画面と 表示項目を並べた参照画面を作成しますが SkyVisualEditor では編集画面をベースに参照画面を作成する方法が効率的です 詳細は後ほど学 習します したがって まずは編集画面を作成します 1. Studio にログインします 2. DE 組織にログインします 3. ファイルメニューの [新規] を選択します 4. レイアウトマネージャが起動しますので Salesforce レイアウトを選択します 5. オブジェクトで [求人案件] を選択します 6. Visualforce ページ名に SVE_HREdit と入力します 7. [OK] をクリックします OK をクリックすると 予め ページブロック と ページブロックセクション が 1 セット配置された状態の画面デ ザインデータが開きます ここで Studio の構成について簡単に説明します 図 12 Studio の構成 p. 21

26 SkyVisualEditor インプリメンテーションワークブック 個々の機能の詳細は画面作成手順の中で説明しますので ここでは割愛します なお 詳細はヘルプサ イトでも確認できます 引き続き入力項目を配置して画面をデザインしていきましょう 求人情報レコードを登録する際に必要な 項目を入力項目として並べます 1. 配置項目種別を [入力] に切り替え オブジェクトペインに表示されている項目のうち [所有者 ID] を除く全ての項目をページブロックセクション内にドラッグ ドロップして配置します 2. ページブロックセクションは最大 30 列まで設定が可能です 今回は 3 列でレイアウトします キャンバスエリア内のページブロックセクションをクリックすると [列追加 列削除] のフローティングパレ ットが表示されます [列追加] をクリックして 3 列目を追加します 3. 以下を参考にして項目をドラッグ ドロップで並び替えます 1 列目 取引先 募集職種 就業開始日 年齢制限 上限 2 列目 案件名 就業場所 都道府県 就業終了日 年齢制限 下限 3 列目 状況 性別 時給 必要な資格 Tips オブジェクトペインの項目は Ctrl キーを押した後 押し続けながら選択することで複数選択し 一括でキャンバスエリア にドラッグ ドロップすることができます 入力項目の配置が完了しました ここで先に進む前に 一旦画面デザインデータを保存します Studio はクラウドサービスのため ネットワー クトラブル等によりセッションが切断された場合 保存していない変更データは失われてしまいます [ファイ ル] メニューの [保存] をクリックしてこまめに保存を行いましょう なお [保存] は Studio サーバ内に デザインデータを保存するのみで 接続している Salesforce 組織へのデータ保存は行いません p. 22

27 SkyVisualEditor インプリメンテーションワークブック コンポーネントの配置 Salesforce の標準レイアウトには画面上部にオブジェクトアイコンとオブジェクト名 レコード名 Name 項目の値 が表示される部分があります レコード名は編集時に表示されます 新規登録時には表示されません この部分を構成するコンポーネントを画面に配置しましょう 1. コンポーネントタブをクリックしてコンポーネントペインをアクティブにします 2. レイアウトセクションの中から [セクションヘッダー] 一番上 を配置済みのページブロックの上にド ラッグ ドロップします Tips コンポーネントペイン内でマウスオーバーすると コンポーネント名がツールチップで表示されます 本ガイドブック中に記 載されたコンポーネント名がわからない場合は マウスオーバーして確認してください 次に 入力が完了した際に保存するためのボタンと 入力を取り消すキャンセルボタンを配置します 1. コンポーネントタブをクリックしてコンポーネントペインをアクティブにします 2. ボタンセクションの中から [保存] ボタンをページブロックのボタン表示領域にドラッグ ドロップしま す 3. 同様に [キャンセル] ボタンも配置します p. 23

28 SkyVisualEditor インプリメンテーションワークブック Tips ページブロックのプロパティ [ボタン表示領域] では ボタンを表示する箇所を 非表示 上下 上のみ 下の み に設定できます ボタンのラベルはプロパティから変更可能です [値を編集する] にチェックを入れると値を変更できます ボタンの表示幅をラベルの長さに応じた可変サイズにしたい場合は プロパティの [幅指定有り] のチェックを OFF に します コンポーネントプロパティの設定 より入力しやすい画面にするために 画面に配置済みのコンポーネント 入力項目 ページブロック ペー ジブロックセクション セクションヘッダー のプロパティを設定します 日付項目の右側には 本日日付リンク がデフォルト表示されます こちらは日付項目の値=レコード作成 日とする場合には大変便利な機能ですが 求人案件レコードを作成する当日が就業開始日 就業終 了日となることは現実的ではないため SVE_HREdit では非表示にします 1. 就業開始日の入力エリアをクリックします 2. コンポーネントプロパティの [本日日付リンク表示] のチェックを OFF にします 3. 就業終了日の入力エリアをクリックします 4. コンポーネントプロパティの [本日日付リンク表示] のチェックを OFF にします Tips キャンバスエリアに配置した項目は Ctrl キーを押し続けながら選択することで複数選択し 共通するプロパティをプロ パティエリアから一括で設定することができます 性別は選択肢が 男性 女性 であり なし は選択しません 今回はこの項目をラジオボタン化し [なし] の表示を外します 1. 性別の入力エリアをクリックします 2. コンポーネントプロパティの [ラジオボタン化] のチェックを ON にします 3. その下の [ なし を表示] のチェックを OFF にします ページブロックのラベルがデフォルトの Component1 のままとなっていますので 求人案件 に変更 します 1. ページブロックをクリックします 2. コンポーネントプロパティの [タイトル] を 求人案件 に修正します p. 24

29 SkyVisualEditor インプリメンテーションワークブック ページブロックセクションも同様に Component2 部分を 詳細情報 に変更します 1. ページブロックセクションをクリックします 2. コンポーネントプロパティの [タイトル] を 詳細情報 に修正します 皆さんは既に ページブロックの表示モードによる出力の違い にてページブロックの出力タイプの違いを学 習しています 実際に SVE_HREdit のページブロックに表示モードを適用してみましょう 1. ページブロックをクリックします 2. コンポーネントプロパティの [表示モード] を edit に変更します 以上で コンポーネントプロパティの設定が完了しました この段階で Salesforce にデプロイして 実際の 画面 Studio から生成された Visualforce ページ を確認してみましょう 1. ファイルメニューの [デプロイ] をクリックします 2. デプロイ確認ダイアログで [テスト環境] を選択し [デプロイ] をクリックします 3. デプロイが成功すると デプロイ完了ダイアログが開きますので Visualforce ページ名の [ページを 開く] リンクをクリックします Salesforce にログインしていない場合はログイン画面に遷移しますので DE 組織にログインして画面を 確認してください Tips デプロイ先をテスト環境にするか本番環境にするかにより Apex クラスのテスト実行方法が異なります 詳細はヘルプ を参照してください 開いた画面で実際にデータを入力して保存し レコードを作成してください レコードを作成したら このレコ ードを使用してもう一度画面を開きます 1. 求人案件レコードを Salesforce 標準レイアウトで開きます 2. URL の末尾 15 桁のレコード ID の前に 以下を追加して開きます apex/sve_hredit?id= p. 25

30 ページプロパティの 設 定 Studio に 戻 り さらに 視 認 性 を 高 める 工 夫 を SVE_HREdit に 施 していきましょう 画 面 を 開 い た 際 ブ ラ ウ ザ の タ ブ には Salesforce Developer... や Edit Page SVE_HREdit ( 開 発 モードが ON の 場 合 )が 表 示 され 画 面 の 識 別 がつきにくくなっています こちらの 内 容 を 任 意 の 文 字 列 に 変 更 する 設 定 を 行 います 更 に いまどの 項 目 に 入 力 カーソルがフォーカ スしているのかわかりやすくするために フォーカス 色 の 設 定 も 行 います 1. ページプロパティの [ページタイトル] に 求 人 案 件 の 編 集 と 入 力 します 2. 同 じくページプロパティの [フォーカス 色 ] セクションを 開 き フォーカス 色 の 有 効 化 を ON にしま す 色 は Pink と Blue から 選 べますので 任 意 の 色 を 選 択 してください マージフィールドを 使 用 した 表 示 テキストの 動 的 表 示 設 定 セクションヘッダーのレコード 名 には Name 項 目 の 値 が 表 示 されますので Name 項 目 が 自 動 採 番 項 目 の 場 合 レコードの 内 容 がわかりづらくなってしまいます SkyVisualEditor では レコード 名 表 示 部 分 に Name 以 外 の 項 目 値 を 表 示 させることが 可 能 です 今 回 は レコード 名 : 案 件 名 ( 募 集 職 種 ) という 内 容 に 変 更 します 1. セクションヘッダーをクリックします 2. [ 値 を 編 集 する] を ON にします 3. [サブタイトル] の レコード 名 を 以 下 の 様 に 修 正 します {!record.name}:{!record.title c}({!record.jobcategory c}) p. 26

31 SkyVisualEditor インプリメンテーションワークブック 図 13 デプロイ後のセクションヘッダー マージフィールドは様々な箇所で利用可能です 例えば 前項で設定したページタイトルにも使用すること ができます 1. ページプロパティをアクティブにします 2. [ページタイトル] の 求人案件の編集 を以下の様に修正します 求人案件の編集 {!record.name} 図 14 デプロイ後のページタイトル Tips マージフィールドはカスタム表示ラベルを指定することも可能です 記述方法は以下のとおりです {!$Label.カスタム表示ラベル名} データテーブルの設定 さて ここで今一度 TS スタッフィング株式会社の顧客要件と SkyVisualEditor による実装方法につい て振り返りましょう 関連リストを画面遷移なく追加 編集 一括操作可能にする 子オブジェクトである 紹介 のレコードを求人案件の編集画面から追加や編集できるようにする必要があ りますので SVE_HREdit にデータテーブルを追加します p. 27

32 1. コンポーネントタブのレイアウトセクションから [ページブロック] をデザインキャンバスの 最 下 部 にドラッ グ&ドロップします 2. ページブロックのタイトルを 紹 介 に 変 更 します 3. コンポーネントタブのレイアウトセクションから [データテーブル] をページブロック 内 にドラッグ&ドロップ します 4. テーブル 設 定 ダイアログの [オブジェクト] で 紹 介 :svewb_candidate c を 選 択 します 5. [ 列 数 ] を 9 に 変 更 します 6. [ 表 示 機 能 設 定 ] エリアの [ 一 括 編 集 ][ 選 択 削 除 ] を ON にします 7. [OK] をクリックします 8. オブジェクトタブをアクティブにし 関 連 オブジェクトタブで 紹 介 :svewb_candidate c を 選 択 します 9. 配 置 項 目 種 別 を 入 力 にし 項 目 をデータテーブル 内 にドラッグ&ドロップします 1 列 目 : 人 材 (2~4 列 目 には 配 置 しない) 5 列 目 : 状 況 6 列 目 : 紹 介 日 7 列 目 : 面 談 日 8 列 目 : 確 定 日 9 列 目 : 備 考 配 置 した 項 目 を 他 の 列 に 移 動 したい 場 合 は 項 目 のヘッダー 部 分 をドラッグ&ドロップして 入 れ 替 え て 下 さい データテーブルの 2 列 目 から 4 列 目 は 人 材 レコードの 項 目 値 を 表 示 させるためにわざと 空 けてあります SkyVisualEditor では 親 の 項 目 を 表 示 項 目 として 配 置 することができますので Salesforce 上 で 数 式 項 目 を 作 成 することなく SVE_HREdit 内 に 人 材 の 項 目 を 配 置 することができます 1. 配 置 項 目 種 別 を 表 示 に 切 り 替 えます 2. 人 材 の 左 側 にある 三 角 のアイコンをクリックし 展 開 します p. 28

33 SkyVisualEditor インプリメンテーションワークブック 3. 展開した項目から該当のものをドラッグ ドロップでデータテーブルに配置します 2 列目 人材名 3 列目 現在の就業状況 4 列目 電話 データテーブルの設定が完了したら デプロイして画面を確認してください 図 15 完成イメージ 求人情報編集画面 以上で求人情報編集画面のデザインが一通り終わりました まだ数点実装ポイントが残っていますが こ こでひとまず人材情報編集画面の作成に移りましょう 人材情報編集画面を作成しながら SkyVisualEditor の操作方法について更に理解を深めてください ページレイアウト取得 求人情報画面は [ファイル] メニューの [新規] で Salesforce レイアウトを選択し 1 から画面を作成 していきました しかし 項目数が多いオブジェクトの場合 1 から作成するのは時間がかかります Salesforce レイアウトを利用した画面を作成する場合 既存の Salesforce 標準レイアウトをデザイン データとして取り込むことができます 今回はこの機能を利用して人材情報画面を作成します 1. [ファイル] メニューの [ページレイアウト取得] をクリックします 2. オブジェクトで [人材] を選択します 3. レコードタイプで [マスタ] を選択します p. 29

34 SkyVisualEditor インプリメンテーションワークブック Tips レコードタイプが設定されているオブジェクトを選択すると マスタの他にレコードタイプ名が選択可能になります 選択 したレコードタイプがページレイアウト取得の対象レイアウトになります 取得に成功すると 以下のコンポーネントが自動で配置されていることが確認できます ページブロック ページブロックセクション 入力項目 データテーブル 紹介 関連リスト 活動予定 活動履歴 メモ 添付ファイル 求人情報画面を作成した時はレイアウトマネージャで Visualforce ページ名を設定しましたが ページレ イアウト取得で生成したデザインデータは Studio が自動で Visualforce ページ名を設定しています Visualforce ページ名の修正はページプロパティで行います 1. ページプロパティの [Visualforce ページ 名前] を SVE_StaffEdit に修正します 2. ファイルメニューの [保存] を選択して保存します 次に 求人情報画面で学習した機能を利用して画面をデザインしていきます 1. セクションヘッダーを配置します 2. すべての日付項目の本日日付リンクを非表示にします 3. 所有者 ID はログインユーザを自動入力させるため 画面から削除します 削除は Delete キー押 下 右クリックの削除 オブジェクト/コンポーネントペインへドラッグ ドロップのいずれかを操作します 4. 最終学歴をラジオボタン化し なし を非表示にします 5. ページブロック 人材 の表示モードを edit にします 6. 情報セクションの列を追加します 7. 郵便番号 都道府県 市区郡 町名番地 ビル名等を 3 列目に移動します 8. メールを 2 列目の 1 番上に移動します 9. 不要な空白スペースを削除します 10. ページタイトルに 人材の編集 {!record.name} と入力します 11. フォーカス色を有効化します 12. 紹介データテーブルの 1 列目を右クリックし [列追加] を選択します 13. 同様に操作し 紹介番号から紹介日の間に新規列を 4 列設定します 14. 紹介データテーブルの 2 列目に 求人案件の取引先を配置します 15. 同様に 3 5 列目に求人案件の案件名 募集職種 就業開始日を配置します p. 30

35 16. 人 材 画 面 からは 紹 介 レコードは 作 成 しないので 行 追 加 ボタンを 外 す 設 定 をします データテーブル( " 件 数 " の 横 あたり)をクリックし データテーブルを 選 択 します 17. データテーブルのプロパティから [ 行 追 加 ボタン 有 り] を OFF にします パネルグリットによる 整 形 職 歴 / 学 歴 セクションには 直 近 3 社 の 職 歴 を 入 力 するための 項 目 が 配 置 されています 職 歴 1,2,3 で 共 通 の 項 目 があり それらが 縦 に 並 んでいることで 冗 長 な 画 面 構 成 の 原 因 となっています これらの 項 目 を [パネルグリッド] コンポーネントで 整 形 し 視 認 性 の 高 いデザインにしてみましょう 1. コンポーネントペインのレイアウトセクションから [パネルグリッド] を 職 歴 / 学 歴 セクションとスキル 情 報 セクションの 間 にドラッグ&ドロップします 2. パネルグリッド 設 定 ダイアログが 開 きますので 行 数 を 4 列 数 を 7 に 設 定 し [OK] をクリックしま す 3. コンポーネントペインのアイテムセクションから [ 自 由 テキスト] を 配 置 したパネルグリッドの 2 行 1 列 目 にドラッグ&ドロップします 4. 配 置 した 自 由 テキストをダブルクリックもしくはコンポーネントプロパティの [ 値 ] のボタンをクリックし 職 歴 1 に 修 正 します 5. 3 行 1 列 目 4 行 1 列 目 も 同 様 に 自 由 テキストを 配 置 し 値 を 職 歴 2 職 歴 3 に 修 正 しま す 6. 1 行 2 列 目 に 自 由 テキストを 配 置 し 値 を 会 社 名 に 修 正 します 7. 1 行 3 列 目 1 行 4 列 目 1 行 6 列 目 1 行 7 列 目 も 同 様 に 自 由 テキストを 配 置 し 値 を 業 種 職 種 就 業 開 始 就 業 終 了 に 修 正 します 1 行 5 列 目 には 何 も 配 置 しないでください 8. 職 歴 / 学 歴 セクションに 配 置 されている 職 歴 1 会 社 名 を 2 行 2 列 目 にドラッグ&ドロップします ( 項 目 ラベルは 自 動 的 に 解 除 されます ) 9. 同 様 に 他 のセルに 残 りの 項 目 を 配 置 します 5 列 目 には 職 種 小 区 分 を 配 置 してください 10. 自 由 テキスト( 職 種 )が 配 置 されている 1 行 4 列 目 と 1 行 5 列 目 をドラッグして 選 択 します 11. フローティングウインドウの 左 上 の [ 結 合 ] をクリックし セルを 結 合 します パネルグリッドの 外 観 は 以 下 の 設 定 がデフォルトです 横 位 置 : 左 p. 31

36 SkyVisualEditor インプリメンテーションワークブック 縦位置 上 背景色 なし 線種 実線 線色 黒 # 上記設定はコンポーネントプロパティから変更が可能です 行タイトル 列タイトル部分の背景色と全体の線色をカスタマイズしてみましょう 1. セルの 1 行 1 列目から 1 行 7 列目をドラッグして選択します 2. コンポーネントプロパティの [背景色] から任意の色をパレットから選択します 色コードを直接記述 することで パレット以外の色を指定することも可能です 3. セルの 2 行 1 列目から 4 行 1 列目をドラッグして選択します 4. コンポーネントプロパティの [背景色] から任意の色をパレットから選択します 5. 1 行 1 列目をダブルクリックして パネルグリッドを選択します 6. コンポーネントプロパティの [線色] で任意の色を設定します 7. 1 行 1 列目から 4 行 7 列目をドラッグして全てのセルを選択します 8. コンポーネントプロパティの [線色] をパネルグリッドの線色と同じ設定にします Tips その他 セル内の位置設定やセルパディング セルスペース等様々な設定が可能です 例えば セルパディングに 3 と入力すると セル内余白を上下左右に 3px ずつ持たせることができます 個別のセルに 対する余白設定や 上下左右の個別設定を行いたい場合は [追加スタイル] にインラインスタイルを記述することが できます これで共通項目をすっきりと表示できました 職歴 学歴セクションに残っている空白スペースは不要なの で 削除しておきましょう 入れ子にしたページブロックセクションよる整形 スキル情報セクションには 2 列目に複数選択リスト項目 保有資格 があり 1 列目の 1 項目と 2 項 目目の間が間延びしています この余分なスペースを詰めて表示したいので ページブロックセクションを入れ子にして整形します p. 32

37 1. コンポーネントペインからページブロックセクションをスキル 情 報 セクションの 1 列 目 にドラッグ&ドロップし ます 2. 列 数 を 1 に 指 定 します 3. 追 加 したページブロックセクションのプロパティで [ヘッダー 表 示 有 り] を OFF にします 4. スキル 情 報 セクションの 1 列 目 の 5 項 目 を 追 加 したページブロックセクション 内 に 移 動 します 計 算 式 の 設 定 スキル 情 報 セクションの 1 列 目 に 配 置 している 5 項 目 は 人 材 のスキルレベルを 評 価 項 目 ごとに 0~10 の 数 値 でスコアリングする 数 値 項 目 です 5 つの 評 価 項 目 の 合 計 値 は 数 式 項 目 で 計 算 されています 数 式 項 目 はレコードを 保 存 しないと 再 計 算 されないため 入 力 しながら 合 計 値 を 確 認 するための 項 目 として は 利 用 できません そこで SkyVisualEditor の 計 算 式 機 能 を 利 用 し 入 力 しながら 合 計 値 が 確 認 できる 機 能 を 設 定 しま す 計 算 式 を 利 用 するには 計 算 結 果 を 表 示 させるための 入 力 項 目 ( 数 値 型 通 貨 型 パーセント 型 )も しくは [ 計 算 結 果 ] コンポーネントを 画 面 に 予 め 配 置 しておく 必 要 があります 今 回 は [ 計 算 結 果 ] コン ポーネントを 利 用 します 1. コンポーネントペインのアイテムセクションから [ 計 算 結 果 ] をスキル 情 報 セクションの 1 列 目 最 下 部 にドラッグ&ドロップします 2. calcresult と 書 かれたラベルをクリックし コンポーネントプロパティの [ 値 ] を 評 価 総 合 点 数 に 修 正 します 次 に 設 定 する 計 算 式 で 利 用 しやすいように 計 算 結 果 入 力 項 目 の ID を 変 更 しておきます(これは 必 ず しも 計 算 結 果 コンポーネントの 利 用 にあたり 必 要 な 設 定 ではありません) 1. 評 価 総 合 点 数 ラベルの 右 の 入 力 項 目 をクリックします 2. コンポーネントプロパティの [ID] を SumEvalPoint に 修 正 します p. 33

38 次 に 計 算 式 の 設 定 を 行 います 計 算 式 には 3 つの 計 算 処 理 方 法 が 準 備 されています 主 オブジェクト 計 算 式 集 計 計 算 式 関 連 オブジェクト 計 算 式 画 面 に 配 置 した 主 オブジェクトの 入 力 項 目 ( 数 値 型 通 貨 型 パーセン ト 型 ) 及 び 固 定 値 を 利 用 して 四 則 演 算 設 定 ができます 計 算 結 果 は 主 オブジェクトの 入 力 項 目 ( 数 値 型 通 貨 型 パーセント 型 )または [ 計 算 結 果 ] コンポーネントに 出 力 することができます データテーブルに 配 置 した 関 連 オブジェクトの 入 力 項 目 ( 数 値 型 通 貨 型 パーセント 型 )を 集 計 して 主 オブジェクトの 入 力 項 目 ( 数 値 型 通 貨 型 パーセント 型 )または [ 計 算 結 果 ] コンポーネントに 出 力 すること ができます データテーブルに 配 置 した 関 連 オブジェクトの 入 力 項 目 ( 数 値 型 通 貨 型 パーセント 型 ) 及 び 固 定 値 を 利 用 して 四 則 演 算 設 定 ができます 計 算 結 果 は 関 連 オブジェクトの 入 力 項 目 ( 数 値 型 通 貨 型 パーセント 型 )に 出 力 することができます 今 回 は 人 材 オブジェクトの 項 目 を 集 計 するので 主 オブジェクト 計 算 式 を 使 用 します 1. ページプロパティの [ 計 算 式 ] セクションをクリックし 展 開 します 2. [ 計 算 式 の 編 集 ] をクリックします 3. 主 オブジェクト 計 算 式 セクションの [ 追 加 ] をクリックします 4. = の 右 のプルダウンから SumEvalPoint を 選 択 します 5. [ 編 集 ] をクリックします 6. 項 目 リストで 項 目 を 1 つクリックします 7. [+] をクリックします 8. 残 りの 4 つの 項 目 も 同 様 に 設 定 します 9. [ 完 了 ] をクリックします 10. [OK] をクリックして 計 算 式 の 設 定 を 終 了 します 以 上 で 編 集 画 面 のデザインが 完 了 しました デプロイして 動 作 を 確 認 してみましょう p. 34

39 SkyVisualEditor インプリメンテーションワークブック 図 16 完成イメージ 人材情報編集画面 参照画面作成 前項までで 案件情報編集画面と人材情報編集画面の 2 画面が作成できました 本項では 作成済 みの編集画面から参照画面を作成する方法を学びます 1. ファイルメニューから [開く] を選択します 2. SVE_HREdit を選択して [開く] をクリックします 3. ツールメニューから [参照画面作成] を選択します p. 35

40 SkyVisualEditor インプリメンテーションワークブック 4. [変換後 Visualforce ページ名] を SVE_HRView に修正し [OK] をクリックします 上記手順により 入力項目が自動で表示項目へ変換された参照画面が自動生成されました 生成さ れた画面をカスタマイズし 参照画面を完成させましょう 1. 求人案件ページブロックの表示モードを maindetail に変更します 2. 性別のラジオボタン化を OFF にします 3. ページタイトルを 求人案件の詳細 {!record.name} に修正します 4. デプロイします 図 17 完成イメージ 求人情報参照画面 同様に 人材参照画面も作成します 1. ファイルメニューから [開く] を選択します 2. SVE_StaffEdit を選択して [開く] をクリックします 3. ツールメニューから [参照画面作成] を選択します 4. [変換後 Visualforce ページ名] を SVE_StaffView に修正し [OK] をクリックします 5. 人材ページブロックの表示モードを maindetail に変更します 6. 最終学歴のラジオボタン化を OFF にします 7. 計算式を削除します 8. 評価総合点数 計算結果コンポーネント を削除し 同じ位置に評価総合点数 表示項目 を配置します 9. ページタイトルを 人材の詳細 {!record.name} に修正します 10. デプロイします p. 36

41 SkyVisualEditor インプリメンテーションワークブック 図 18 完成イメージ 人材情報参照画面 以上で参照画面の作成は完了です p. 37

42 6. 自 由 レイアウトによる 画 面 の 実 装 所 要 時 間 : 20~40 分 TS スタッフィング 株 式 会 社 の 要 件 の 中 に スキルシートを Salesforce から 直 接 出 力 したいという 要 件 が ありました スキルシートは 既 に Excel でフォーマットが 決 まっており 運 用 されています こちらのフォーマット をそのまま 利 用 し Salesforce の 人 材 レコードを 出 力 する 画 面 を 自 由 レイアウトで 作 成 します 自 由 レイアウトの 特 徴 自 由 レイアウトの 最 大 の 特 徴 は 各 コンポーネントを 好 みの 位 置 に 配 置 できるということと 背 景 に 画 像 を 表 示 できるというところです 今 回 のように 既 存 の 帳 票 をそのまま 活 用 して 画 面 を 作 成 する 場 合 に 威 力 を 発 揮 するレイアウトです 背 景 画 像 の 設 定 背 景 に 利 用 したい 帳 票 などがある 場 合 画 像 データで 準 備 しておく 必 要 があります 利 用 可 能 なフォーマッ トは 以 下 のとおりです image/bmp image/gif image/jpeg image/pjpeg image/png image/x-png 画 像 データが 用 意 できたら Salesforce の 静 的 リソースにアップロードします 静 的 リソースの 詳 細 ならび に 利 用 方 法 は Salesforce のヘルプを 確 認 してください uage=ja 今 回 は 既 に 学 習 用 パッケージに 含 まれる 静 的 リソースを 使 用 してスキルシート 画 面 を 作 成 します 1. ファイルメニューの [ 新 規 ] を 選 択 します 2. 自 由 レイアウトを 選 択 します 3. オブジェクトで [ 人 材 ] を 選 択 します 4. Visualforce ページ 名 に SVE_Skillsheet と 入 力 します 5. OK ボタンをクリックします 6. ページプロパティの 背 景 画 像 セクションを 展 開 し 参 照 ボタンをクリックします 7. skillsheet を 選 択 して [ 背 景 画 像 設 定 ] をクリックします p. 38

43 ここまでの 手 順 で 背 景 画 像 を 設 定 した 画 面 が 設 定 できました 引 き 続 き 項 目 を 並 べ 画 面 を 完 成 させ ますが この 画 面 上 ではデータの 入 力 は 行 いませんので すべて 表 示 項 目 で 配 置 します 配 置 箇 所 は 以 下 を 参 考 にしてください 項 目 名 人 材 名 年 齢 性 別 都 道 府 県 就 業 開 始 可 能 日 最 終 学 歴 現 在 の 就 業 状 況 職 歴 1 会 社 名 職 歴 2 会 社 名 職 歴 3 会 社 名 職 歴 1 業 種 職 歴 2 業 種 職 歴 3 業 種 職 歴 1 職 種 小 区 分 職 歴 2 職 種 小 区 分 職 歴 3 職 種 小 区 分 職 歴 1 就 業 期 間 ( 開 始 ) 職 歴 2 就 業 期 間 ( 開 始 ) 職 歴 3 就 業 期 間 ( 開 始 ) 職 歴 1 就 業 期 間 ( 終 了 ) 職 歴 2 就 業 期 間 ( 終 了 ) 職 歴 3 就 業 期 間 ( 終 了 ) 保 有 資 格 適 切 なコミュニケーションが 取 れる 協 調 性 がある 適 切 な 気 配 りができる 積 極 的 に 話 ができる 発 言 に 終 始 一 貫 性 がある 配 置 箇 所 氏 名 の 右 側 年 齢 の 右 側 性 別 の 右 側 自 宅 所 在 地 の 右 側 就 業 開 始 可 能 日 の 右 側 最 終 学 歴 の 右 側 現 在 の 就 業 状 況 の 右 側 会 社 名 の 1 行 目 会 社 名 の 2 行 目 会 社 名 の 3 行 目 業 種 の 1 行 目 業 種 の 2 行 目 業 種 の 3 行 目 職 種 の 1 行 目 職 種 の 2 行 目 職 種 の 3 行 目 就 業 期 間 の 1 行 目 ~ の 左 側 就 業 期 間 の 2 行 目 ~ の 左 側 就 業 期 間 の 3 行 目 ~ の 左 側 就 業 期 間 の 1 行 目 ~ の 右 側 就 業 期 間 の 2 行 目 ~ の 右 側 就 業 期 間 の 3 行 目 ~ の 右 側 保 有 資 格 の 右 側 適 切 なコミュニケーションが 取 れる の 右 側 塗 りつぶし 部 分 協 調 性 がある の 右 側 塗 りつぶし 部 分 適 切 な 気 配 りができる の 右 側 塗 りつぶし 部 分 積 極 的 に 話 ができる の 右 側 塗 りつぶし 部 分 発 言 に 終 始 一 貫 性 がある の 右 側 塗 りつぶし 部 分 出 力 日 は 出 力 する 当 日 の 日 付 ( 今 日 )を 表 示 したいので [ 本 日 日 付 ] コンポーネントを 利 用 し ましょう p. 39

44 SkyVisualEditor インプリメンテーションワークブック 1. コンポーネントペインから [本日日付] を 出力日 の右側にドラッグ ドロップします 配置後 コンポーネントプロパティで日付の書式等を変更できます 今回はデフォルトのままで OK です Tips 自由レイアウトは配置コンポーネントの位置揃えを補助するグリッド表示 吸着機能を備えています 詳細はヘルプを 参照してください PDF 化 スキルシートは最終的にクライアントへ提出する帳票なので PDF に出力します SkyVisualEditor では Visualforce の PDF レンダリング機能を利用して PDF を出力することができます 1. ページプロパティの PDF セクションを展開し [PDF 化] を ON にします 2. [用紙の向き] を 横 に変更します 3. デプロイします デプロイしたら レコード ID を指定して画面を確認してみましょう 図 19 完成イメージ スキルシート p. 40

45 カスタムボタンからの 呼 び 出 し 前 項 で 作 成 した PDF 画 面 SVE_Skillsheet は 人 材 の 参 照 画 面 から 出 力 しますので 出 力 する ためのボタンを 人 材 参 照 画 面 に 設 定 します 1. SVE_StaffView を 開 きます 2. コンポーネントペインのボタンセクションから [カスタム] をキャンセルボタンの 右 側 にドラッグ&ドロップし ます 3. コンポーネントプロパティの [ 値 ] を カスタム から スキルシート 出 力 に 修 正 します 4. [ 幅 指 定 あり] を OFF にします 5. [ 遷 移 先 設 定 ] のボタンをクリックします 6. URL エディタが 開 くので Visualforce ページへ を 選 択 します 7. プルダウンから SVE_Skillsheet を 選 択 します 8. [?ID={ID}] ボタンをクリックします 9. 完 了 をクリックし コンポーネントプロパティの [ 別 ウインドウで 開 く] を ON にします 10. デプロイします 8 の 手 順 で ID の 指 定 を 行 わないと レコード 値 の 入 らない 空 の PDF が 出 力 されてしまいますので 必 ず 設 定 するようにしてください p. 41

46 7. 検 索 テンプレートによる 画 面 の 実 装 所 要 時 間 : 30~50 分 TS スタッフィング 株 式 会 社 の 要 件 のひとつとして 以 下 の 要 件 が 挙 がっていました 検 索 条 件 を 動 的 に 設 定 しながら 検 索 し 検 索 結 果 を 直 接 編 集 したい この 要 件 を 満 たす 機 能 として 検 索 テンプレート が 利 用 可 能 です 今 回 は 紹 介 情 報 を 検 索 し 検 索 結 果 を 直 接 編 集 できる 画 面 を 作 成 します 検 索 テンプレートの 特 徴 検 索 テンプレートは Salesforce 標 準 のリストビューやレポートでは 実 現 できない 機 能 を 有 しています リ ストビュー 及 びレポートとの 比 較 を 以 下 に 示 します リストビュー レポート 検 索 テンプレート 検 索 結 果 の 表 示 レコードの 編 集 / 一 括 編 集 複 数 データを 参 照 しな がらの 新 規 レコードの 追 加 ビューと 比 べてより 多 くの 項 目 での 編 集 が 可 能 ヘッダー 固 定 検 索 条 件 の 登 録 1 画 面 上 で 検 索 条 件 の 指 定 と 検 索 結 果 の 表 示 が 可 能 条 件 を 都 度 指 定 した 検 索 親 階 層 オブジェクトの 項 目 を 検 索 条 件 / 結 果 に 利 用 検 索 テンプレートはウィザード 形 式 で 作 成 できるので 前 章 までで 学 習 した Salesforce レイアウト 自 由 レイアウトより 遥 かに 短 時 間 で 画 面 開 発 することが 可 能 です ウィザードでの 設 定 では 早 速 以 下 の 手 順 で 紹 介 情 報 の 検 索 画 面 を 作 成 していきましょう p. 42

47 1. ファイルメニューの [ 新 規 ] を 選 択 します 2. [テンプレート] 検 索 画 面 を 選 択 します 3. オブジェクトで 紹 介 を 選 択 します 4. Visualforce ページ 名 に SVE_CandidateSearch と 入 力 します 5. [OK] をクリックします ここまで 進 むと 設 定 画 面 をウィザード 形 式 で 進 めることができます 設 定 は 以 下 の 流 れで 行 います 検 索 条 件 項 目 選 択 検 索 画 面 上 部 に 並 ぶ 検 索 条 件 項 目 を 選 択 します 検 索 条 件 には 親 の 項 目 も 利 用 できます action?pageid= 検 索 条 件 項 目 設 定 選 択 した 検 索 条 件 項 目 の [ 複 数 指 定 ] [デフォルト 演 算 子 ] [ 演 算 子 表 示 ] を 設 定 します また この 画 面 で 検 索 条 件 の 追 加 設 定 も 行 います action?pageid= オブジェクトテーブル 設 定 テーブル 種 類 テーブル 機 能 及 びその 他 の 設 定 を 行 い ます action?pageid= p. 43

48 検 索 結 果 項 目 設 定 検 索 結 果 テーブルに 出 力 する 項 目 を 設 定 します 前 の 画 面 で 選 ん だテーブル 種 類 に 応 じ て 表 示 項 目 and/or 入 力 項 目 が 選 択 可 能 になります action?pageid= 検 索 結 果 レコード 詳 細 画 面 設 定 ( 詳 細 パネルの 設 定 ) 検 索 結 果 の 詳 細 画 面 を 同 一 画 面 上 に 表 示 する [ 詳 細 パネル] を 設 定 します ( 本 ワークブックでは 使 用 しません ) action?pageid= では 実 際 に 設 定 を 続 けましょう 1. 検 索 条 件 項 目 選 択 画 面 で 次 の 項 目 を 選 択 します 状 況 求 人 案 件 の 取 引 先 求 人 案 件 人 材 紹 介 日 面 談 日 確 定 日 求 人 案 件 の 取 引 先 は SVE_HREdit の 紹 介 データテーブル 作 成 時 に 親 の 項 目 を 配 置 した 手 順 と 同 様 に 求 人 案 件 から 選 択 してください 日 付 項 目 は 単 日 検 索 と 範 囲 検 索 ができます 今 回 は 範 囲 検 索 を 選 択 してください 2. [ 表 示 列 数 ] を 3 に 変 更 します 3. [ 空 白 スペース] を 2 回 クリックします 4. 選 択 済 となった 空 白 スペース 2 個 を 状 況 の 下 に 移 動 します 5. [OK] をクリックします これで 検 索 条 件 項 目 として 使 用 する 項 目 の 設 定 が 完 了 しました 次 に 状 況 ( 選 択 リスト 項 目 )を OR 検 索 するための 設 定 を 行 います 1. ウィザード 画 面 ( 検 索 条 件 項 目 設 定 )で 状 況 の [ 複 数 指 定 ] を ON にします 2. [デフォルト 演 算 子 ] を 次 の 値 を 含 む に 変 更 します 3. [ 演 算 子 表 示 ] を OFF にします p. 44

49 上 記 設 定 により 選 択 リスト 値 の OR 検 索 設 定 が 完 了 しました さらに 取 引 先 ( 参 照 項 目 )も OR 検 索 できるように 設 定 します 1. ウィザード 画 面 ( 検 索 条 件 項 目 設 定 )の [ 検 索 条 件 追 加 ] をクリックします 2. 求 人 案 件 の 三 角 マークをクリックして 展 開 し 取 引 先 を 選 択 します 3. [OK] をクリックします 取 引 先 の OR 検 索 設 定 まで 完 了 しました 次 の 画 面 のようになっていたら 検 索 条 件 項 目 の 設 定 は 成 功 です 選 択 リスト 項 目 の OR 検 索 は [ 複 数 指 定 ] を ON に それ 以 外 の 項 目 を OR 検 索 したい 場 合 は [ 検 索 条 件 追 加 ] ボタンから 項 目 を 追 加 することを 学 習 できました それでは 次 にオブジェクトテーブル 設 定 に 進 みます 1. [ 次 へ] をクリックし オブジェクトテーブル 設 定 に 進 みます 2. テーブル 種 類 選 択 で 複 合 テーブル を 選 択 します 複 合 テーブルは 検 索 結 果 に 表 示 項 目 と 入 力 項 目 の 両 方 を 含 めることができる 出 力 形 式 です p. 45

50 3. テーブル 機 能 で 行 削 除 ボタン 一 括 編 集 選 択 削 除 ページング テーブル 内 検 索 を ON にします 紹 介 レコードは 必 ず 求 人 案 件 画 面 から 登 録 する 運 用 になるため 行 追 加 ボタン は OFF にしてください 最 後 に 検 索 結 果 に 表 示 する 項 目 の 選 択 をします 1. [ 次 へ] をクリックし 検 索 結 果 項 目 設 定 に 進 みます 2. 以 下 の 項 目 を 選 択 します は 表 示 項 目 は 入 力 項 目 です : 紹 介 番 号 求 人 案 件. 取 引 先 求 人 案 件 人 材 : 状 況 紹 介 日 面 談 日 確 定 日 備 考 3. [ 完 了 ] をクリックします ウィザード 完 了 後 の 設 定 ウィザードでは 検 索 条 件 項 目 やテーブル 種 類 検 索 結 果 項 目 の 設 定 が 出 来 ました ウィザード 完 了 後 に も 各 種 設 定 をプロパティエリアから 行 うことができます 今 回 は 検 索 結 果 にマスク 設 定 絞 込 条 件 及 び 検 索 結 果 保 持 形 式 の 設 定 を 行 います マスク 設 定 マスク 設 定 とは 保 存 や 削 除 テーブルの 行 レコード 追 加 等 の 各 ボタン 押 下 時 に 各 入 力 項 目 の 入 力 や 他 のボタン 押 下 を 出 来 ないようにする 設 定 です マスク 設 定 を 有 効 化 すると 入 力 作 業 中 の 誤 操 作 を 防 ぐことができます 1. ページプロパティをアクティブにします 2. [マスク 設 定 ] セクションを 展 開 し ページマスク 有 効 化 を ON にします 絞 込 条 件 検 索 結 果 を 表 示 するテーブルには 絞 込 条 件 及 びソート 条 件 を 設 定 することが 可 能 です この 機 能 を 利 用 し 検 索 結 果 をログインユーザが 所 有 するレコードで 絞 り 込 み 紹 介 日 を 昇 順 ソートする 設 定 を 行 います 1. 検 索 結 果 テーブルをクリックしてコンポーネントプロパティをアクティブにします 2. [ 高 度 なテーブル 機 能 ] セクションの [ 絞 込 条 件 ] ボタンをクリックします 3. [ 次 へ] をクリックします 4. 検 索 条 件 の [ 追 加 ] をクリックします 5. 項 目 で 求 人 案 件 を 選 択 します 6. 参 照 先 項 目 で 所 有 者 ID を 選 択 します 7. 演 算 子 で 次 の 文 字 列 と 一 致 する を 選 択 します p. 46

51 SkyVisualEditor インプリメンテーションワークブック 8. 値で [特別値] をクリックし ユーザーID USER_ID を選択します 9. ソート条件の [追加] をクリックします 10. 項目で 紹介日 を選択します 11. [完了] をクリックします Tips: 今回は主従関係の従側であるオブジェクト 紹介 の検索画面のため 検索条件の項目を主側のオブジェクト 求人案件 の所有者 ID としています 検索結果保持形式 検索結果保持形式は 検索結果項目数や検索結果レコードデータ量が多い画面で Salesforce のビ ューステートエラーを発生しにくくするための設定を行うことができます 検索結果保持形式による機能の 比較を以下に示します 形式 ページング ソート 検索処理 クライアントサイ クライアント画面上 クライアント画面上で処理す 表示データ量 項目 ド デフォルト で処理するため速い るため速い 数 レコード件数 が多 設定 変更データはページ 複数項目のソートが可能 いと View State エラー ング後でも保存可能 変更データはソート後でも が発生する可能性有り 保存可能 画面表示速度がクライ アント端末の性能に影響 される可能性がある サーバーサイド 毎回クエリ実行 サーバに通信し メ サーバに通信し メモリに保 クライアントサイド方式よ モリに保存しているデ 存しているデータを画面に表 りも ViewState エラーが ータを画面に表示す 示する 発生しにくく テーブル機 る 単一項目のソートが可能 能 が 活 か さ れ た検 索 処 変更データはページ 変更データはソート後でも 理が実行可能 ング後でも保存可能 保存可能 サーバに通信し ク サーバに通信し クエリ実行 毎回画面表示に必要 エリ実行して最新デ して最新データを取得して画 なデータのみ検索クエリを ータを取得して画面 面に表示する そのため速度 実 行 す る た め に表示する そのため は一番遅い ViewState エラー が非 速度は一番遅い 単一項目のソートが可能 常に発生しにくい 変更データはページ 変更データはソート前に保 ング前に保存する必 存する必要がある 要がある p. 47

52 SkyVisualEditor インプリメンテーションワークブック SVE_CandidateSearch ではデータテーブルに絞込条件を設定しているためビューステートエラーが発 生する可能性は少ないですが 紹介レコードを多数所有しているユーザが全件検索をしたことを想定し 検索結果保持形式を サーバーサイド に設定します 1. 検索結果テーブルをクリックしてコンポーネントプロパティをアクティブにします 2. 高度なテーブル機能セクションの [検索結果保持方式] を サーバーサイド に変更します 3. [再描画範囲] を データテーブル に変更します 以上で検索画面の設定は完了です 最後にページタイトルを設定し 画面をデプロイしておきましょう 1. ページプロパティの [ページタイトル] に 紹介情報の検索 と入力します 2. デプロイします デブロイしたら 検索結果に一致するレコードと一致しないレコードを登録し 動作確認してください 以下 が完成イメージです 図 20 完成イメージ 紹介情報検索画面 p. 48

53 8. カスタムルックアップテンプレートによる 画 面 の 実 装 所 要 時 間 : 15~30 分 TS スタッフィング 株 式 会 社 の 以 下 要 件 を 満 たすために さらなる 実 装 を 進 めていきます 紹 介 レコード 登 録 時 の 人 材 ルックアップ 選 択 の 際 人 材 の 特 定 項 目 を 検 索 条 件 にして 求 人 にマッチ する 人 材 を 迅 速 に 検 索 する 関 連 リストを 画 面 遷 移 なく 追 加 編 集 一 括 操 作 可 能 にする 2 つめの 要 件 は 求 人 情 報 画 面 にデータテーブルを 設 置 することで 既 に 実 装 済 みですが 複 数 の 紹 介 レコ ードを 一 括 で 登 録 できるとより 便 利 です これらの 要 件 は SkyVisualEditor のカスタムルックアップテンプ レートで 実 現 が 可 能 です カスタムルックアップテンプレートの 特 徴 カスタムルックアップテンプレートは 高 度 なルックアップ 画 面 をウィザード 形 式 で 作 成 できるテンプレートです 検 索 テンプレートの 様 に 複 数 の 検 索 条 件 項 目 を 設 定 できるため Salesforce 標 準 のルックアップより 高 度 な 検 索 を 行 うことができます また 複 数 レコードをまとめて 呼 び 出 し 元 画 面 に 設 定 することもできるため データテーブル 1 行 ずつにルックアップの 指 定 を 行 わず 一 括 でレコードを 登 録 することができるようになります ウィザードでの 設 定 はじめに 紹 介 レコード 登 録 時 の 人 材 ルックアップ 選 択 の 際 に 起 動 するカスタムルックアップ 画 面 ( 単 一 レ コード 選 択 画 面 )を 作 成 します 1. ファイルメニューの [ 新 規 ] を 選 択 します 2. [テンプレート] カスタムルックアップを 選 択 します 3. オブジェクトで 人 材 を 検 索 します 4. Visualforce ページ 名 に SVE_StaffLookupSingle と 入 力 します 5. [OK] をクリックします ここまで 進 むと 設 定 画 面 をウィザード 形 式 で 進 めることができます 設 定 は 以 下 の 流 れで 行 います p. 49

54 検 索 条 件 項 目 選 択 選 択 リスト 形 式 かテキスト 形 式 で 検 索 条 件 項 目 を 配 置 します action?pageid= オブジェクトテーブル 設 定 テーブル 機 能 とレコード 選 択 形 式 を 設 定 します action?pageid= 検 索 結 果 項 目 設 定 検 索 結 果 テーブルに 出 力 する 項 目 を 設 定 します action?pageid= では 実 際 に 設 定 を 続 けましょう 1. 検 索 条 件 項 目 設 定 画 面 で 次 の 項 目 を 選 択 します 選 択 リスト 形 式 : 希 望 業 種 希 望 勤 務 地 ( 第 一 希 望 ) 希 望 職 種 ( 第 一 希 望 ) 現 在 の 就 業 状 況 性 別 テキスト 形 式 : 人 材 名 2. [ 次 へ] をクリックします 3. オブジェクトテーブル 設 定 はデフォルトのまま(ページングなし テーブル 内 検 索 なし 単 一 レコード 選 択 )とし [ 次 へ] をクリックします p. 50

55 4. 検 索 結 果 項 目 設 定 画 面 で 次 の 項 目 を 選 択 します 人 材 名 希 望 業 種 希 望 勤 務 地 ( 第 一 希 望 ) 希 望 職 種 ( 第 一 希 望 ) 評 価 判 定 性 別 現 在 の 就 業 状 況 就 業 開 始 可 能 日 5. [ 完 了 ] をクリックします こ れで カ ス タ ム ル ッ ク アップ 画 面 ( 単 一 レ コ ー ド 選 択 画 面 ) の 設 定 が 完 了 し ました 後 ほ ど SVE_HREdit から 呼 び 出 す 設 定 を 行 いますので デプロイしておきます 次 に 複 数 レコードをまとめて 呼 び 出 し 元 画 面 に 設 定 するカスタムルックアップ 画 面 ( 複 数 レコード 選 択 画 面 )を 作 成 します レコード 選 択 形 式 以 外 は SVE_StaffLookupSingle と 同 じなので 別 名 保 存 機 能 を 利 用 して 作 成 を 効 率 化 します 1. ファイルメニューの [ 別 名 保 存 ] を 選 択 します 2. Visualforce ページ 名 に SVE_StaffLookupMulti と 入 力 します 3. [OK] をクリックします 4. ウィザードメニューの [ウィザードに 戻 る] を 選 択 します 5. [ 次 へ] をクリックします 6. オブジェクトテーブル 設 定 画 面 のレコード 選 択 で 複 数 レコード 選 択 に 変 更 します 7. [ 完 了 ] をクリックします 以 上 でカスタムルックアップ 画 面 ( 複 数 レコード 選 択 画 面 )の 設 定 が 完 了 しました こちらも 後 ほど SVE_HREdit から 呼 び 出 す 設 定 を 行 いますので デプロイしておきます 呼 び 出 し 元 画 面 の 設 定 1( 単 一 レコード 選 択 画 面 ) カスタムルックアップ 画 面 は SkyVisualEditor で 作 成 した 画 面 から 呼 び 出 す 必 要 があります 作 成 した SVE_StaffLookupSingle を SVE_HREdit から 呼 び 出 す 設 定 を 行 いましょう 1. SVE_HREdit を 開 きます 2. 紹 介 データテーブル 内 に 設 置 した 人 材 の 入 力 エリアをクリックします 3. コンポーネントプロパティのルックアップ 取 得 セクションから [カスタムルックアップ 画 面 選 択 ] をクリックし ます 4. SVE_StaffLookupSingle を 選 択 し [OK] をクリックします 呼 び 出 し 元 画 面 の 設 定 2( 複 数 レコード 選 択 画 面 ) 複 数 レコード 選 択 画 面 も 単 一 レコード 選 択 画 面 同 様 SkyVisualEditor 画 面 から 呼 び 出 す 必 要 があり ま す が 設 定 方 法 は 単 一 レ コ ー ド 選 択 画 面 と 異 な り ま す SVE_StaffLookupMulti を SVE_HREdit から 呼 び 出 す 設 定 を 行 い その 方 法 を 学 びましょう p. 51

56 1. SVE_HREdit を 開 きます 2. 紹 介 データテーブル( " 件 数 " の 横 あたり)をクリックし データテーブルを 選 択 します 3. コンポーネントプロパティのカスタムルックアップセクションの [ルックアップ 対 象 項 目 ] で " 人 材 : Staff c" を 選 択 します 4. [カスタムルックアップ 画 面 選 択 ] が 選 択 できるようになるので SVE_StaffLookupMulti を 選 択 して [OK] をクリックします データテーブルの [ 選 択 削 除 ] ボタンの 右 側 に [マスター 取 得 ] ボタンが 新 しく 設 置 されたことが 確 認 でき ると 思 います このボタンが 複 数 の 人 材 を 一 括 で 紹 介 レコードに 登 録 する 機 能 を 実 現 するものとなります 実 際 に SVE_HREdit をデプロイして 挙 動 を 確 認 してみてください p. 52

57 9. Dashboard レイアウトによる 画 面 の 実 装 所 要 時 間 : 30~50 分 TS スタッフィング 株 式 会 社 の 要 件 で マニュアルを 見 なくてもスムーズに 操 作 できるよう Salesforce 上 に 手 順 を 載 せたいというものがありました Dashboard レイアウトを 使 用 すると オブジェクトに 依 存 しないコ ンポーネントを 配 置 した 画 面 を 作 成 することができますので こういった 要 件 に 最 適 です Dashboard レイアウトの 特 徴 Dashboard レイアウトは 表 形 式 でのレコード 表 示 や 画 像 AppComponent 等 を 1 画 面 に 配 置 し た 画 面 を 作 成 することができます Salesforce のホームタブに 近 いイメージです コンポーネントの 配 置 Dashboard レイアウトにコンポーネントを 配 置 してマニュアル 画 面 を 作 成 する 前 に TS スタッフィング 株 式 会 社 のオペレーションフローと 関 連 するアクションをまとめておきましょう 人 材 登 録 電 話 メール 等 で 受 け 付 けた 人 材 をSalesforceに 登 録 します 関 連 するアクション: 人 材 オブジェクトにレコードを 登 録 求 人 案 件 登 録 取 引 先 から 受 領 した 求 人 案 件 情 報 をSalesforceに 登 録 します 関 連 するアクション: 求 人 案 件 オブジェクトにレコードを 登 録 マッチング 求 人 案 件 にマッチする 人 材 を 検 索 し マッチング 登 録 します 関 連 するアクション: 紹 介 オブジェクトにレコードを 登 録 人 材 紹 介 マッチング 登 録 した 人 材 を 取 引 先 に 紹 介 します 関 連 するアクション: スキルシート の 出 力 紹 介 オブジェクトのステータス 更 新 案 件 クローズ 人 材 の 採 用 決 定 もしくは 紹 介 期 間 の 終 了 を 持 って 求 人 案 件 をクローズします 関 連 するアクション: 求 人 案 件 オブジェクトのステータス 更 新 上 記 のフロー 図 を Dashboard レイアウトで 画 面 化 し クリックすると 次 のアクションに 最 適 な 画 面 へ 遷 移 するリンクと 必 要 なレコードを 表 示 するリストを 実 装 します 1. ファイルメニューの [ 新 規 ] を 選 択 します 2. レイアウトマネージャから [Dashboard レイアウト] を 選 択 します 3. Visualforce ページ 名 に SVE_Manual と 入 力 します p. 53

58 SkyVisualEditor インプリメンテーションワークブック 4. [OK] をクリックします 5. Dashboard レイアウトのテンプレート選択画面が起動します こちらではフレキシブルパネルのレイア ウトを選択します デフォルトの 2 列のまま [OK] をクリックします Tips フレキシブルパネルは Dashboard レイアウトで複数のコンポーネントを複数列に配置するための下地に利用するコン ポーネントです 詳細はヘルプを参照してください 上記まで進めると フレキシブルパネルが 1 つ配置された状態でデザインキャンバスが開きます ここに パ ネルグリッドや画像データ データテーブルを使用してマニュアル画面をデザインしていきます まずは フレキシブルパネルの 1 列目にフローを画像で並べて手順をカスタムリンクと自由テキストで記載し ます 1. コンポーネントペインからパネルグリッドをフレキシブルパネルの１列目にドラッグ ドロップします 2. 行数を 5 列数を 2 に変更して [OK] をクリックします 3. コンポーネントペインから画像をパネルグリッドの 1 行 1 列目にドラッグ ドロップします 4. 静的リソースで step1_entrystaff を選択し [OK] をクリックします 5. [開く] をクリックします 6. 同様に パネルグリッドの 1 列目に残りの画像を配置します 2 行目 step2_entryhr 3 行目 step3_matching 4 行目 step4_candidate 5 行目 step5_close 7. コンポーネントペインからカスタムリンクをパネルグリッドの 2 列 1 行目にドラッグ ドロップします 8. コンポーネントプロパティの [値] を 電話 メール等で受け付けた人材を Salesforce に登録しま す に変更します 9. [遷移先設定] をクリックし Visualforce ページヘ を選択して確認ダイアログで [OK] をクリッ クします 10. プルダウンから SVE_StaffEdit を選択します 11. [完了] をクリックします 12. [別ウインドウで開く] を ON にします 13. 同様に 2 行 2 列目にもカスタムリンクを配置します [値] は 取引先から受領した求人案件情 報 を Salesforce に 登 録 し ま す と し [ 遷 移 先 設 定 ] の Visualforce ペ ー ジ 名 は SVE_HREdit としてください 14. コンポーネントペインから自由テキストを 3 行 2 列目にドラッグ ドロップします p. 54

59 15. 自 由 テキストの 値 を 求 人 案 件 にマッチする 人 材 を 検 索 し マッチング 登 録 します に 修 正 しま す 16. 同 様 に パネルグリッドの 2 列 目 に 残 りの 自 由 テキストを 配 置 します 4 行 目 : マッチング 登 録 した 人 材 を 取 引 先 に 紹 介 します 5 行 目 : 人 材 の 採 用 決 定 もしくは 紹 介 期 間 の 終 了 を 持 って 求 人 案 件 をクローズします 17. バネルグリッド 全 体 を 選 択 し [ 線 種 ] を 無 し にします 18. 全 てのセルを 選 択 し [ 線 種 ] を 無 し にします 19. 行 の 高 さと 幅 を 調 整 します 次 に フレキシブルパネルの 2 列 目 にデータテーブルを 並 べます 1. フレキシブルパネルの 2 列 目 ににページブロックを 配 置 し タイトルを 受 付 中 求 人 案 件 一 覧 に 変 更 します 2. [ 表 示 モード] を maindetail に [ボタン 表 示 領 域 ] を 非 表 示 にします 3. データテーブルをページブロック 内 に 配 置 します 4. オブジェクトで 求 人 案 件 を 選 択 し [OK] をクリックします 5. オブジェクトタブをクリックし 関 連 オブジェクトで 求 人 案 件 を 選 択 します 6. 求 人 番 号 取 引 先 案 件 名 をデータテーブルに 配 置 します 7. データテーブルの 絞 込 条 件 に 状 況 が 受 付 と 一 致 する 検 索 条 件 を 設 定 します 8. データテーブルの 求 人 番 号 表 示 項 目 をクリックし [ 下 線 ] と [リンクとして 表 示 ] [リンクを 別 ウ インドウで 開 く] を ON にします 9. 受 付 中 求 人 案 件 一 覧 の 下 にページブロックを 配 置 し タイトルを 紹 介 前 マッチング 一 覧 に 変 更 します 10. [ 表 示 モード] を maindetail に [ボタン 表 示 領 域 ] を 非 表 示 にします 11. データテーブルをページブロック 内 に 配 置 します 12. オブジェクトで 紹 介 を 選 択 し [OK] をクリックします 13. オブジェクトタブをクリックし 関 連 オブジェクトで 紹 介 を 選 択 します 14. 紹 介 番 号 求 人 案 件 人 材 をデータテーブルに 配 置 します 15. データテーブルの 絞 込 条 件 に 状 況 が 紹 介 前 と 一 致 する と 作 成 者 ID のユーザ ID が {UserId}と 一 致 する 検 索 条 件 を 設 定 します 16. データテーブルの 紹 介 番 号 表 示 項 目 をクリックし [ 下 線 ] と [リンクとして 表 示 ] [リンクを 別 ウ インドウで 開 く] を ON にします 17. 紹 介 前 マッチング 一 覧 の 下 にページブロックを 配 置 し タイトルを 未 完 了 求 人 案 件 一 覧 に 変 更 します 18. [ 表 示 モード] を maindetail に [ボタン 表 示 領 域 ] を 非 表 示 にします 19. データテーブルをページブロック 内 に 配 置 します p. 55

60 SkyVisualEditor インプリメンテーションワークブック 20. オブジェクトで 求人案件 を選択し [OK] をクリックします 21. オブジェクトタブをクリックし 関連オブジェクトで 求人案件 を選択します 22. 求人番号 案件名 状況をデータテーブルに配置します 23. データテーブルの絞込条件に 状況が成立と一致しない と 状況が不成立と一致しない 検索 条件を設定し 検索条件ロジックを 1 OR 2 に変更します 24. データテーブルの 求人番号 表示項目をクリックし [下線] と [リンクとして表示] [リンクを別ウ インドウで開く] を ON にします 最後にページタイトルを設定し デプロイして完成させましょう 1. ページプロパティの [ページタイトル] に マニュアル と入力します 2. デプロイします 図 21 完成イメージ マニュアル画面 p. 56

61 SkyVisualEditor インプリメンテーションワークブック 10. デプロイ後に行う Salesforce の設定 所要時間 分 SkyVisualEditor で画面を作成したら 実際にユーザが利用しやすいように呼び出し設定を行います 呼び出す方法は 3 つあります URL を直接指定する カスタムリンク等から呼び出す ボタン リンクを上書きする Visualforce タブを作成する 今回は ボタン リンクと Visualforce タブから作成した画面を呼び出す方法での設定を行います ボタン リンクの上書き SVE_HREdit SVE_HRView SVE_StaffEdit SVE_StaffView Visualforce タブの作成 SVE_CandidateSearch SVE_Manual Tips SkyVisualEditor 画面上の保存ボタン押下後 レコードの新規作成 編集時 及び削除ボタン押下後 レコー ドの削除時 の遷移先画面を個別指定したい場合は ページプロパティの 画面遷移先設定 で実装が可能です 画面呼び出し設定 ボタン リンクの上書き まず 求人案件レコードのボタン リンクをクリックした際に SVE_HREdit, SVE_HRView を開く設定 を行います 1. Salesforce の設定画面を開きます 2. [クイック検索] に オブジェクト と入力します 3. ビルド > 作成 の オブジェクト をクリックします 4. 求人案件 をクリックします 5. ボタン リンク 及びアクション をクリックします 6. 参照 の編集リンクをクリックします 7. [上書き手段] で Visualforce ページをチェックし SVE_HRView を選択します 8. [保存] をクリックします 9. 同様に 新規 と 編集 を SVE_HREdit で上書きします p. 57

62 これで 求 人 案 件 の 画 面 呼 び 出 し 設 定 は 完 了 です 同 じ 手 順 で 人 材 の 画 面 呼 び 出 し 設 定 を 行 いましょ う 1. Salesforce の 設 定 画 面 を 開 きます 2. [クイック 検 索 ] に オブジェクト と 入 力 します 3. ビルド > 作 成 の オブジェクト をクリックします 4. 人 材 をクリックします 5. ボタン リンク 及 びアクション をクリックします 6. 参 照 の 編 集 リンクをクリックします 7. [ 上 書 き 手 段 ] で Visualforce ページをチェックし SVE_StaffView を 選 択 します 8. [ 保 存 ] をクリックします 9. 同 様 に 新 規 と 編 集 を SVE_StaffEdit で 上 書 きします 画 面 呼 び 出 し 設 定 (Visualforce タブ) 検 索 画 面 やマニュアル 画 面 はレコードを 特 定 せずに 開 く 画 面 のため Visualforce タブから 呼 び 出 す 方 法 が 最 適 です SVE_CandidateSearch, SVE_Manual を Visualforce タブに 設 定 しましょう 1. Salesforce の 設 定 画 面 を 開 きます 2. [クイック 検 索 ] に タブ と 入 力 します 3. ビルド > 作 成 の タブ をクリックします 4. Visualforce タブの [ 新 規 ] をクリックします 5. Visualforce ページで SVE_CandidateSearch を 選 択 します 6. タブの 表 示 ラベルに 紹 介 検 索 と 入 力 します 7. タブ 名 に SVE_CandidateSearch と 入 力 します 8. タブスタイルで 望 遠 鏡 を 選 択 します 9. [ 次 へ] をクリックします 10. プロファイルの 設 定 は 変 更 せず [ 次 へ] をクリックします 11. [SVEWB] 人 材 紹 介 アプリケーションにタブを 含 めるチェックを 入 れ [ 保 存 ] をクリックします これで 紹 介 検 索 というタブから SVE_CandidateSearch を 呼 び 出 す 設 定 が 完 了 しました 早 速 タブをクリックして 動 作 検 証 してみましょう p. 58

63 画 面 の 呼 び 出 しは 無 事 成 功 しましたが 選 択 されているタブがクリックしたタブと 異 なることが 確 認 できます これは 検 索 画 面 の 主 オブジェクトが 紹 介 であるために 紹 介 オブジェクトのカスタムオブジェクトタブが 選 択 されてしまうという 挙 動 です 紹 介 検 索 タブが 選 択 されるようにするためには SkyVisualEditor 側 で 特 別 な 設 定 が 必 要 です Visualforce タブを 作 成 した 後 SkyVisualEditor の 画 面 に Visualforce タブの API 参 照 名 (タブ 名 + tab)を 設 定 します 1. SVE_CandidateSearch を 開 きます 2. ページプロパティの [タブスタイル] に SVE_CandidateSearch tab と 入 力 します 3. デプロイします 紹 介 検 索 タブをクリックして 動 作 を 確 認 してください Visualforce ページ Apex クラスへのアクセス 有 効 化 SkyVisualEditor の 画 面 を 構 成 する Visualforce ページと Apex クラスは プロファイルにてアクセスが 有 効 化 されていないと 利 用 することができません Studio で Salesforce に 接 続 し 画 面 をデプロイした ユーザが 所 属 するプロファイルには 自 動 でアクセスが 有 効 化 されますが それ 以 外 のプロファイルには 手 動 で 設 定 する 必 要 があります 実 際 のプロジェクトでは SkyVisualEditor の 画 面 にアクセスするユーザが 属 するプロファイル 全 てに 設 定 を 行 って 下 さい 設 定 方 法 はヘルプを 参 照 してください p. 59

64 11. より 便 利 に 利 用 いただくために 所 要 時 間 : 20~25 分 SkyVisualEditor には 前 章 までで 学 習 した 機 能 の 他 にもより 便 利 に 利 用 するための 機 能 があります こ の 章 では ルックアップ 時 に 任 意 の 項 目 値 を 取 得 する 機 能 と 3 つのテンプレート AppComponent につ いて 紹 介 します さらに インストールしてすぐに 利 用 できる SkyVisualEditor 標 準 AppComponent の 利 用 方 法 を 学 びます ルックアップ 時 に 任 意 の 項 目 値 を 取 得 する 機 能 (ルックアップ 設 定 ) ルックアップ 設 定 を 行 うと ルックアップ 実 行 時 ( をクリックして 親 レコードを 選 択 した 時 )に 親 レコード から Name 項 目 以 外 の 項 目 値 を 取 得 できる 機 能 です 例 えば 求 人 案 件 の 編 集 画 面 で 取 引 先 をルッ クアップした 際 に 取 引 先 名 以 外 に 取 引 先 業 種 項 目 の 値 を 求 人 案 件 にコピーするといった 利 用 方 法 が 出 来 ます その 場 合 求 人 案 件 にも 業 種 項 目 を 予 め 用 意 しておく 必 要 があります ルックアップ 設 定 の 詳 細 はヘルプを 参 照 してください ウィザード 画 面 テンプレート ウィザード 画 面 テンプレートは A ページ B ページ C ページ...と 複 数 ページに 入 力 項 目 を 分 けて 画 面 を 表 示 し 最 後 に 確 認 画 面 にて 入 力 値 を 確 認 した 後 にデータを 保 存 するようなウィザード 形 式 の 画 面 を 作 成 することができるテンプレートです 資 料 請 求 フォームやアンケートサイトなどに 適 しています TS スタッフィ ング 株 式 会 社 の 人 材 紹 介 業 務 では 求 職 者 がセルフ 登 録 するサイトの 画 面 への 適 用 が 提 案 できます ウィザード 画 面 テンプレートの 詳 細 はヘルプを 参 照 してください ページ 割 り 当 てテンプレート ページ 割 り 当 てテンプレートは プロファイル レコードタイプごとに 表 示 するページを 割 り 当 てるための 画 面 を 作 成 することができるテンプレートです 例 えば プロファイル A に 属 するユーザは SkyVisualEditor 画 面 を 利 用 し プロファイル B に 属 するユーザは 標 準 レイアウトを 利 用 するといった 割 り 当 てが 可 能 です ページ 割 り 当 てテンプレートの 詳 細 はヘルプを 参 照 してください p. 60

65 親 子 登 録 テンプレート 親 子 登 録 テンプレートは 親 子 オブジェクトのレコードを 同 時 登 録 編 集 可 能 な 画 面 をウィザード 形 式 で 作 成 できるテンプレートです Salesforce レイアウトや 自 由 レイアウトで 作 成 するよりもスピーディに 画 面 作 成 が 可 能 です ただし 親 子 登 録 テンプレートには 次 項 で 説 明 する AppComponent の 配 置 ができない ので AppComponent の 要 件 が 発 生 した 場 合 は Salesforce レイアウトや 自 由 レイアウトへの 切 り 替 えが 必 要 です 親 子 登 録 テンプレートの 詳 細 はヘルプを 参 照 してください AppComponent AppComponent とは SkyVisualEditor の 画 面 上 に 組 み 込 み 可 能 なアプリケーションです AppComponent の 利 用 可 能 パターンを 以 下 に 示 します Salesforce 内 のデータや 機 能 の 利 用 SOQL や SOSL を 使 用 して 画 面 表 示 している 主 オ ブジェクトに 関 係 のない 情 報 を 取 得 する 作 成 したレポート ダッシュボードを 画 面 に 表 示 する 外 部 との 連 携 API が 公 開 されている 外 部 サービス(GoogleMap や Twitter など)を 画 面 に 表 示 する 自 社 サービスなど 外 部 サーバと 連 携 する 既 存 の 部 品 との 連 携 SkyVisualEditor の 既 存 コンポーネントであるテー ブル 内 のデータを 一 括 変 換 するボタンを 作 成 する 独 自 の JavaScript によるバリデーション 処 理 を 実 施 する 郵 便 番 号 からの 住 所 検 索 機 能 ( 郵 便 番 号 項 目 入 力 時 に 住 所 項 目 に 自 動 設 定 )を 実 装 する 利 用 方 法 は 以 下 の 3 つがあります 独 自 の AppComponent を 開 発 し 画 面 に 組 み 込 んで 利 用 する テラスカイの 提 供 する SkyVisualEditor 標 準 AppComponent を 画 面 に 組 み 込 んで 利 用 する パートナーの 提 供 する AppComponent を 画 面 に 組 み 込 んで 利 用 する 作 成 した SVE_StaffEdit には 住 所 を 入 力 する 項 目 があります この 画 面 に 郵 便 番 号 から 住 所 を 検 索 して 補 完 する SkyVisualEditor 標 準 AppComponent 住 所 補 完 を 適 用 してみましょう はじめに DE 組 織 に SkyVisualEditor 標 準 AppComponent をインストールします p. 61

66 1. SkyVisualEditor 標 準 AppComponent インストールサイトにアクセスします 2. SkyVisualEditor 標 準 AppComponent の [ 詳 細 ] をクリックします 3. [パッケージインストール] をクリックします 4. [すべてのユーザのインストール] を 選 択 し [インストール] ボタンをクリックします Salesforce の 重 要 な 更 新 Visualforce ドメインから 静 的 リソースを 提 供 が 有 効 化 されている 組 織 に おいては 郵 便 番 号 データファイルを 静 的 リソースに 格 納 しておく 必 要 があります ( 重 要 な 更 新 に Visualforce ドメインから 静 的 リソースを 提 供 が 表 示 されていない 組 織 では 既 に 機 能 が 有 効 化 されて います ) 1. 郵 便 番 号 データファイルを 以 下 URL から 取 得 します ualeditor/zipcode/zipcode.zip 2. 取 得 した ZIP ファイルを 静 的 リソースに 名 前 zipcode で 格 納 します 次 に SVE_StaffEdit に AppComponent を 組 み 込 みます 1. SVE_StaffEdit を 開 きます 2. コンポーネントペインの AppComponent セクションに 表 示 された [SkyVisualEditor] の 三 角 マ ークをクリックして 展 開 します ( 表 示 されていない 場 合 はツールメニューの [オブジェクト 再 取 得 ] を 実 行 してください ) 3. [ 住 所 補 完 ( 日 本 )] をキャンバスペインにドラッグ&ドロップします 配 置 場 所 は 問 いません 4. 配 置 したコンポーネントをクリックし コンポーネントプロパティの [ 郵 便 番 号 リソース 名 ] に zipcode と 入 力 します 5. [ 郵 便 番 号 項 目 ID] のボタンをクリックすると 画 面 がブルーになります この 状 態 で 画 面 上 の 郵 便 番 号 入 力 項 目 をクリックします 6. [ 都 道 府 県 項 目 ID] のボタンをクリックし 都 道 府 県 入 力 項 目 をクリックします 7. [ 市 区 町 村 項 目 ID] のボタンをクリックし 市 区 郡 入 力 項 目 をクリックします 8. [ 町 域 項 目 ID] のボタンをクリックし 町 名 番 地 入 力 項 目 をクリックします 以 上 で 住 所 補 完 AppComponent の 組 み 込 みは 完 了 です デプロイして 動 作 確 認 してみてください p. 62

67 SkyVisualEditor インプリメンテーションワークブック 図 22 完成イメージ 住所補完 AppComponent を適用した画面 p. 63

68 12. 高 度 なカスタマイズ SkyVisualEditor の 標 準 機 能 では 実 現 できないような 処 理 や 既 存 のプログラムを 画 面 に 組 み 込 みたい 場 合 JavaScript 機 能 と Apex クラス 拡 張 機 能 を 利 用 し 標 準 機 能 + コーディングで 開 発 を 行 うこと ができます 個 別 要 件 が 発 生 したからといってすべてをコーディング 開 発 に 切 り 替 えるより 効 率 的 かつメンテ ナンス 性 高 く 開 発 を 行 うことが 可 能 です JavaScript 機 能 標 準 機 能 で 実 現 できない 要 件 が 発 生 した 際 クライアントサイドの 処 理 を 行 いたい 場 合 に JavaScript 機 能 の 利 用 を 検 討 します 項 目 をクリックしたり 値 を 変 更 したりした 時 に 画 面 を 再 読 み 込 みすることなく 実 行 する 処 理 を 組 み 込 みたい 場 合 に JavaScript 機 能 を 利 用 します JavaScript の 組 み 込 みは ページプロパティの ページスクリプト に 記 載 する 方 法 と 外 部 JavaScript をインクルードする 方 法 があります サンプルスクリプトはスクリプトエディタ 内 で 確 認 できます 使 用 例 : Visualforce ページ A にオブジェクト B をデータテーブルで 配 置 して データテーブルのカスタムボタンクリッ ク 時 にオブジェクト B を 主 オブジェクトにした Visualforce ページ B に 遷 移 する function openwinsample(){ window.open('/apex/visualforcepagea?id={!component20_item.rec ord.id}'); } Italic 部 分 は 利 用 するデザインデータに 合 わせます Component20 部 分 はデータテーブルの ID を 記 載 します p. 64

69 JavaScript 機 能 を 利 用 する 際 にはいくつかの 注 意 点 があります カスタムボタンやカスタムリンク 入 力 項 目 から 処 理 を 呼 び 出 す 場 合 には 必 ず function から 始 まる 関 数 である 必 要 があります function で 開 始 しない 処 理 は onload で 呼 び 出 されます 画 面 表 示 時 に 処 理 を 呼 び 出 したい 場 合 は function を 使 用 せずに 記 述 してください SkyVisualEditor では jquery を 標 準 機 能 で 利 用 しており 他 のプラグインとの 競 合 を 防 ぐための noconflict メソッドを 使 用 しています 従 って jquery を 利 用 するスクリプトを 記 述 する 際 に jquery ライブラリの 読 み 込 みを 行 う 必 要 はありませんが 書 き 出 しは $ ではなく jquery と してください JavaScript による 機 能 拡 張 は 標 準 サポートの 対 象 外 です Apex クラス 拡 張 機 能 標 準 機 能 で 実 現 できない 要 件 が 発 生 した 際 サーバーサイドの 処 理 を 行 いたい 場 合 に Apex クラス 拡 張 機 能 の 利 用 を 検 討 します 作 成 した 拡 張 Apex クラスは Extender と 呼 ばれます Extender は Studio で 直 接 記 載 する 方 法 と Salesforce にデプロイ 済 みの Apex クラスを 指 定 する 方 法 があります 適 用 範 囲 設 定 手 順 実 装 定 義 及 びサンプルコードをヘルプサイトに 詳 しく 記 載 していますので 実 際 に Apex クラス 拡 張 機 能 を 利 用 する 場 合 はヘルプを 参 照 してください また Extender による 機 能 拡 張 は 標 準 サポートの 対 象 外 ですのでご 注 意 ください ユースケース 標 準 機 能 JavaScript 機 能 Apex クラス 拡 張 機 能 の 使 い 分 けについては 以 下 のユースケースを 参 考 にしてください また 複 数 画 面 で 同 じ 処 理 を 行 う 場 合 は AppComponent の 開 発 も 検 討 してください 凡 例 : = 実 装 可 能 ( 最 適 ) = 実 装 可 能 = 実 装 不 可 要 件 標 準 機 能 JavaScript 機 能 Apex クラス 拡 張 機 能 画 面 表 示 時 にデータテーブルへ 新 規 行 追 加 したい データテーブルの [ 初 期 追 加 行 数 ] を 指 定 p. 65

70 凡 例 : = 実 装 可 能 ( 最 適 ) = 実 装 可 能 = 実 装 不 可 要 件 標 準 機 能 JavaScript 機 能 Apex クラス 拡 張 機 能 遷 移 元 画 面 からの URL パラメータを 設 定 して 初 期 値 を 渡 したい データテーブルの 表 示 データに 条 件 を 付 けたい カスタムボタン/カスタムリンク 押 下 時 にマスク 設 定 し たい (ページスクリプ トエディタのサンプ ルコード 参 照 ) 計 算 結 果 の 表 示 に 使 用 している 入 力 項 目 を 読 み 取 り 専 用 にしたい 入 力 項 目 に 色 を 付 けたい データテーブルのソートキーとして 選 択 されている 列 の ヘッダー 背 景 色 を 変 更 したい 検 索 条 件 に 初 期 値 を 設 定 したい データテーブルの 行 追 加 時 にデフォルト 値 を 設 定 した い データテーブルの 行 コピー 時 にデフォルト 値 を 設 定 した い データ 更 新 時 に 排 他 制 御 したい 複 数 の 項 目 で 入 力 規 則 エラーが 発 生 した 際 に 独 自 のエラーメッセージを 表 示 したい Salesforce コンソールインテグレーションツールキットの 利 用 Salesforce のコンソール 内 で SkyVisualEditor 画 面 を 開 くとタブに 外 部 ページ と 表 記 される 事 象 が 発 生 します この 事 象 は Salesforce コンソールインテグレーションツールキットを 利 用 することで 解 消 され ます 実 際 の 設 定 方 法 はナレッジを 参 照 してください p. 66

71 13. SkyVisualEditor のバージョンアップの 仕 組 み SkyVisualEditor は 年 数 回 のバージョンアップを 行 っています 最 新 バージョンを 利 用 する 場 合 は AppExchange パッケージを 更 新 します バージョンアップの 必 要 性 有 無 の 判 断 方 法 やバージョンアップ 手 順 は SkyVisualEditor バージョンアップ 手 順 を 参 照 してください manual.pdf#zoom= 大 規 模 開 発 向 け 機 能 大 規 模 なアプリケーションを 開 発 する 場 合 複 数 の 開 発 者 が 複 数 の Salesforce 組 織 を 取 り 扱 う 可 能 性 があります SkyVisualEditor ではこのような 開 発 環 境 下 で 活 用 できる 機 能 を 備 えています 複 数 組 織 への 接 続 Studio ログインユーザは 接 続 する Salesforce 組 織 を 限 定 しません Studio にログインし Salesforce 組 織 に 接 続 する 際 に 任 意 のユーザアカウントを 使 用 するだけで SkyVisualEditor がインストールされた 組 織 に 接 続 が 可 能 です また 接 続 後 もツールメニューの [ 接 続 先 変 更 ] から 異 なる 組 織 へ 変 更 するこ とができます このことは Studio に 保 存 されたデザインデータを 複 数 の 組 織 で 利 用 可 能 であることを 表 し ています 例 えば モックアップ 用 Developer Edition 組 織 が 1 つ Sandbox が 2 つの 計 3 組 織 で 開 発 を 行 っている 場 合 それぞれに 対 して 同 じ Studio から 画 面 をデプロイすることが 出 来 ます 異 なる 組 織 ごとに Studio ユーザアカウントを 取 得 する 必 要 はありません デザインデータのバックアップ Studio では 2 つの 方 法 でデザインデータのバックアップを 取 得 することができます 利 用 方 法 はヘルプを 参 照 してください ローカル 保 存 バージョン 保 存 デザインデータ(SVE ファイル)をローカル 環 境 に 保 存 する 機 能 です 別 の Studio でデザインデータを 再 利 用 する 場 合 はこの 機 能 を 使 用 します デザインデータ 内 に 複 数 のバージョンを 保 存 する 機 能 です 最 大 50 件 のバージョ ン 保 存 と 過 去 バージョンの 読 み 込 みが Studio 内 で 実 行 できます p. 67

72 SkyVisualEditor インプリメンテーションワークブック グループユーザー グループユーザーは Studio 内で複数ユーザがデザインデータを共有し編集 デプロイできる機能です 1 つの Studio に対し 最大 10 名のグループユーザーの登録が可能です グループユーザーの登録や削除 等の管理機能は通常のユーザー登録を行った管理ユーザーのみ行うことができます なお 本機能はグループユーザー間における複数バージョン管理を行うものではありません 前項で説明し た バージョン保存 機能と組み合わせて管理してください ヘルプ グループユーザー&高度な管理機能 旧環境 前バージョン の利用 Studio 本番環境 最新バージョン はバージョンアップの期日を迎えると自動でバージョンアップします そのため バージョンアップ後にデザインデータの作成や編集を行う場合はパッケージも最新バージョンを利 用する必要がありますが 旧環境を利用すれば引き続き前バージョンで作成や編集を行うことができます 図 23 本番環境と旧環境の仕組み 旧環境を利用する運用例として SkyVisualEditor のバージョンアップのタイミングを Salesforce バージ ョンアップのタイミングと合わせ SkyVisualEditor と Salesforce の新バージョンテストを同時期に行うと いったことが挙げられます p. 68

73 SkyVisualEditor インプリメンテーションワークブック 図 24 旧環境の運用例 なお 本番環境と旧環境は同じデータベースを参照し 同一ファイルを扱う仕様となっているため 利用に あたっては注意事項があります 本番環境で作成 編集したページは旧環境で表示することはできません 最新バージョンと前バージョンのページを一緒に利用することはできません 旧環境の利用は専用の URL からログインして利用してください ヘルプ 旧環境へのログイン p. 69

74 15. Force.com プラットフォームの 理 解 SkyVisualEditor で 開 発 するにあたり Force.com プラットフォームの 制 限 事 項 について 特 に 意 識 する ことなく 画 面 を 開 発 することができますが 特 定 の 条 件 下 においてはエラーの 発 生 を 招 く 可 能 性 があります 本 章 ではエラーを 回 避 するために 理 解 しておくべき 事 項 を 説 明 します Apex コードカバー 率 Salesforce の 本 番 環 境 に Apex をデプロイするためには 組 織 全 体 のコードカバー 率 が 75% 以 上 を 達 成 することが 求 められます SkyVisualEditor で 自 動 生 成 する Apex クラスは 100%のカバー 率 を 担 保 していますが デプロイエラーになった 場 合 は 他 にカバー 率 の 低 い Apex(トリガを 含 む 個 別 開 発 )や 拡 張 Apex クラス(Extender)が 組 織 内 に 存 在 しないか 確 認 してください ガバナ 制 限 Apex はマルチテナント 環 境 である Force.com プラットフォーム 上 で 実 行 されるため 共 有 リソースを 独 占 させないための 制 限 が 設 けられています この 制 限 に 抵 触 するとエラーが 発 生 するため 大 量 データを 取 り 扱 う 場 合 や 拡 張 Apex クラス(Extender)を 開 発 する 際 にはガバナ 制 限 を 考 慮 に 入 れて 開 発 する 必 要 があります エラー 発 生 の 例 : カスタムルックアップ 画 面 にて [Too many query rows: 50001]が 発 生 ガバナ 制 限 の 詳 細 は Salesforce のドキュメントを 参 照 してください force_app_limits_platform_apexgov.htm p. 70