Lightningコンポーネントで行動タイムライン機能をつくってみました - Part 2です。
Lightningコンポーネントのソースコード
vscodeでプロジェクトを作成したときはauraフォルダ内に一式格納されています。
Apexクラスの準備
@AuraEnabledを宣言することでLightningコンポーネントから呼び出せます。メソッドはstaticで宣言します。今回はシンプルな処理のためsObject型をそのまま戻り値にしてしまいましたが、きちんとエラーチェックを行う場合はラッパークラスを用意してエラーメッセージ等を渡せるようにしておくと良いと思います。
LightningからApexクラスを呼び出す方法はこちら。
Lightningコンポーネントのパラメータ設定
アプリケーションビルダーから値を渡したい場合はdesignファイルを用意して対応します。下記のような感じです。
componentファイル側で宣言した変数のみ利用できます。ただし一度宣言すると相互に参照状況となり除外できなくなりました。除外する場合はdesignファイルを作り直すことになると思います。また「design:component label="xxx"」と宣言することでアプリケーションビルダーで表示する際のラベルを宣言できます。
componentファイル側では「aura:attribute」で変数を宣言しておきます。パラメータを渡す場合でも、defaultで初期値を宣言しておくと指定漏れがあっても大丈夫です。
designファイルは必須制御なども可能です。詳細はこちら。
プロファイル設定
Lightningコンポーネントの利用にはプロファイル設定は特に必要ないと思いますが、@AuraEnabledを宣言したApexクラスのみ利用権限を付与する必要があります。プロファイル設定の「有効な Apex クラス」で対象のクラスを追加してください。ここで追加ができていないとユーザが利用時にApexクラスで処理が実行されず戻り値が空の状態となってしまいます。(エラーメッセージがでなかったです。)
コンポーネント内の条件分岐
「aura:if」タグを利用することで表示/非表示の条件分岐が可能です。また「aura:set」タグで条件に当てはまらない場合のeles処理を実行できます。
elesの処理はコンポーネント読み込み中の一瞬でもeles状態となるのでそれを踏まえて開発する必要があります。
SVGタグの宣言
LightningコンポーネントではSVGタグの宣言はそのままではできません。宣言する場合は特定の処理を宣言したりするのですが、今回はLightning Design Systemのアイコン表示を対象に記載します。Lightning Design SystemのアイコンはSVGタグとなっていますが、コンポーネント内で利用する場合は下記の書き方が可能です。
アイコン
<lightning:icon iconName="standard:rtc_presence" size="small" alternativeText="活動" />
アイコン・ボタン
<lightning:buttonIcon iconName="utility:switch" variant="bare" alternativeText="活動" />
これで面倒な準備も不要でLightning Design Systmのアイコンを表示できました。
日時の形式指定
項目の値を表示する場合で日時項目の形式指定をする場合です。下記の書き方ができます。
<!-- 2019年10月XX日(木) 10:00 -->
<lightning:formattedDateTime value="{!item.StartDateTime}" year="numeric" month="short" day="2-digit" weekday="narrow" hour="2-digit" minute="2-digit" />
<!--10:00 -->
<lightning:formattedDateTime value="{!item.EndDateTime}" hour="2-digit" minute="2-digit" />
曜日を表示したり時刻部分のみを表示したりといった調整が可能でした。
以上がLightningコンポーネントで行動タイムライン機能をつくってみました - Part 2となります。開発をしてみて気づいたのはだいたいこんな感じでした。
