スライド 1

Size: px

Start display at page:

Download "スライド 1"

ひでかうとだ
5 years ago
Views:

1 SkyVisualEditor オンラインセミナー ~ 第 4 回活用編 ~ いますぐ使える SkyVisualEditor の便利な機能のご紹介 2014 年 8 月 21 日 ( 木 )

3 本日のアジェンダ 1. PDF 画面を作成しよう 2. 遷移元の値を遷移先の画面へ反映しよう 3. その他の便利な機能のご紹介 SkyVisualEditor の製品概要については以下をご覧ください ( 本セミナーの詳細な内容は以下操作マニュアルをご覧ください ( 当資料のロゴや設定画面は Salesforce のバージョンアップによって変更する可能性がございます Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 3

5 SkyVisualEditor で作成する画面構成 SkyVisualEditor はデータを入力 / 編集するための入力画面データを参照するための参照画面そして PDF 用の PDF 画面とそれぞれの用途に合わせて画面を作成する必要があります今回はこのうち PDF 画面の作成方法をご紹介します入力画面参照画面 PDF 画面 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 5

6 PDF 画面の作成の流れ以下は SkyVisualEditor で PDF 画面を作成する際の流れです本日は以下手順にそって PDF 画面の作成方法をご紹介いたします 1. レイアウトの選択 4. 作成した画面のデプロイ 2. プロパティ設定 5. デプロイ後の Salesforce の設定 3. 画面の作成 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 6

7 1. レイアウトの選択 PDF 画面は Salesforce レイアウトもしくは自由レイアウトより作成できます各レイアウトの特徴は以下の通りですご利用シーンやご要件に合わせて使い分けください Salesforce レイアウト自由レイアウト特徴簡易な帳票レイアウトに最適表形式のレイアウトに有効自由レイアウトよりも作成時は時間が必要だが修正は容易文字数に合わせて罫線の高さを動的に伸ばすことが可能既存帳票を利用したいときに最適既存のレイアウトを利用できるため短納期での開発が可能文字が多い場合枠線をはみ出すため文字数などの制御が必要 SkyVisualEditor は PDF を生成する専用サービスではないためレイアウトによっては実現が難しいものもございます画面イメージをいただければ実現可否や実現方法をご案内させていただきますご遠慮なくお問合せください Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 7

2. プロパティ設定 ( ページ名の設定 ) PDF 画面の作成は既存の参照画面を利用する方法と初めからレイアウトしていく方法がございます今回は前回のオンラインセミナーで作成した参照画面を利用し PDF 画面を作成しますまず右の [ ページプロパティ ] 内の [Visualforce ページ名 ] を PDF 画面用の名前に変更します参照画面から作成する場合

8 2. プロパティ設定 ( ページ名の設定 ) PDF 画面の作成は既存の参照画面を利用する方法と初めからレイアウトしていく方法がございます今回は前回のオンラインセミナーで作成した参照画面を利用し PDF 画面を作成しますまず右の [ ページプロパティ ] 内の [Visualforce ページ名 ] を PDF 画面用の名前に変更します参照画面から作成する場合ページ名を変更しないと上書きされるためご注意ください例えば workflow_pdf とページの名前を指定前回のオンラインセミナーの内容は以下をご覧ください ( Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 8

2. プロパティ設定 ( ページサイズの設定 ) 現在表示している画面を PDF に設定します設定手順は以下のとおりです 1. 右側の [ ページ ] タブ内の [PDF より [PDF 化 ] のチェックボックスを ON 2. [ ページサイズ ] を A4 B4 A3 レターリーガルより選択 3. [ 用紙の向き ] を縦横より選択 4. [ 余白設定 ] を設定なし 0.

9 2. プロパティ設定 ( ページサイズの設定 ) 現在表示している画面を PDF に設定します設定手順は以下のとおりです 1. 右側の [ ページ ] タブ内の [PDF より [PDF 化 ] のチェックボックスを ON 2. [ ページサイズ ] を A4 B4 A3 レターリーガルより選択 3. [ 用紙の向き ] を縦横より選択 4. [ 余白設定 ] を設定なし 0.0cm 0.5cm 1.0cm より選択 5. [ ページサイズを目安のサイズに合わせる ] ボタンをクリック 6. 自由レイアウトの場合 [ 背景画像 ] 内の [ 画像をページサイズに合わせる ] ボタンをクリック 7. [ 背景画像 ] 内の [ 縦横比を維持する ] のチェックボックスを ON 以上でページサイズの設定は完了です Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 9

レイアウトの場合は指定したページサイズが赤色の枠線で囲われますのでその中に納まるようにレイアウトを修正いただくことで画面の作成は完了ですレイアウトを修正する際に

10 3. 画面の作成既存の参照画面より PDF 画面を作成する場合は参照画面と PDF 用の画面のサイズが異なるとき配置している項目がずれるため再度ドラッグ & ドロップによりデザインする必要があります自由レイアウトの場合は下記のとおりずれてしまった項目を再度配置し直すことで画面の作成は完了です Salesforce レイアウトの場合は指定したページサイズが赤色の枠線で囲われますのでその中に納まるようにレイアウトを修正いただくことで画面の作成は完了ですレイアウトを修正する際にボタンなどの不要なコンポーネントは削除します赤い枠線 Salesforce レイアウト自由レイアウト Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 10

11 4. 作成した画面のデプロイメニューエリアの [ ファイルより [ デプロイ ] をクリックします Sandbox 環境や Developer Edition に画面を生成する場合は [ テスト環境 ] を本番環境へ直接デプロイする場合は [ 本番環境 ] を選択し [ デプロイ ] をクリックします Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 11

12 5. デプロイ後の Salesforce の設定 (Salesforce 標準ページレイアウトから PDF 表示 ) Salesforce の標準ページより作成した PDF 画面を表示するには PDF 画面を開くカスタムボタンを配置いただくことで設定できます 1. Salesforce の設定画面より画面を作成しているオブジェクトの [ ボタンリンクおよびアクション ] より [ 新規ボタンまたはリンク ] を選択 2. 以下の画面が表示されるので必須事項を記入のうえ [ 内容のソース ] を Visualforce ページとし作成した PDF 画面を選択 3. カスタムボタンを Salesforce の標準ページレイアウトに配置以上で設定は完了です Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 12

5. デプロイ後の Salesforce の設定 (SkyVisualEditor で作成した参照画面から PDF 表示 ) SkyVisualEditor で作成した参照画面より作成した PDF 画面を表示する際は SkyVisualEditor のカスタムボタンを配置いただくことで設定できます手順は以下の通りです 1.

13 5. デプロイ後の Salesforce の設定 (SkyVisualEditor で作成した参照画面から PDF 表示 ) SkyVisualEditor で作成した参照画面より作成した PDF 画面を表示する際は SkyVisualEditor のカスタムボタンを配置いただくことで設定できます手順は以下の通りです 1. 画面左側の [ コンポーネントタブ ] 内の [ ボタン ] より [ カスタム ] ボタンを画面に配置 2. 画面右側の [ コンポーネントタブ ] 内の [ 動作選択 ] が [ 画面遷移 ] が選択されていることを確認 3. [ 遷移先設定 ] を選択 4. 以下の画面が表示されるので [Visualforce ページ ] を選択の上作成した PDF 画面を選択 5. 最後に [?id={id}] ボタンをクリックし [ 完了 ] ボタンをクリック最後に画面をデプロイし設定は完了です Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 13

14 [ 参考 ] 改行文字数の指定文字数が多くなる項目に対して改行を指定することができます改行は文字数で指定できます設定方法は改行を指定したい項目を選択し右側のコンポーネントタブ内の [ レイアウト ]- [ 改行文字数 ] より文字数を指定しデプロイすれば完了です 5 文字で指定 5 文字で改行される Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 14

15 [ 参考 ] PDF 画面を作成する際の注意事項項目フォントページサイズ改ページ処理について使用できないパーツその他内容 SkyVisualEditor は Visualforce が用意する PDF の機能を使用して PDF 画面を生成しています Visualforce の日本語フォントは現状 [Arial Unicode MS] のみです SkyVisualEditor で設定できるページサイズは現状 A4 B4 A3 レターリーガルのサイズのみですその他のサイズが必要な場合はお問合せくださいスタイルクラスを記述いただくことでサイズを個別に指定いただけます SkyVisualEditor は標準機能では Salesforce レイアウトは改ページはされますが改ページ位置を指定することはできません自由レイアウトは改ページができませんこれらは個別に AppComponent などで機能拡張することで対応可能です ( 選択リストのラジオボタン表示複数選択リストのチェックボックス表示関連リストボタンタブ Chatter コンポーネント詳細は操作マニュアルをご覧ください SkyVisualEditor で作成したページはレイアウトの厳密性を保証していません Salesforce のバージョンアップによる仕様変更などによりレイアウトが崩れることがありますが SkyVisualEditor としては最大限の対応をいたします Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 15

17 遷移元の値を遷移先の画面へ反映 Salesforce は URL の形式が決まっており画面を遷移する際にパラメータ ( 変数 ) を渡すことで遷移元の値を遷移先の画面の初期値としてセットできますこれにより二重入力を防ぐことができ入力効率を向上できます SkyVisualEditor ではパラメータを URL 形式で渡す機能を URL パラメータ機能として提供しておりますイメージ値の反映画面遷移 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 17

18 URL パラメータとは URL パラメータとはクエリ文字列などとも言われさまざまな情報を Web サーバに伝えるために URL の末尾に特定の形式で付け加えた情報です具体的には URL の末尾に? マークをつけ続けて名前 = 値の形式で記述します設定したいパラメータが複数あるときは & で区切ることで設定できます URL パラメータの基本構造?[ パラメータキー ]=[ パラメータの値 ]& 初期値をセットしたい項目初期値として設定したい値例えば取引先画面から Salesforce 標準の商談画面を開く際に商談画面内の商談名の項目に取引先名を初期値として設定する際は以下のように記述しますパラメーターキーパラメーターの値 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 18

19 Salesforce のパラメーターキー Salesforce には標準の [ 商談 ] オブジェクトの商談名は opp3 フェーズは opp11 などあらかじめ決められた値があります項目の値を調べる際には Chrome などで Salesforce 標準レイアウトに表示されている項目を右クリックし要素の検証よりを Id を取得することができます取引先オブジェクトの [ 取引先名 ] の場合カスタムオブジェクトのあるカスタム項目の場合初期値を設定したい項目が参照項目 ( 虫眼鏡の項目 ) か否かによりパラメーターキーは異なります項目種別パラメーターキー例標準項目あらかじめ決められた値 acc2, opp3, evt5 カスタム項目 15 桁 /18 桁のId 値 00N DMtL 標準の参照項目標準項目 +_lkid acc2_lkid, opp3_lkid カスタムの参照項目 CF +カスタム項目 + _lkid CF00N DMtL_lkid Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 19

20 URL パラメータの設定パターンそれではいよいよ SkyVisualEditor で遷移元の画面の値を遷移先の項目へ反映させる方法をご紹介します当資料では以下 3 つのパターンに関する設定方法をご紹介します 1. 関連リスト内の標準の [ 新規 ] ボタンからの遷移 2. Salesforce 標準画面のカスタムボタンからの遷移 3. SkyVisualEditor 画面のカスタムボタンからの遷移 Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 20

1. 関連リスト内の標準の [ 新規 ] ボタンからの遷移 ( 設定方法 ) Salesforce の関連リスト内の標準ボタン [ 新規 ] をクリックした場合 Salesforce 標準では遷移元のレコードの Id 値が遷移先の画面に反映されます ( 例 )[ 取引先 ] に紐づく [ カスタムオブジェクト ] を [ 新規 ] で作成した場合カスタムオブジェクトの画面には

22 1. 関連リスト内の標準の [ 新規 ] ボタンからの遷移 ( 設定方法 ) Salesforce の関連リスト内の標準ボタン [ 新規 ] をクリックした場合 Salesforce 標準では遷移元のレコードの Id 値が遷移先の画面に反映されます ( 例 )[ 取引先 ] に紐づく [ カスタムオブジェクト ] を [ 新規 ] で作成した場合カスタムオブジェクトの画面には取引先名の項目が初期値としてセットされます Salesforce の取引先レイアウトの関連リストより SkyVisualEditor で作成した画面へ遷移する際に取引先の項目を初期値としてセットする手順は以下の通りです 1. カスタムオブジェクトの [ 取引先名 ] のパラメーターキーを事前に取得しておく 2. SkyVisualEditor スタジオのメニューバーの [ 開く ] より作成した遷移先の画面を開く 3. スタジオ右側の [ ページ ] タブ内の [URL パラメータ設定 ] の [ 設定 ] ボタンを選択 4. [ 設定 ] ボタンをクリックすると右の画面キャプチャが表示されるので [ 追加 ] ボタンをクリックし [ 項目名 ] から取引先名を選択し 1 で取得したパラメーターキーを [ パラメーターキー ] に貼り付ける ( 次ページへ続く ) Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 22

23 1. 関連リスト内の標準の [ 新規 ] ボタンからの遷移 ( 設定方法 ) 5. Salesforce の設定画面で遷移先 ( 今回はカスタムオブジェックと ) の [ ボタンリンクおよびアクション ] より標準の [ 新規 ] ボタンの [ 編集 ] をクリック ( 左下の画面キャプチャ ) 6. [ 上書き手段 ] を Visualforce ページに選択し SkyVisualEditor で作成した入力画面を選択 7. [ 保存 ] ボタンをクリックし設定は完了です Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 23

2. Salesforce 標準画面のカスタムボタンからの遷移 ( イメージ ) Salesforce 標準レイアウト画面遷移値の反映

25 2. Salesforce 標準画面のカスタムボタンからの遷移 ( 設定方法 ) Salesforce の関連リスト内の標準の [ 新規 ] ボタンは遷移先の画面へ親オブジェクトの参照項目しか反映できませんカスタムボタンの場合親オブジェクトの参照項目以外の項目も遷移先の画面へ渡すことができます以下では Salesforce 標準の商談画面からカスタムボタンより SkyVisualEditor で作成した見積画面を開く際に [ 取引先 ] と [ 商談 ] の値を初期値としてセットする手順をご紹介します 1. SkyVisualEditor スタジオのメニューバーの [ 開く ] より作成した遷移先の画面を開く 2. スタジオ右側の [ ページ ] タブ内の [URL パラメータ設定 ] の [ 設定 ] ボタンを選択 3. [ 設定 ] ボタンをクリックすると右の画面キャプチャが表示されるので [ 追加 ] ボタンをクリックし [ 項目名 ] から取引先名商談を選択今回はパラメーターキーは任意の値で可 4. 画面下部の [ コピー ] ボタンをクリック ( 次ページへ続く ) Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 25

26 2. Salesforce 標準画面のカスタムボタンからの遷移 ( 設定方法 ) 5. Salesforce の設定画面で遷移元 ( 今回は商談 ) の [ ボタンリンクおよびアクション ] を選択 6. [ 内容のソース ] を URL とし構文エリアに p.25 の 4. でコピーした構文を貼り付け 7. パラメーターの値 ([ ] で囲まれた値 ) を選択し [ 項目の挿入 ] より取引先名のパラメーターキーに取引先 ID を商談名のパラメーターキーに商談 ID を挿入 8. その他のカスタムボタンのプロパティを設定し [ 保存 ] 作成したカスタムボタンを Salesforce 標準のレイアウトに配置以上で設定は完了です今回の場合構文は以下となります /apex/estimate?account c={!opportunity.accountid}&opportunity c={!opportunity.i d} Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 26

27 3. SkyVisualEditor 画面のカスタムボタンからの遷移 SkyVisualEditor で作成した画面に配置したカスタムボタンより遷移元の値を遷移先の画面へ初期値として反映できます方法は前半は p.25 で紹介した 1~4 の手順と同様です p.26 の手順 5 以降の設定が異なりますので以下にその設定を記述します 1. SkyVisualEditor スタジオのメニューバーの [ 開く ] より遷移元の SkyVisualEditor 画面を表示 2. スタジオ左側の [ コンポーネント ] タブの [ ボタン ] よりカスタムボタンを配置 3. カスタムボタンをクリックしスタジオ右側の [ 動作選択 ] を画面遷移とし [ 遷移先設定 ] を選択 4. 表示されるダイアログよりカスタム URL を選択し p.25 の 4. でコピーした構文を貼り付け 5. パラメーターの値 ([ ] で囲まれた値 ) を以下のルールで変更 - 値を渡したい項目が親レコードの参照項目の場合 {!record.id} - 値を渡したい項目が親レコード以外の参照項目の場合 {!record.[api 参照名 ].Id} - それ以外の項目の Name 項目の場合 {!record.[api 参照名 ]} 6. 構文の記述ができれば [ 完了 ] をクリックし作成した画面をデプロイし設定は完了です p でご紹介した画面遷移と同様の設定を SkyVisualEditor の画面より実施する場合の構文は /apex/estimate?account c={!record.accountid}&opportunity c={!record.id} ですなお API 参照名は SkyVisualEditor スタジオで項目を選択した際に画面右側の [ コンポーネント ] タブの [ 共通 ]-[ 項目 API 参照名 ] よりご確認いただけます Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 27

[ 参考 ] 関連リストにカスタムボタンを配置する方法 Salesforce の関連リストにはカスタムボタンを配置できます関連リストの標準の [ 新規 ] をカスタムボタンに変更することで複数の値を遷移先の画面に反映できます関連リストにカスタムボタンを配置する際は遷移先のオブジェクトの [ ボタンリンクおよびアクション ] にカスタムボタンを作成しますこのときカスタムボタンの [

28 [ 参考 ] 関連リストにカスタムボタンを配置する方法 Salesforce の関連リストにはカスタムボタンを配置できます関連リストの標準の [ 新規 ] をカスタムボタンに変更することで複数の値を遷移先の画面に反映できます関連リストにカスタムボタンを配置する際は遷移先のオブジェクトの [ ボタンリンクおよびアクション ] にカスタムボタンを作成しますこのときカスタムボタンの [ 表示の種類 ] をリストボタンとしますそれ以外は p の設定と同じです最後に遷移元の [ 商談 ] オブジェクトの [ レイアウトを編集する ] より関連リストの [ 編集 ] をすると以下のキャプチャがダイアログ表示されますので [ ボタン ] 作成したカスタムボタンを配置すれば完了です ( 参考 : Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 28

[ コンポーネント ] タブの [ 高度なテーブル機能 ] より下記画面キャプチャの 2[ 絞込条件 ] を選択 4. 表示条件指定モード選択で表示条件指定 ( 設定 ) を選択し [ 次へ ] をクリック 5.

30 3-1. 明細一覧 ( データテーブル ) のソート条件の指定 SkyVisualEditor で作成した検索画面の検索結果の一覧テーブルに対してデフォルトのソート条件を指定することができます設定方法は以下の通りです 1. SkyVisualEditor スタジオより検索画面を作成もしくは開きます 2. 下記画面キャプチャの 1 検索条件部分の pageblock 部分をクリックします選択すると [ コンポーネント ] タブに pageblock のプロパティが表示されます 3. [ コンポーネント ] タブの [ 高度なテーブル機能 ] より下記画面キャプチャの 2[ 絞込条件 ] を選択 4. 表示条件指定モード選択で表示条件指定 ( 設定 ) を選択し [ 次へ ] をクリック 5. 下記画面キャプチャの 3 の [ ソート条件 ]-[ 追加 ] よりデフォルトで並び替えをしたい項目を選択以上で設定は完了です検索画面の作成方法については以下の資料をご覧ください ( Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 30

3-2. 検索画面の明細テーブルの Name 項目にリンクを設定 SkyVisualEditor では検索画面の明細テーブル ( データテーブル ) の Name 項目にリンクを設定できます設定手順は以下の通りです 1. SkyVisualEditor スタジオより検索画面を作成もしくは開きます 2.

31 3-2. 検索画面の明細テーブルの Name 項目にリンクを設定 SkyVisualEditor では検索画面の明細テーブル ( データテーブル ) の Name 項目にリンクを設定できます設定手順は以下の通りです 1. SkyVisualEditor スタジオより検索画面を作成もしくは開きます 2. SkyVisualEditor スタジオでリンクを設定したい Name 項目 ( ) をクリック 3. [ コンポーネント ] タブの [ テキスト ]-[ リンクとして表示 ] のチェックボックスを ON に 4. 新規ウィンドウでページを開く場合は [ リンクを別ウィンドウで開く ] のチェックボックスを ON に以上で設定は完了です画面遷移リンクを設定できる項目は Name 項目の表示 ( 参照 ) 項目のみです Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 31

3-3. 検索画面から詳細画面へ遷移後検索画面へ戻る際の設定 P.30 の 3-2. で新規ウィンドウでページを開くのではなく現在のウィンドウで詳細画面に遷移をする際にブラウザの [ 戻る ] ボタンを押すことで再度検索画面へ戻ることができます設定方法は以下の通りです 1.

32 3-3. 検索画面から詳細画面へ遷移後検索画面へ戻る際の設定 P.30 の 3-2. で新規ウィンドウでページを開くのではなく現在のウィンドウで詳細画面に遷移をする際にブラウザの [ 戻る ] ボタンを押すことで再度検索画面へ戻ることができます設定方法は以下の通りです 1. SkyVisualEditor スタジオより検索画面を作成もしくは開きます 2. スタジオ右側の [ ページ ] タブの [ 拡張プロパティをクリックします 3. 表示された拡張プロパティのうち cache の入力欄に true と入力します以上で設定は完了です Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 32

3-4. 検索画面で [ 検索 ] を押した際検索条件を折りたたむ方法 SkyVisualEditor で作成した検索画面は検索条件部分と検索結果部分に分かれています [ 検索 ] ボタンを押した際に検索条件部分を折りたたむことができます検索結果一覧部分をなるべく画面上に多く表示させたい場合に便利です

33 3-4. 検索画面で [ 検索 ] を押した際検索条件を折りたたむ方法 SkyVisualEditor で作成した検索画面は検索条件部分と検索結果部分に分かれています [ 検索 ] ボタンを押した際に検索条件部分を折りたたむことができます検索結果一覧部分をなるべく画面上に多く表示させたい場合に便利です次のページで設定方法をご紹介します通常カスタマイズ後検索条件部分が折りたたまれます当機能は JavaScript を記述します JavaScript は当社製品のサポート対象外となりますのでご了承ください Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 33

34 3-4. 検索画面で [ 検索 ] を押した際検索条件を折りたたむ方法 1. SkyVisualEditor スタジオより検索画面を開きます 2. まず下記キャプチャ 1 の検索条件部分の pageblock 部分をクリックし画面右側の [ コンポーネント ] タブの [ 外観 ]-[ 表示モード ] より detail もしくは maindetail を選択します 3. 次に 2 の [ 検索 ] ボタンをクリックし画面右側の [ コンポーネント ] タブの [ 検索結果のみ更新 ] よりページ全体を選択します (3) Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 34

35 3-4. 検索画面で [ 検索 ] を押した際検索条件を折りたたむ方法 4. 最後に画面右側の [ ページ ] タブ内の [ ページスクリプト ] よりページスクリプト編集ボタンをクリックし表示される構文エリアに以下サンプルを張り付け Component の ID を書き換え画面をデプロイし設定は完了です jquery(function() { // 検索時に検索結果のレコードがある場合 if({!component2.items.size} > 0) { // 検索条件部分を非表示にする jquery("[id$=':component36'].hidelistbutton").trigger("click"); } }); Component2 の検索結果のデータテーブルの ID を Component36 は検索条件の ID に書き換えてご利用ください備考 P.34 の手順 3 で [ 検索結果のみ更新 ] をページ全体としましたがデータテーブルを選択した場合は検索結果のデータテーブルを選択し画面右側の [ コンポーネント ] タブ内の [ 開発 ]-[JavaScript] より上記の手順 4 をおこなうことで設定できます Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 35

36 3-5. 参照画面作成機能 1 SkyVisualEditor では作成した入力画面を 2 ステップの手順で一括で参照 ( 表示用 ) 画面に変換することができます設定方法はメニューエリアの [ ツール ] より [ 参照画面作成 ] をクリックしページ名を設定後 [OK] をクリックすると参照画面が表示されます 3 2 配置した項目の幅や位置などは別途調整が必要な場合があります Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 36

38 セミナーイベント情報 SkyVisualEditor の事例や製品について知る 9 月 10 日 ( 水 ) SkyVisualEditor 定例セミナー SkyVisualEditor を体験する学習する SkyVisualEditor 体験セミナー実際に SkyVisualEditor を操作しながら画面開発を体験できるセミナーです 9 月 12 日 ( 金 ) SkyVisualEditor 標準トレーニング SkyVisualEditor の基本的な機能を網羅したプライベート研修ですこちらを受講いただければ SkyVisualEditor の基礎を十分にご理解いただけます Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 38

39 サポート窓口 SkyVisualEditor の機能 / 設定に関するお問合せ SkyVisualEditor のご契約者様は以下の専用問合せページよりお問合せいただけます SkyVisualEditor の標準の機能 / 設定に関するお問合せは無償ですまた別途有償サポートのプランも用意しております詳しくは以下問合せよりお問合せください契約者様専用問合せページ : SkyVisualEditor のご導入に関するお問合せ SkyVisualEditor に関するお問合せは以下お問合せフォームおよびメールアドレスお電話番号にて受け付けていますお気軽にお問合せください問合せフォーム : 問合せ product.sales@terrasky.co.jp 問合せ TEL : Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 39

40 次回以降のオンラインセミナーについて第 5 回基本編 Salesforce で見積作成画面を作成しよう 9 月 16 日 ( 火 ) 15:30-16:00 にて開催 ( 第 5 回は SkyVisualEditor をご検討するお客様の中でもご要望の高いアプリケーションの 1 つ見積画面について SkyVisualEditor で入力しやすい画面を作成する手順やノウハウをご紹介します第 6 回基本編使いやすいルックアップ検索画面を作成しよう 10 月開催予定第 6 回は Salesforce のルックアップ検索画面を SkyVisualEditor でより使いやすくすることができます第 5 回で作成した見積作成の画面から商品を検索し複数の商品を一括で登録する手順をご紹介します Copyright 2014 TerraSky Co.,Ltd. All Rights Reserved. 40

スライド 1

スライド 1 SkyVisualEditor オンラインセミナー ~ 第 6 回基本編 ~ Salesforce のルックアップ画面を使いやすい画面にしてみよう 2014 年 10 月 21 日 ( 火 ) はじめに本セミナーの目的 SkyVisualEditor の機能および設定方法の紹介を目的としています本日のセミナーのご対象者 Salesforce のルックアップ画面をもっと使いやすくしたいとご検討中のご担当者様