User Interface (Objectives 4, 5, 6, 7) Flashcards
デスクトップで表示される場合、ライティングのウェブコンポーネントは3列でコンテンツを表示する必要があります。モバイル デバイスで表示する場合は、代わりに 3 つの行を表示する必要があります。ユーザーインターフェイスでこのレスポンシブな動作を実現するには、どのマークアップ構成を使用すべきでしょうか?
A.
<lightning-layout multiple-rows> <lightning-layout-item flexibility="grow" mobile="4" desktop="12" class="slds-text-align--center">A</lightning-layout-item> <lightning-layout-item flexibility="grow" mobile="4" desktop="12" class="slds-text-align--center">B</lightning-layout-item> <lightning-layout-item flexibility="grow" mobile="4" desktop="12" class="slds-text-align--center">C</lightning-layout-item> </lightning-layout>
B.
<lightning-layout multiple-rows> <lightning-layout-item size="4" small-device-size="12" class="slds-text-align--center">A</lightning-layout-item> <lightning-layout-item size="4" small-device-size="12" class="slds-text-align--center">B</lightning-layout-item> <lightning-layout-item size="4" small-device-size="12" class="slds-text-align--center">C</lightning-layout-item> </lightning-layout>
C.
<lightning-layout multiple-rows> <lightning-layout-item size="4" large-device-size="4" class="slds-text-align--center">A</lightning-layout-item> <lightning-layout-item size="4" large-device-size="4" class="slds-text-align--center">B</lightning-layout-item> <lightning-layout-item size="4" large-device-size="4" class="slds-text-align--center">C</lightning-layout-item> </lightning-layout>
D.
<lightning-layout multiple-rows> <lightning-layout-item size="12" medium-device-size="4" class="slds-text-align--center">A</lightning-layout-item> <lightning-layout-item size="12" medium-device-size="4" class="slds-text-align--center">B</lightning-layout-item> <lightning-layout-item size="12" medium-device-size="4" class="slds-text-align--center">C</lightning-layout-item> </lightning-layout>
D.
<lightning-layout multiple-rows> <lightning-layout-item size="12" medium-device-size="4" class="slds-text-align--center">A</lightning-layout-item> <lightning-layout-item size="12" medium-device-size="4" class="slds-text-align--center">B</lightning-layout-item> <lightning-layout-item size="12" medium-device-size="4" class="slds-text-align--center">C</lightning-layout-item> </lightning-layout>
lightning-layout-itemコンポーネントは、ウェブレスポンシブ動作を実装するために、ビューポートを縦に12分割するために使用することができます。size “属性に指定された値は、デフォルトで全てのデバイスタイプに適用されます。これは、「size 」属性に12の値を設定することは、各コンテナやレイアウト・アイテムが画面の幅一杯を占めることを意味します。しかし、「medium-device-size 」属性を使用すると、タブレットやより大きなデバイス(デスクトップ・コンピューターなど)専用の動作が上書きされます。つまり、「medium-device-size 」属性に4という値を設定すると、デスクトップで見た場合、各レイアウト項目は画面の3分の1(12個中4個)を占めることになります。携帯電話のようなタブレットより小さいデバイスでは、この場合、レイアウト項目は画面の全幅(12のうち12)を占めることになります。
small-device-size “属性は、携帯電話やそれ以上の大きさのデバイスに対してレスポンシブな動作を実装するために使われます。medium-device-size “属性は、タブレットやより大きなデバイスのためのレスポンシブ動作を実装します。large-device-size “属性は、デスクトップ・デバイスや大画面(スマートTVなど)用のレスポンシブ動作を実装します。属性が指定されていない場合、「lower 」属性が利用できない場合は、デフォルトのレスポンシブ動作が使用されます。例えば、「medium-device-size 」属性が指定されていない場合、利用可能であれば 「small-device-size 」属性を使用します。そうでなければ、「size 」属性を使用します。
mobile 「属性と 」desktop “属性は、有効なlayout-item属性ではありません。
ある開発者が、Lightning Webコンポーネントでゲッターとセッターを使用して、パブリックプロパティの値が設定されるたびに追加ロジックを実行しています。以下の例のコントローラを使用して、パブリックプロパティの値を表示するためにLightning Webコンポーネントで使用できる有効なマークアップはどれですか?
import { LightningElement, api } from 'lwc'; export default class myComponent extends LightningElement { propertyA = 'default'; @api get propertyB() { // return property value return this.propertyA; } set propertyB(value) { // remove special characters this.propertyA = value.replace(/[^a-z0-9\s]/gi, ''); } // ... }
A. <div class="slds-box">{propertyB}</div>
B. <div class="slds-box">{propertyA}</div>
C. <div class="slds-box">{getPropertyB()}</div>
D. <div class="slds-box">{getPropertyA}</div>
A. <div class="slds-box">{propertyB}</div>
Lightningウェブコンポーネントのパブリックプロパティは、@apiデコレータを使用してアノテーションされます。上記のシナリオでは、パブリックプロパティは「propertyB」で、ゲッターとセッターで定義されています。値を表示するには、Lightning Webコンポーネントの他のプロパティと同様に、プロパティ名をマークアップに追加し、中カッコで囲みます。
子コンポーネントとして追加された Lightning ウェブコンポーネントには、クリックされるとイベントが発生するフォームボタンが含まれています。このイベントは親コンポーネントには伝わらず、テンプレート内のボタン要素の祖先のみがイベントを処理できます。以下のコードがある場合、イベント伝播はどのように構成されるべきでしょうか?
const event = new CustomEvent('details', { detail: this.contact, // add configuration here }); this.template.querySelector('.button').dispatchEvent(event);
A.
bubbles: true, composed: false
B.
bubbles: false, composed: false
C.
bubbles: true, composed: true
D.
bubbles: false, composed: true
A.
bubbles: true, composed: false
カスタム・イベントを作成する際に、イベント伝播の設定を指定することができます。コンフィギュレーションが’bubbles: true, composed: false’で、イベントが上記のシナリオの’this.template.querySelector(‘.button’).dispatchEvent(event)’のようなテンプレート内の要素からディスパッチされる場合、イベントはDOMを通してバブルアップしますが、シャドウ境界を越えません。この設定とディスパッチ・メソッドは、要素の祖先のみがイベントを処理できる内部イベントを作成します。
デフォルトのコンフィギュレーションは ‘bubbles: false, composed: false’ で、イベントは DOM 内をバブルアップせず、シャドウの境界も越えません。このようなイベントは、イベントをディスパッチするコンポーネントに直接イベントリスナーを追加することでしか処理できません。
コンフィギュレーションが ‘bubbles: true, composed: true’ の場合、イベントは DOM 内をバブルアップし、ドキュメントルートに到達するまでシャドウ境界を越えます。これにより、親コンポーネントまたは含むコンポーネントがイベントを処理できるようになります。
Lightning ウェブコンポーネントは ‘bubbles: false, composed: true’ をサポートしていません。
Lightningウェブコンポーネントを開発している開発者は、現在のユーザーがすでにイベントに登録している場合、イベントのお知らせを表示したいと考えています。そうでない場合は、代わりにイベント登録フォームを表示する必要があります。この動作をLightning Webコンポーネントのユーザーインターフェイスに実装するには、次のどのマークアップを使用する必要がありますか?
A.
<template lwc:if={isRegistered}> <!-- announcement --> </template> <template lwc:else> <!-- form --> </template>
B.
<template lwc:if={isRegistered}> <!-- announcement --> <lwc:else> <!-- form --> </template>
C.
<template lwc:if={isRegistered}> <!-- announcement --> </template> <template lwc:elseif={!isRegistered}> <!-- form --> </template>
D.
<template lwc:if={isRegistered}> <!-- announcement --> </template> <p>Events</p> <template lwc:else> <!-- form --> </template>
A.
<template lwc:if={isRegistered}> <!-- announcement --> </template> <template lwc:else> <!-- form --> </template>
Lightning Web コンポーネントのマークアップに if、if-else、else ロジックを実装するには、それぞれ lwc:if、lwc:elseif、lwc:else 条件ディレクティブを使用します。Apex と同様に、これらは同じ論理構造またはパターンに従います:
<template lwc:if={condition1}> <!
<!-- 要素1 -->
<template lwc:if={condition1}> <!-- element 1 --> </template
<template lwc:elseif={condition2}> <!
<!-- 要素2 --> </template
</template
<template> <!
<!-- 要素3 --> </template
</template
必要なロジックは、現在のユーザーが登録されているかどうかという2つの結果しかないので、lwc:ifとlwc:else条件ディレクティブだけが必要です。このシナリオでlwc:elseifを使用することは必須ではありませんし、!シンボルを使用してプロパティを否定することもサポートされていません。lwc:elseifとlwc:elseの前にテキストや他の要素を置くことは出来ないことに注意して下さい。従って、無効なオプションの一つであるlwc:elseの前に<p>Events</p>タグを追加することは許されません。<lwc:else> 条件ディレクティブは存在しません。セールスフォースでは、if:true および if:false 条件付きディレクティブの使用を推奨していません。
</lwc:else></template>
Cosmic Enterprises の開発者は、Lightning Experience の「取引先」タブでユーザーが「新規作成」ボタンをクリックすると、ダイアログボックスが表示されるという要件を営業部長から受け取りました。ダイアログボックスでは、ユーザーが取引先と関連する連絡先を作成できるようにする必要があります。また、ボタンを使用して外部システムから追加情報を取得できるようにする必要があります。開発者は、この要件のために Aura コンポーネントを作成し、コンポーネントを使用して「新規作成」ボタンをオーバーライドすることにしました。このユースケースでコンポーネントが実装すべきインターフェースはどれですか?
A. force:lightningButton
B. lightning:actionOverride
C. force:lightningQuickAction
D. lightning:buttonOverride
B. lightning:actionOverride
Lightning:actionOverride インターフェイスを Aura コンポーネントに実装すると、Lightning Experience の標準ボタンまたはリンクをオーバーライドするためにコンポーネントを使用できます。
Aura コンポーネントには、モーダル ダイアログ ボックスを表示するコードを含めることができます。ユーザーが [新規作成] ボタンをクリックすると、レコードの作成と外部システムからの情報の取得に必要な入力 フィールドとボタンが含まれたダイアログ ボックスが表示されます。
force:lightningQuickAction インターフェイスを使用すると、Lightning Experience または Salesforce モバイルアプリのカスタムアクションとして Aura コンポーネントを使用できます。lightning:buttonOverride または force:lightningButton と呼ばれるインターフェイスはありません。
Cosmic Solutionsの開発者は、Salesforceの取引先データを動的かつインタラクティブに視覚化するAuraコンポーネントを構築しています。彼女は「d3.js」というサードパーティのJavaScriptライブラリを使用したいと考えています。さらに、ユーザーインターフェイス要素に ‘uikit.css’ という CSS フレームワークを使用したいと考えており、これにも ‘uikit.js’ という JavaScript ライブラリが必要です。これらの外部リソースが’d3’、’uikitJs’、’uikitCss’という3つの静的リソースとしてアップロードされたら、それらをロードするためにAuraコンポーネントの.cmpマークアップでどのコードを使用できますか?
A.
<ltng:require scripts="{!($Resource.d3, $Resource.uikitJs, $Resource.uikitCss)}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
B.
<ltng:require scripts="{!($Resource.d3, $Resource.uikitJs)}" styles="{!$Resource.uikitCss}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
C.
<ltng:require scripts="{!join(',', $Resource.d3, $Resource.uikitJs, $Resource.uikitCss)}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
D.
<ltng:require scripts="{!join(',', $Resource.d3, $Resource.uikitJs)}" styles="{!$Resource.uikitCss}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
D.
<ltng:require scripts="{!join(',', $Resource.d3, $Resource.uikitJs)}" styles="{!$Resource.uikitCss}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
<ltng:require> タグは、静的リソースとしてアップロードされた JavaScript または CSS ライブラリを参照するために、Aura コンポーネントの .cmp マークアップで使用できます。Resource グローバル値プロバイダーは、静的リソースとしてアップロードされた画像、スタイルシート、または JavaScript コードを参照するために使用できます。scripts'属性は、非同期にロードされなければならないJavaScriptライブラリを指定するために使われます。
複数のJavaScriptライブラリを読み込む必要がある場合、対応する静的リソースをカンマ区切りで指定することができます。join' 演算子は、複数の $Resource 参照をひとつの 'scripts' 属性に含めるために使います。スクリプトが読み込まれた後に関数を呼び出すには、'afterScriptsLoaded' 属性を使用します。
同じ<ltng:require>タグを使って、読み込まなければならないスタイルシートを一つ以上指定することができます。styles'属性は、静的リソースとしてアップロードされたスタイルシートを参照するために使われます。
</ltng:require></ltng:require>
ある開発者が、アプリページのルートコンポーネントである Aura コンポーネントの背景画像を変更するボタンを持つ Aura コンポーネントを作成しています。ボタンを含むコンポーネントは、最も内側のコンポーネントとして、ネストされたコンポーネントのいくつかのレイヤーの奥深くに埋もれています。アプリケーションのルートコンポーネントが処理する予定のイベントをトリガーするには、どのタイプのイベントを使用する必要がありますか?
A. Application Event
B. Broadcast Event
C. Hierarchical Event
D. Component Event
D. Component Event
この要件を満たすには、コンポーネント・イベントを使用する必要があります。ボタンが配置されているコンテナ階層や入れ子階層に関係なく、コンポーネントイベントの「Bubble」フェーズは、ルートコンポーネントやメインコンテナに到達するまで、コンテナ階層の上方にイベントを伝播する。
コンポーネントイベントは、「Bubble」と「Capture」の2つのフェーズをサポートしています。デフォルトのフェーズは Bubble フェーズです。コンポーネントイベントがBubbleフェーズを使用する場合、イベントが発生すると、ソースコンポーネントが最初にイベントを処理します。次に親コンポーネント、祖父母コンポーネントと続き、ルートコンポーネントまで各コンポーネントがイベントを処理します。
一方、コンポーネントイベントが「Capture」フェーズを使用する場合、イベントの伝播順序はトップダウン方式になります。ソースコンポーネントがイベントを発火すると、ルートコンポーネントが最初にイベントを処理し、伝搬はソースコンポーネントに到達するまで格納階層をトラバースします。
アプリケーション・イベントでもルート・コンポーネントはイベントを受信しますが、このタイプのイベントは、コンポーネント・イベントが要件を満たせない場合にのみ使用されます。アプリケーション・イベントは、アプリケーション内のすべてのコンポー ネントにイベントをブロードキャストする。
階層イベント」や「ブロードキャストイベント」という名前のイベントタイプはない。
ある企業の Salesforce 開発者は、Aura コンポーネントを使用してシンプルな通貨換算アプリを構築しました。財務マネージャーは、特定のレコードページでボタンがクリックされると、モーダルダイアログでアプリを起動する機能を必要としています。要件を満たすには、どのような手順が必要ですか?
答えを 2 つ選んでください。
A. 新しいボタンまたはリンクを作成し、その URL を Lightning コンポーネントタブに設定します。
B. 新しいアクションボタンを作成し、そのアクションタイプを「Lightningコンポーネント」に設定します。
C. コンポーネントに force:lightningQuickAction インターフェイスを実装します。
D. コンポーネントに lightning:actionOverride インターフェイスを実装する。
B. 新しいアクションボタンを作成し、そのアクションタイプを「Lightningコンポーネント」に設定します。
C. コンポーネントに force:lightningQuickAction インターフェイスを実装します。
force:lightningQuickAction インターフェースにより、Aura コンポーネントをカスタムアクションとして使用することができます。アクションタイプを「Lightning Component」に設定することで、新しいアクションボタンを作成し、Aura コンポーネント(Currency Converter)を選択することができます。ボタンをクリックすると、モーダルダイアログで Lightning コンポーネントが起動します。
lightning:actionOverride インターフェイスは、Aura コンポーネントが標準アクションをオーバーライドすることを可能にし、指定された要件には適用できません。ボタンまたはリンクを使用し、その URL を Lightning コンポーネントのタブに設定することは可能ですが、このボタンをクリックしても、ユーザーはタブページにリダイレクトされるだけで、モーダルダイアログは表示されません。
Cosmic Service Solutions の開発者は、Aura コンポーネントを使用してモーダルダイアログボックスを実装したいと考えています。ダイアログボックスは、Lightning Experience のケース記録ページでユーザーがオブジェクト固有のアクションをクリックしたときに表示される必要があります。このダイアログボックスでは、ユーザーがページに表示されているレコードに関連するいくつかの詳細を更新できるようにする必要があります。この機能を実装するには、次のどれを使用する必要がありますか?
答えを 3 つ選んでください。
A. force:lightningQuickAction interface
B. role=”modal” attribute
C. force:hasRecordId interface
D. role=”dialog” attribute
E. force:lightningObjectAction interface
A. force:lightningQuickAction interface
C. force:hasRecordId interface
D. role=”dialog” attribute
モーダルダイアログボックスは、Aura コンポーネントマークアップで role=「dialog」 属性を持つ必要があります。force:hasRecordId インターフェイスを使用すると、コンポーネントに現在のレコードの ID を割り当てることができます。force:lightningQuickAction または force:lightningQuickActionWithoutHeader インターフェイスを使用して、Aura コンポーネントをアクションとして使用できるようにすることができます。force:lightningObjectAction インターフェイスや role=「modal」 属性はありません。
静的リソースを使用してVisualforceページまたはLightningコンポーネントからコンテンツを参照する利点にはどのようなものがありますか?
答えを 2 つ選んでください。
A. 静的リソースを使用して、VisualforceコンポーネントやLightningコンポーネントをロードできる。
B. 静的リソースアーカイブ内のファイルで相対パスを使用して、アーカイブ内の他のコンテンツを参照できる。
C. コンポーネント内の静的リソースを、静的リソース名で参照できる。
D. 関連するファイルのコレクションをディレクトリ階層にパッケージ化し、その階層データをcsvファイルにアップロードできる。
B. 静的リソースアーカイブ内のファイルで相対パスを使用して、アーカイブ内の他のコンテンツを参照できる。
C. コンポーネント内の静的リソースを、静的リソース名で参照できる。
静的リソースは、その名前で参照することができます。相対パスは、ディレクトリ階層に基づいてアーカイブ内に存在するファイルをナビゲートし、参照するために使用することができます。
関連するファイルのコレクションを1つの.zipまたは.jarファイルとしてパッケージ化し、アップロードすることができます。静的リソースはコンポーネントのロードには使用されませんが、画像、スタイルシート、JavaScript、その他のファイルの参照に使用されます。
Cosmic Hotelsの開発者は、ビジネスアプリケーション用のLightning Webコンポーネントを開発しています。彼は、サードパーティのJavaScriptライブラリを使用してアニメーションやエフェクトを追加することで、より興味深いものにしたいと考えています。また、コンポーネント内のテキストやその他のビジュアル要素にカスタムスタイルを使用したいと考えています。このユースケースのコンポーネントを定義する際に利用すべきアプローチは、次のうちどれでしょうか?
答えを2つ選んでください。
A. Resourceグローバル値プロバイダを使用して、JavaScriptライブラリとCSSを含める。
B. initScript’ メソッドと ‘initStyle’ メソッドを使用して、JavaScript ライブラリと CSS を読み込みます。
C. JavaScript ライブラリおよび CSS 用の静的リソースは、@salesforce/resourceUrl スコープ付きモジュールからインポートする必要があります。
D. JavaScript ライブラリと CSS を読み込むメソッドは、platformResourceLoader モジュールからインポートする必要があります。
C. JavaScript ライブラリおよび CSS 用の静的リソースは、@salesforce/resourceUrl スコープ付きモジュールからインポートする必要があります。
D. JavaScript ライブラリと CSS を読み込むメソッドは、platformResourceLoader モジュールからインポートする必要があります。
Lightning Web コンポーネントにサードパーティの JavaScript ライブラリと CSS を含めるには、静的リソースを定義する必要があります。静的リソースを使用して、アーカイブ、画像、スタイルシート、JavaScript、およびその他のファイルを含めることができます。コンポーネントの JavaScript ファイルでは、@salesforce/resourceUrl を使用して静的リソースをインポートする必要があります。loadStyle および loadScript メソッドは、platformResourceLoader モジュールを使用してインポートする必要があります。loadScript’ メソッドは、JavaScript ライブラリをロードするために使用します。loadStyle’ メソッドは CSS スタイルシートをロードするために使用します。
ある開発者が、指定した「Type」を持つすべての取引先を含むテーブルを表示するLightning Webコンポーネントを作成しました。このコンポーネントを取引先レコードページのクイックアクションにリンクし、ユーザーが自動的にモーダルダイアログで開けるようにしたいと考えています。モーダルのテーブルは、’Type’ フィールドの値が現在の Account レコードと同じであるすべての Account レコードを表示する必要があります。この要件を満たすために有効な考慮事項は次のうちどれですか。
答えを 3 つ選びなさい。
A. Lightning Web コンポーネントは、マークアップ ファイルで「force:lightningQuickActionWithoutHeader」インターフェイスを実装する必要があります。
B. Lightning Web コンポーネントは、設定ファイルで ‘lightning__RecordAction’ ターゲットと ‘ScreenAction’ アクション タイプを使用する必要があります。
C. Lightning Web コンポーネントのモーダルは、role=「modal」 を使用する。
D. 現在のレコードの ID を格納するために変数を使用する必要があります。
E. Lightning Web コンポーネントは、CloseActionScreenEvent イベントをディスパッチしてモーダルを閉じる必要があります。
B. Lightning Web コンポーネントは、設定ファイルで ‘lightning__RecordAction’ ターゲットと ‘ScreenAction’ アクション タイプを使用する必要があります。
D. 現在のレコードの ID を格納するために変数を使用する必要があります。
E. Lightning Web コンポーネントは、CloseActionScreenEvent イベントをディスパッチしてモーダルを閉じる必要があります。
マークアップ ファイルで「force:lightningQuickActionWithoutHeader」インターフェイスを実装できるのは Aura コンポーネントのみです。Lightning Web コンポーネントがマークアップでこのインターフェイスを実装することはできません。代わりに、Lightning ウェブコンポーネントは、’js-meta.xml’ ファイルにターゲットとして ‘lightning_RecordAction’ を、アクションタイプとして ‘ScreenAction’ を追加することで、このインターフェイスと同等のものを実装することができます。
Lightning ウェブコンポーネントは、クイックアクションが現在のレコード ID を渡すために、JavaScript ファイル内に ‘recordId’ というパブリック変数を持つ必要があります。このレコードIDは、現在の取引先レコードのタイプをクエリするために使用されます。
最後に、Lightning Web コンポーネントの JavaScript ファイルは、モーダルを閉じる必要があるときに CloseActionScreenEvent イベントをディスパッチする必要があります。また、マークアップでは、モーダルは role=「modal」 ではなく role=「dialog」 を使用する必要があります。
ある開発者は、コンボボックス、ラジオボタン、その他のフィールドなど、ユーザー入力を収集するためのさまざまな入力要素を含むモーダルコンポーネントを作成したいと考えています。このタイプのコンポーネントを構築する際に実行すべきことは、次のうちどれでしょうか?
答えを1つ選びなさい。
A. LightningModal」クラスを継承したクライアントサイドコントローラクラスを作成する。
B. lightning/lightningModal’ パッケージから LightningModal クラスをインポートする。
C. コンポーネントの XML コンフィギュレーションファイルの type プロパティを ‘Modal’ に設定する。
D. マークアップに <lightning-modal-header></lightning-modal-header> をインクルードする。
A. LightningModal」クラスを継承したクライアントサイドコントローラクラスを作成する。
Salesforce は、機能豊富で再利用可能なオーバーレイを作成するために使用できるモーダルコンポーネント (Lightning Web コンポーネント) を構築するための ‘LightningModal’ クラスを提供しています。<lightning-modal-body></lightning-modal-body> コンポーネントは必須で、そのマークアップに追加され、モーダルのボディとして機能します。<lightning-modal-header> および <lightning-modal-footer> コンポーネントを追加することができ、これはオプションです。</lightning-modal-footer></lightning-modal-header>
LightningModal クラスは ‘lightning/modal’ パッケージからインポートされます。Lightning Web コンポーネントの XML コンフィギュレーションファイルの type プロパティは必須ではありません。