サイトでカスタムオブジェクトを表示する方法①オブジェクトページ作成～リスト画面設定

エクスペリエンスクラウドサイトでカスタムオブジェクトを表示する手順をご説明します。
今回は第一弾。オブジェクトページを作成し、リスト画面の設定をするところまでをご説明します。三部作になっています。

画像を交えながら手順も細かく見ていくので、Salesforceに慣れていない方も一緒に設定していきましょう。

なお、すべて設定した後の最終形はコチラです。

では順番に見ていきましょう。

ビルダーでオブジェクトページを追加する

まずはビルダーでカスタムオブジェクト用のページを作成しましょう。

Salesforceの画面右上の歯車マークをクリックし、設定をクリックします。

画面左側の検索窓に「デジタル」または「サイト」と入力し、「すべてのサイト」をクリックします。

今回、カスタムオブジェクトを表示したいサイトを探して、その左側にある「ビルダー」をクリックします。

ビルダーの画面が開いたら画面左上にある「Home」と書かれている箇所をクリックし、一番下の「新規ページ」をクリックします。

今回はカスタムオブジェクトのページを作りたいので、「オブジェクトページ」をクリックします。

追加したいカスタムオブジェクトを探します。検索するとすぐに見つかりますよ！

見つかったらクリックし、「作成」ボタンをクリックします。

次の画面が表示されるので、そのまま「作成」をもう一度クリックします。

これでオブジェクトのページは作成完了です。

ここまでの作業で、カスタムオブジェクト用のページが作成されています。カスタムオブジェクト用のページとは以下の3つです。

この記事では「リスト」と「詳細」についてお話ししていきます。仕事で何度かエクスペリエンスクラウドを構築したことがありますが、「リスト」と「詳細」を設定していれば十分であることが多いからです。

リストとはSalesforceの画面でいうと、タブをクリックしたときにはじめに表示される、レコードが一覧でズラッと表示される画面のことです。

詳細はそのまま、レコードの詳細ページのことですね。Salesforceでは↓の画面と同じです。

ページのカスタマイズをする

先ほど作成したページをカスタマイズしていきます。

まずはリスト画面、つまりレコードの一覧画面です。画面左上にある画面選択のボタンをクリックし、オブジェクトのページを探して、その下にある「リスト」をクリックします。「オブジェクト名＋リスト」で表示されます。

すると、そのカスタムオブジェクトのリスト画面が開きます。ここでコンポーネントや設定を変えて、エクスペリエンスクラウドサイト上でのこのカスタムオブジェクトの見せ方を決めていきましょう。

まずは既に配置されているコンポーネントを見ていきましょう。Salesforceの画面と同じような見た目ですね。コンポーネントの中ならどこでも良いのでクリックすると設定画面が開きます。

上から順番に見ていきましょう。

レコード数

これはリストに表示するレコードの件数を設定します。ただし、フルレイアウトでは適用されないと書かれています。つまり、このサイトをスマホなど小さい画面で確認したときの最大表示件数を設定します。

PCで確認したときとスマホなどモバイルで確認したときとでは画面の見え方に差があります。作成しているサイトを使う対象にモバイルのユーザを含むような想定をしているのであれば、最大表示件数も考慮したいところですね。

レイアウト

次は画面のレイアウトの設定です。フル、コンパクト、標準の3つがあります。

レイアウトがフルの画面は、Salesforceに一番近い見た目だと思います。オブジェクトのマークや各種ボタンが表示されます。

このレイアウトを選択した場合、先ほど設定した「レコード数」は「最初に表示されるレコード数」になります。スクロールしていけばすべてのレコードを確認することが可能です。

レイアウトをコンパクトにするとすごくさみしい感じになりますね。本当にレコードの検索結果のみを表示するような見た目です。先ほどまで表示されていた決済日や作成者といった、リストビューに追加している項目が一切表示されません。

このレイアウトだと「レコード数」は「ページに表示されるレコード件数」になります。例えばレコード数を10としていた場合、リストには10件しかレコードが表示されません。ただし、リンクをクリックするとすべてのレコードが表示されるようになります。

レイアウトを標準にしてみます。こちらもシンプルですが、リストビューの項目は表示されるようですね。ただし先頭4つまでだそうです。また、フルと比べるとマークやボタンがありませんね。

個人的にはフルにしておくのが良いかと思います。コンパクトや標準だとなんだかさみしい感じになる気がするので…。ですが、このサイトの内容や目的に応じてご自身の環境に合ったものを選択してください。

オブジェクト名

これはコンポーネントで表示するオブジェクトを選択する項目です。このページはカスタムオブジェクト「おためし」用のページですので、基本的に他のオブジェクトのリストを表示することはありません。なので、最初に設定されている「ページのオブジェクト名」のままで大丈夫です。

検索条件名

こちらはリストビューに関する設定のようです。そのまま「ページの検索条件名」としておきます。これにより、ユーザは自分が選択できるリストビューを自由に切り替えることができます。

リストの固定を許可

これはリストビューをユーザが各自でピン止めできるかどうかを設定する項目です。画面でピンのマークが出るかどうかというお話ですね。

インライン編集を許可

これは、リストビューでレコードの値を編集できるようにするかどうかを設定します。リストビューで鉛筆マークをクリックすれば、複数のレコードをまとめて編集して保存できますよね？あれをサイトユーザにもさせて良いかを設定する項目です。

ヘッダプロパティ

ヘッダプロパティを開くと各種ボタンや画像の表示を切り替える画面が表示されます。チェックを外すと画面に表示されなくなりますので、不要なものはチェックを外しましょう。

例えば、サイトユーザにはアクションをさせたくない場合は「リストアクションを表示」のチェックを外すことで、ユーザから見えなくすることができます。

レコードリストコンポーネントについてはSalesforceのヘルプに詳細が載っていましたので、こちらも参考になさってください。

まとめ

今回はオブジェクトページの作成から「リスト」画面の設定方法までを解説しました。エクスペリエンスクラウドサイドでもSalesforceの見た目と同じような画面が作れるのは良いですよね。

また、設定方法が分かってしまえば、どんなオブジェクトでも応用可能なので、ぜひいろいろ作ってみてください。

続きの記事があと2つありますので、そちらもあわせてご覧ください。

それではごきげんよう。