条件によって特定の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>…