Skip to main content

SkyVisualEditorでボタンを配置する

SVF Cloud for SalesforceとSkyVisualEditorを連携することで、SVF Cloud Managerで作成したボタンを、SkyVisualEditorを使ってSalesforceのページに配置できます。

追加するSalesforceのページ種類に合わせて、次を参照してください。

なお、以降で使用している用語は、『SkyVisualEditor ユーザマニュアル』に準じます。

詳細ページへ追加

Salesforceレイアウト、または自由レイアウトへ追加する手順は、次のとおりです。

  1. SVF Cloud Managerでボタンを作成する

    SVF Cloud Managerでボタンを作成します。

    手順の詳細は、『SVF Cloud 管理ガイド』の「帳票を出力する」を参照してください。

  2. ボタンの名前を確認する

    SVF Cloud Managerで作成したボタンの名前を確認します。

    1. SVF Cloud Managerにログインします。

    2. icon_menu_Button.png［SVFボタン設定］をクリックします。

    3. Salesforceログイン画面が表示された場合は、ログイン情報を入力してログインします。

    4. ［SVFボタン］の一覧から、作成したボタンを選択します。

    5. ［SVFボタン情報］－［名前］の値を、メモ等に控えます。

      scm_button_buttonName.png

    以上で、ボタンの名前の確認は完了です。

  3. SkyVisualEditorでボタンを配置する

    1. Salesforceに、SVF Cloud for SalesforceとSkyVisualEditorパッケージがインストールされた状態で、SkyVisualEditor Studioにログインします。

    2. コンポーネントペインの［AppComponent］ー［SVF Cloud for Salesforce］を選択します。

      SVES_componentPane.png

      SVF Cloud for Salesforceで作成したボタンが、 SVF Cloud Button として表示されます。

    3. SVF Cloud Button を、デザインキャンバスへドラッグ&ドロップします。

      SVES_addButton.png

      参考

      デザインキャンバスに配置した SVF Cloud Button は、ボタン幅を変更できます（プロパティで数値を指定することもできます）。

      SVES_sizeChange.png

    4. コンポーネントプロパティで、 SVF Cloud Button のプロパティを設定します。

      項目

      説明

      ID

      Salesforce上で扱われるDOMに付与されるIDです。

      幅[px]

      SVF Cloud Button の幅を設定します。

      高さ[px]

      使用できません。

      ボタンラベル

      SVF Cloud Button の表示名です。

      SVFボタン名

      SVF Cloud Managerで作成したボタンの名前を指定します。

      必須設定項目です。

      ID指定コンポーネント

      チェックボックス付きのデータテーブルを指定すると、複数レコードを出力できます。

      詳細は、「ID指定コンポーネントの指定（複数レコードの出力）」を参照してください。

      スタイル

      CSSのスタイルを上書きします。

    5. ［保存］ボタンをクリックします。

    以上で、ボタンの配置は完了です。

ID指定コンポーネントの指定（複数レコードの出力）

複数レコードを出力するためには、ID指定コンポーネントを指定します。

  1. 複数レコードを出力する SVF Cloud Button を選択します。

  2. コンポーネントプロパティの［SVFボタン名］に、SVF Cloud Managerで作成したボタンの名前を設定します。

  3. ［ID指定コンポーネント］のicon_SVES_edit.pngをクリックします。

  4. 画面全体が、コンポーネント選択状態になります。

  5. チェックボックス付きのデータテーブルを選択します。

    SVES_setTableComponent.png

  6. ［保存］ボタンをクリックします。

以上で、ID指定コンポーネントの指定は完了です。

検索レイアウトへ追加

検索画面のテンプレートへ追加するためには、カスタムボタンを追加し、クリック時の動作にプレビュー画面を生成するVisualforce ページ「PreviewPage」の呼び出しを設定します。

Visualforce ページ「PreviewPage」は、SVF Cloud Managerで作成したボタンをクリックしたときに呼び出され、プレビュー画面を生成します。このVisualforce ページを直接呼び出すことで、カスタムボタンクリック時にSVF Cloud for Salesforceを呼び出して帳票を出力できます。

  1. SVF Cloud Managerでボタンを作成する

    SVF Cloud Managerでボタンを作成します。

    手順の詳細は、『SVF Cloud 管理ガイド』の「帳票を出力する」を参照してください。

  2. ボタンの名前を確認する

    SVF Cloud Managerで作成したボタンの名前を確認します。

    1. SVF Cloud Managerにログインします。

    2. icon_menu_Button.png［SVFボタン設定］をクリックします。

    3. Salesforceログイン画面が表示された場合は、ログイン情報を入力してログインします。

    4. ［SVFボタン］の一覧から、作成したボタンを選択します。

    5. ［SVFボタン情報］－［名前］の値を、メモ等に控えます。

      scm_button_buttonName.png

    以上で、ボタンの名前の確認は完了です。

  3. SkyVisualEditorでカスタムボタンを配置する

    1. 検索結果が表示されるデータテーブルの、チェックボックス列を表示します。

      詳細は、SkyVisualEditorのヘルプを参照してください。

      SVES_addCheckBox.png

    2. SkyVisualEditorの機能で、レイアウトにカスタムボタンを作成します。

      詳細は、SkyVisualEditorのヘルプを参照してください。

    3. カスタムボタンのコンポーネントプロパティで、［OnClick］のicon_SVES_edit.pngをクリックします。

      SVES_onClick.png

    4. ［JavaScript エディタ］で、データテーブルからidを取得する処理と、Visualforce ページ「PreviewPage」を呼び出す処理を記述します。

      呼び出しには、JavaScriptでGETメソッドを使い、次のパラメーターを設定します。

      • パラメーター

        パラメーター

        説明

        id

        15桁か18桁の、sObjectのidを指定します。

        idの取得およびパラメーターへの設定部分は、必要に応じて開発してください。

        buttonFullName

        SVF Cloud Managerで作成したボタンの名前を指定します。

        注意

        名前空間は「svfcloud」です。必要に応じて付与してください。

      • 記述例

        取引先オブジェクトから、データテーブルで選択されたデータを帳票に出力してプレビュー画面を表示する例です。

        （ボタンの名前が「SVFAccountButton20160523205357125xz0」の例です）

        例 1. JavaScript
        var elements = document.getElementsByClassName('BulkSelectCheckbox');
if(elements.length === 0){
        alert('検索結果レコードがありません');
        return false;
}
var checkedList = [];
for(var i = 0; i < elements.length; i++){
        if(elements[i].checked && elements[i].getAttribute('rid') !== ''){
                checkedList.push(elements[i].getAttribute('rid'));
        }
}
if(checkedList.length === 0){
        alert('レコードが選択されていません');
        return false;
}
window.open('/apex/svfcloud__PreviewPage?buttonFullName=SVFAccountButton20160523205357125xz0&id='+checkedList.join(','));


    5. ［OK］ボタンをクリックします。

    6. ［保存］ボタンをクリックします。

    以上で、カスタムボタンの配置は完了です。

: