技術メモ(主に自分向け)

短期記憶の自分向けの技術メモです。

コンポーネントのjs側で日付型のフォーマットを変える場合

SFDCの日付の表記は「yyyy-MM-dd」
これを「yyyy年MM月dd日」のようにフォーマットを変えたい場合は以下のように書く
・年月日

$A.localizationService.formatDate(日付型を持った変数名, "yyyy" + '年' + "M" + '月' + "d" + 日);

・月日

$A.localizationService.formatDate(日付型を持った変数名, "M月d日");


日にちの比較
今日の日付とSFDCの日付項目を比較

var dateNow = new Date();
if ($A.localizationService.formatDate(dateNow) >= $A.localizationService.formatDate(日付項目)) {
 //処理
}

コンポーネントのclassの追加削除の書き方

条件によってclassの追加/削除を行いたい場合の書き方

cmp側

<div id="test" class="classsample1 classsample2">確認</div>


js側
・追加の場合
classに「classsample3」が追加される

document.getElementById(’test’).classList.add('classsample3');

・削除の場合
classの「classsample2」が削除される

document.getElementById(’test’).classList.remove('classsample2');

コンポーネントにcss/jsライブラリを追加する方法

コンポーネントで使用したいライブラリを追加する方法は以下の通り。

①静的リソースに使用する素材をzipで登録する
コンポーネントで以下のように宣言

<ltng:require styles="{!join(',',
          $Resource.SlickJSAsset + '/css/other.css',
          $Resource.SlickJSAsset + '/css/slick.css')}"
         scripts="{!json(',',
          $Resource.jquery + '/jquery-3.4.1.mis.js',
          $Resource.swiperbundle + '/swiper-bundle.min.js')}"
         afterScriptsLoaded="{!c.initialize}"/>

<補足>
cssの追加は「styles」、jsの追加は「scripts」
 Resource.静的リソース名 + 'フォルダ階層があれば書く'

・「join」を書くことで、複数読み込むことを示す

・「afterScriptsLoaded="{!c.コンポーネントのコントローラー内のメソッド名}"」は、上記のスクリプトを読み込んだ後に、指定したController.jsを呼ぶ

コンポーネントでhrefがうまく動かない

hrefを使うと、SFDCがキャッシュで前の画面の情報を持ったままうまく動かない時がある。
以下のように対応する。
(例)
・対応前
cmp側

<a href="/s/testpage" class="btn btn-center">クリック</a>


・対応後
cmp側

<a href="javascript:void(0);" class="btn btn-center" onclick="{!c.clickButton}">クリック</a>

controller.js側

clickButton : function (component, event, helper) {
 window.location.href='/s/testpage';
}

コンポーネントの初期処理

ページを開いたときに初期処理がある場合のAuraコンポーネントの書き方

cmp側

<ltng:require scripts="" afterScriptsLoaded="{!c.initialize}"/>

controller.js側

initialize : function (component, event, helper) {…}

コンポーネントでCSSがうまく読み込まない

コンポーネントの定義枠に設定したCSSがうまく読み込まない。
→読む込むタイミングを変更する

cmp側

<aura:handler name="render" value="{!this}" action="{!.c.xxx}">

controller.js側

xxx : function (component, event, helper) {
 //ここにスタイルの読み込み処理を書く
}


<補足>
・handler
 コンポーネントにイベント処理を実装することができる


・render
 コンポーネントレンダリング時にイベントが発生する