Salesforce Experience CloudにAuraコンポーネントを配置する際、変数の初期値をDesignファイルを使用することで設定することができます。
その設定方法について解説をしていきます。
1. Auraコンポーネントの作成
auraフォルダーでAuraコンポーネントを作成します。
※解説用に"Sample"という名前で作成します。
コンポーネントを作成すると下のイメージのようなAuraバンドルがauraフォルダ直下に作成されます。
2. 変数定義
.cmpファイルで変数の定義をします。
更に画面に設定した内容を表示する為の記述を追記していきます。
※解説用に"sampleText"という名前で定義します。
・name：変数の変数名
・type：変数の型
・default：初期値設定（コンポーネントが読み込まれたときの最初の値）
・description：変数の説明
※<aura:component>タグのプロパティに
"implements="forceCommunity:availableForAllPageTypes""を追加することで、
作成したコンポーネントをコミュニティサイトの画面上に配置することができます。
3. Designファイルの設定
コンポーネントで定義した変数（sampleText）をサイトビルダーで設定できるように.designファイルでを設定していきます。
・name：コンポーネントで定義した変数のnameに合わせる
・label：サイトビルダー上での変数の表示名
※<design:component>タグのプロパティに"label"を設定することでビルダー上に配置するコンポ―ネントの名前を設定することができます。
4. コンポーネントの配置
サイトのビルダーでコンポーネントを配置します。
コンポーネントを配置すると、下の画像のように表示されます。
5. サイトのビルダーページで初期値設定
配置したコンポーネントの変数に値を設定していない場合と、設定した場合の画面の違いを見ていきます。
配置したコンポ―ネントをクリックすると、Designファイルで設定した変数の表示名と入力欄が表示されます。
そこに値を設定することができます。
① 値を設定していない場合
画像のように値を空白として設定し、サイトを公開します。
サイトを開いてみると下の画像のようになっています。
② 値を設定した場合
次に、値を設定してサイトを公開します。
今回は確認用に"確認用に値を設定します。"と設定します。
①の時と同じように画面を開くと、設定した値（赤い下線部）が画面上に表示されています。
補足：
一度Designファイルで変数を定義し、Salesforce上にデプロイしてしまうと修正・編集ができなることに注意。
まとめ：
このように、Designファイルを使用して変数の初期設定を行う事が出来ます。
画面によって表示内容が異なる場合や、同じコンポーネントでも画面によって見せる内容が変わってくるといった場面で利用できると思います。
Designファイルを活用して、効率の良いプログラミングを実現してみましょう！
