html内にあるテキストボックスに何かしら値を入力した後、 Enterキーを押すとエラーが画面に遷移してしまう。 Enterキーを押すと確定ボタンを押した時と同様の動きにしたい。 (例) テキストボックスに7桁数字を入力して確定ボタンを押す。 入力した際に確定…

Auraコンポーネントにあるdeginにて、 attributeを設定したが不要になったので削除したい。 しかし、ソースの該当箇所を削除すると以下のエラーが出てきて削除ができない。 「コンポーネントがLightningページインターフェースを実装している場合、設計属性…

Auraコンポーネント(html)内のテキストをjavascripで抽出する。 (例) ・html側 <div class="test_tree1"> <p class="test_tree1_content">テスト1</p> </div> <p class="test_tree2">テスト2</p>・javascript側 $("test_tree1_content").on("click", function() { let idText = $(this).parent().next().text(); });⇒テスト2が取れる。this：test_tree1_c…

Auraコンポーネントにて、spinnerの設定方法を記載。 spinnerは簡単に言えば処理が終わるまで表示されるローディング(ぐるぐる)画面です。注意：spinnerとjQueryの相性があまり良くないため、jQueryの中にspinner処理は入れないようにしてください。 ・コン…

とある問いに対して選択肢が複数ある場合、ページを開くたびに選択肢の並び順をランダムにする方法 js側 ※問題、選択肢はリストで保持しているとする //問題数分実行する for (var questionList = 0; questionList < 問題.length; questionList++) { //選択…

SFDCの日付の表記は「yyyy-MM-dd」 これを「yyyy年MM月dd日」のようにフォーマットを変えたい場合は以下のように書く ・年月日 $A.localizationService.formatDate(日付型を持った変数名, "yyyy" + '年' + "M" + '月' + "d" + 日);・月日 $A.localizationSer…

条件によってclassの追加/削除を行いたい場合の書き方cmp側 <div id="test" class="classsample1 classsample2">確認</div> js側 ・追加の場合 classに「classsample3」が追加される document.getElementById(’test’).classList.add('classsample3');・削除の場合 classの「classsample2」が削除される document.getE…

SFDC側に保存しているUserのemailを取得する方法 $A.get("$SObjectType.CurrentUser.Email");

コンポーネントで使用したいライブラリを追加する方法は以下の通り。①静的リソースに使用する素材をzipで登録する ②コンポーネントで以下のように宣言

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.lo…

ページを開いたときに初期処理がある場合のAuraコンポーネントの書き方cmp側 <ltng:require scripts="" afterScriptsLoaded="{!c.initialize}"/>controller.js側 initialize : function (component, event, helper) {…}</ltng:require>

コンポーネントの定義枠に設定したCSSがうまく読み込まない。 →読む込むタイミングを変更するcmp側 <aura:handler name="render" value="{!this}" action="{!.c.xxx}">controller.js側 xxx : function (component, event, helper) { //ここにスタイルの読み込み処理を書く } ・handler コンポーネントにイベント処理を実装す</aura:handler>…

コンポーネントAからコンポーネントBを呼ぶ書き方。(例) コンポーネントAの名前：CompA コンポーネントBの名前：ComB ・CompA.cmp <aura:component> <a href="javascript:void(0);" class="btn btn-center" onclick="{!c.movePage}"> <c:CompB aura:id="compB"> //IDの適用範囲は本コンポーネント内のみ </aura:component>・CompAController.js movePage : function(component, event, helper)…

コンポーネントでApex処理を呼ぶ。(例) Apex側 public class SampleApexClass { public static String getSample() {…} }cmp側 <aura:component controller="SampleApexClass" implements="forceCommunity:availableForAllPageTypes"> <a href="javascript:void(0);" onclick="{!c.sampleJs}">クリック</a> </aura:component> js側 sampleJs : fun…

通常のHTMLでも表示はされるが、改行されない。 それぞれ以下のように書くと改行された状態で表示される。 ・テキストエリアの場合 (xxxは、テキストエリア項目を取得した変数とする。) <ui:outputTextArea value="{!v.xxx}"/>もしくは、CSSで以下を設定 white-space: pre-wrap; ・ロングテキスト</ui:outputtextarea>…

以下のように書くと「yyyy/MM/dd」で表示される。 (xxxは、日付/時間項目を取得した変数とする。) <ui:outputDate value="{!v.xxx}"/></ui:outputdate>

Aura内でのAND条件は最大2つまで設定が可能。 3つ以上ある場合はANDをネストしていく。AND条件が2つある場合 and(A,B)AND条件が3つある場合 and(A,and(B,C))

条件によって特定のclassのstyleを変える。 クラス名を取得する方法は document.getElementsByClassName("クラス名");スタイルの書き換え方法は xxx[i].style.プロパティ名 = '書き換え内容'; (例) html側はデフォルト非表示になっている。 項目：testColumn…

ページの表示/非表示は大きく2通りある。 方法①コンポーネントのaura:ifを使う →該当しない場合は、その領域がなくなる。 データの保持ができない。方法②cssのdisplay:noneを使う →画面上見えないが、html上では存在する。 データの保持が可能。

ボタンを非活性にする場合はHTMLのclassに以下を追記する。 disabled上記の文言をつけなければ活性となる。(例) コンポーネント側 <button type="button" class="btn btn-center btn-lgr disabled" onclick="{!c.コントローラーfunction名}"> 確認する </button> ・条件によって、disabledをつけたり外したりする方法 コントローラー側 checkButton : function (component, eve…

「テスト 確認」のように、半角スペースを入れたい場合方法① 半角スペースを入れたいところに以下を書く。 &nbsp; 方法② テキスト囲みで半角スペースを入れる {!' ' + テキスト型項目名}

ブロックの非表示をしたい場合はstyleに以下のように書く。 display:none; ・HTMLに書く場合 (例) <p class="xxx" style="display:none;">あああ</p> ・CSSに書く場合 (例) CSS側 .THIS .testStyle { display:none; }HTML側 <p class="testStyle">あああ</p>

Listになっているデータで、その数分ブロックを生成する場合「iteration」を使用する。 <aura:iteration items="{!v.List変数名}" var="iteration内で使用するitemsの変数名" ></aura:iteration> (例) List名：question Listの中に以下の内容が入っている。 strTest 質問① 質問② 質問③ <aura:iteration items="{!v.question}" var="qa" > {!qa.strTest} </aura:iteration>⇒ 質問① 質問② 質問③ と表示される。

htmlでの完全一致の文字列比較では以下を使用する。 equals(対象A, 対象B)完全一致の場合true、不一致の場合falseを返す(例) String型項目：strTest 値：aaa <aura:if isTrue="{!equals(v.strTest, 'bbb')}">～処理内容～</aura:if>⇒一致しないので処理内容を行わない。

javascriptでの文字列部分一致比較 比較対象A.indexOf(比較対象B)不一致の場合「-1」を返す。 (例) strTest1 = 'aaa' strTest2 = 'bab' strTest1.indexOf(strTest2)⇒-1以外の値が返ってくる

リンクにパラメータを設定する場合の書き方 ?パラメータ名=値(例)パラメータ名：type 値：free /main/test?type=free

リンクをクリックすると、同ページ内の該当セクションにジャンプする。 ・ジャンプ先→IDを設定 <div class="xxx" id="checkpage">・ジャンプ元→hrefを設定 <a class="yyy" href="#checkpage"> また、URLに#がついている場合は最後に「/」は不要 (例) href="/main/test#checkpage"</a></div>

if文で出し分ける。 !if(条件,trueの場合の結果,falseの場合の結果)(例) テキスト型項目：strTest テキストがnullでない場合は「編集する」、nullの場合は「設定する」を返す。

・aura:ifの一般的な書き方 Boolean型の変数名：testFlag とする。 <aura:if isTrue="{!v.testFlag}"> ～処理内容～ </aura:if>条件に当てはまらないパターンの処理を書く場合「aura:set」を使用する。 (例)testFlagがtrueの場合、処理内容①を行う。falseの場合は処理内容②を行う。 <aura:if isTrue="{!v.testFlag}"> ～処理内容①～ <aura:set attribute="else"> ～</aura:set></aura:if>…

割り算をしたときに、整数のみを抽出する書き方 Math.floor(計算式)(例) Math.floor(100/3)⇒33