tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lighntingコンポーネント開発でApexクラスに複数の値を渡す方法

Lighntingコンポーネント開発でApexに複数の値を渡す方法についてです。次のようなラッパークラスを用意すると便利です。(サンプルではString型とsObject型を用意しました。)

f:id:tyoshikawa1106:20191113082041p:plain


Apexクラスの引数や戻り値で利用できます。Lightningコンポーネントでアクセスする部分には@AuraEnabledを宣言する必要があります。

f:id:tyoshikawa1106:20191113082214p:plain


aura:attributeでラッパークラス型の変数を宣言します。
f:id:tyoshikawa1106:20191113082255p:plain


action.setParamsでApexクラス呼び出し時に引数として利用できます。(カンマ区切りで複数渡すことも可能です。)

f:id:tyoshikawa1106:20191113082415p:plain


こんな感じ。
f:id:tyoshikawa1106:20191113082517p:plain

f:id:tyoshikawa1106:20191113082833p:plain

f:id:tyoshikawa1106:20191113082745p:plain


sObject型でもString型やInteger型などでも値のやりとりができると思います。String型のエラーメッセージ格納変数を用意してApex内でエラーが発生したらその情報をコンポーネント側に渡すといった使い方も結構便利です。

SFDC:Lighntingコンポーネントのアクション埋め込みを試してみました

Lighntingコンポーネントのアクション埋め込みを試してみました。下記の宣言をするとアクション内で呼び出すことができます。

implements="force:lightningQuickAction" 


すごいざっくりこんな感じ。
f:id:tyoshikawa1106:20191112194737p:plain


やってみてわかったのですが、アクション内で呼び出す場合は保存ボタンなどは通常のアクションとは違う位置に配置する必要がでてきました。
f:id:tyoshikawa1106:20191112194946p:plain


検索したところ要望は出ていましたが実現はされていないみたい。
f:id:tyoshikawa1106:20191112195035p:plain

save button when using force:lightningQuickAction - Ideas - Salesforce Trailblazer Community


今回はまぁいいかと進めました。次に課題となったのは保存ボタンで処理終わったときのポップアップクローズと画面リフレッシュです。検索したところやり方が紹介されてました。
salesforce.stackexchange.com


ざっくりこんな感じ。

({
    handleClick : function(component, event, helper) {
    // ポップアップクローズ
    $A.get("e.force:closeQuickAction").fire();
    // 画面リフレッシュ
    $A.get('e.force:refreshView').fire();
}
})

f:id:tyoshikawa1106:20191112195335p:plain


これで、ボタンクリック→Apex処理実行→ポップアップクローズ→画面リフレッシュという流れの機能の開発ができました。Apex実行含むサンプルについては別の機会にまとめたいと思います。

SFDC:lightning:textareaタグの高さ指定を試してみました

lightning:textareaタグの高さ指定を試してみました。lightning:textareaはLighnitngコンポーネント開発でテキストエリアの入力ボックスを表示したいときに利用します。
f:id:tyoshikawa1106:20191112193630p:plain

Component Library


コードはこんな感じ。
f:id:tyoshikawa1106:20191112193523p:plain


表示はこんな感じ。
f:id:tyoshikawa1106:20191112193533p:plain



テキストエリアなので入力欄の幅をもっと広げたいなと思ったら、まさかのrows宣言はサポート外。
f:id:tyoshikawa1106:20191112193806p:plain


それならstyle指定でと思ったのですが、そちらも思ったように行きませんでした。どうしたものかと検索したところ、discussion forumでやり方が紹介されていました。
f:id:tyoshikawa1106:20191112193933p:plain

How to show 5 rows with lightning:textarea? - Salesforce Developer Community


Lighntingコンポーネントでstyleファイルを用意して、下記のように宣言すればいいみたいです。

.THIS .slds-textarea {
    height:100px !important;
}


f:id:tyoshikawa1106:20191112194115p:plain


これでテキストエリアの高さをきれいに調整できました。
f:id:tyoshikawa1106:20191112194156p:plain

SFDC:Lightningコンポーネント開発のuiタグ廃止と代わりのタグについて確認しました

最近になってようやくLighntingコンポーネントの開発を仕事でつかいました。数年前に調べたときは「uiタグ」という専用のタグが用意されていてHTMLのuiタグと被ってるって思っていました。その後、lightningタグが出る出ないの部分までは情報を追っていたのですが、詳細については把握できていませんでした。Winter'20のリリースノートでそれについて触れられていて、「uiタグ」が正式に廃止されて「lighntingタグ」に差し替わることになっているみたいです。

f:id:tyoshikawa1106:20191112191443p:plain

ui 名前空間の Aura コンポーネントの廃止

※uiタグという記載をしていますが、正式にはLightningの「uiコンポーネント」とのことです。


uiタグをどのように変更するかについてもリリースノートにまとめられています。
f:id:tyoshikawa1106:20191112191651p:plain


新しいlightningタグについてはGoogle検索で使い方がヒットしました。
f:id:tyoshikawa1106:20191112192150p:plain


lighntingタグの詳細はこちら

uiコンポーネントのlighntingコンポーネント変換について

リリースノートのコピペですが、下記のとおりです。


■廃止された Aura コンポーネントには、次の推奨される代替方法を使用します。

ui:actionMenuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:button

lightning:button、lightning:buttonIcon、または lightning:buttonIconStateful に置き換えます。ボタングループの場合、lightning:buttonGroup を使用します。

ui:checkboxMenuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:inputCheckbox

checkbox、toggle、または checkbox-button 型を使用する lightning:input に置き換えます。チェックボックスグループの場合、代わりに lightning:checkboxGroup を使用します。

ui:inputCurrency

number 型および currency フォーマッタを使用する lightning:input に置き換えます。

ui:inputDate

date 型を使用する lightning:input に置き換えます。

ui:inputDateTime

datetime 型を使用する lightning:input に置き換えます。

ui:inputDefaultError

組み込みの項目検証を使用する lightning:input に置き換えます。

ui:inputEmail

email 型を使用する lightning:input に置き換えます。

ui:inputNumber

number 型を使用する lightning:input に置き換えます。

ui:inputPhone

phone 型を使用する lightning:input に置き換えます。

ui:inputRadio

radio 型を使用する lightning:input に置き換えます。ラジオグループの場合、代わりに lightning:radioGroup を使用します。

ui:inputRichText

lightning:inputRichText に置き換えます。

ui:inputSecret

password 型を使用する lightning:input に置き換えます。

ui:inputSelect

lightning:select または lightning:combobox に置き換えます。

ui:inputSelectOption

lightning:select または lightning:combobox に置き換えます。

ui:inputText

text 型を使用する lightning:input に置き換えます。

ui:inputTextArea

lightning:textarea に置き換えます。

ui:inputURL

url 型を使用する lightning:input に置き換えます。

ui:menu

lightning:buttonMenu に置き換えます。

ui:menuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:menuItemSeparator

lightning:menuDivider および lightning:buttonMenu に置き換えます。

ui:menuList

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:menuTrigger

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:menuTriggerLink

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:message

lightning:notificationsLibrary に置き換えます。

ui:outputCheckbox

checkbox 型を使用する lightning:input に置き換えて readonly を true に設定します。

ui:outputCurrency

currency に設定された style を使用する lightning:formattedNumber に置き換えます。

ui:outputDate

lightning:formattedDateTime に置き換えます。

ui:outputDateTime

lightning:formattedDateTime または lightning:formattedTime に置き換えます。

ui:outputEmail

lightning:formattedEmail に置き換えます。

ui:outputNumber

lightning:formattedNumber に置き換えます。

ui:outputPhone

lightning:formattedPhone に置き換えます。

ui:outputRichText

lightning:formattedRichText に置き換えます。

ui:outputText

lightning:formattedText に置き換えます。

ui:outputTextArea

lightning:formattedText に置き換えます。

ui:outputURL

lightning:formattedUrl に置き換えます。

ui:radioMenuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。


■次のイベントが非推奨になりました。

ui:menuFocusChange

lightning:buttonMenu に置き換えます。

ui:menuSelect

lightning:combobox に置き換えます。

ui:menuTriggerPress

lightning:buttonMenu に置き換えます。


本格的に開発開始する前に知れて良かったです。

SFDC:Lightningコンポーネント開発のuiタグ廃止と代わりのタグについて確認しました

最近になってようやくLighntingコンポーネントの開発を仕事でつかいました。数年前に調べたときは「uiタグ」という専用のタグが用意されていてHTMLのuiタグと被ってるって思っていました。その後、lightningタグが出る出ないの部分までは情報を追っていたのですが、詳細については把握できていませんでした。Winter'20のリリースノートでそれについて触れられていて、「uiタグ」が正式に廃止されて「lighntingタグ」に差し替わることになっているみたいです。

f:id:tyoshikawa1106:20191112191443p:plain

ui 名前空間の Aura コンポーネントの廃止

※uiタグという記載をしていますが、正式にはLightningの「uiコンポーネント」とのことです。


uiタグをどのように変更するかについてもリリースノートにまとめられています。
f:id:tyoshikawa1106:20191112191651p:plain


新しいlightningタグについてはGoogle検索で使い方がヒットしました。
f:id:tyoshikawa1106:20191112192150p:plain


lighntingタグの詳細はこちら

uiコンポーネントのlighntingコンポーネント変換について

リリースノートのコピペですが、下記のとおりです。


■廃止された Aura コンポーネントには、次の推奨される代替方法を使用します。

ui:actionMenuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:button

lightning:button、lightning:buttonIcon、または lightning:buttonIconStateful に置き換えます。ボタングループの場合、lightning:buttonGroup を使用します。

ui:checkboxMenuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:inputCheckbox

checkbox、toggle、または checkbox-button 型を使用する lightning:input に置き換えます。チェックボックスグループの場合、代わりに lightning:checkboxGroup を使用します。

ui:inputCurrency

number 型および currency フォーマッタを使用する lightning:input に置き換えます。

ui:inputDate

date 型を使用する lightning:input に置き換えます。

ui:inputDateTime

datetime 型を使用する lightning:input に置き換えます。

ui:inputDefaultError

組み込みの項目検証を使用する lightning:input に置き換えます。

ui:inputEmail

email 型を使用する lightning:input に置き換えます。

ui:inputNumber

number 型を使用する lightning:input に置き換えます。

ui:inputPhone

phone 型を使用する lightning:input に置き換えます。

ui:inputRadio

radio 型を使用する lightning:input に置き換えます。ラジオグループの場合、代わりに lightning:radioGroup を使用します。

ui:inputRichText

lightning:inputRichText に置き換えます。

ui:inputSecret

password 型を使用する lightning:input に置き換えます。

ui:inputSelect

lightning:select または lightning:combobox に置き換えます。

ui:inputSelectOption

lightning:select または lightning:combobox に置き換えます。

ui:inputText

text 型を使用する lightning:input に置き換えます。

ui:inputTextArea

lightning:textarea に置き換えます。

ui:inputURL

url 型を使用する lightning:input に置き換えます。

ui:menu

lightning:buttonMenu に置き換えます。

ui:menuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:menuItemSeparator

lightning:menuDivider および lightning:buttonMenu に置き換えます。

ui:menuList

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:menuTrigger

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:menuTriggerLink

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:message

lightning:notificationsLibrary に置き換えます。

ui:outputCheckbox

checkbox 型を使用する lightning:input に置き換えて readonly を true に設定します。

ui:outputCurrency

currency に設定された style を使用する lightning:formattedNumber に置き換えます。

ui:outputDate

lightning:formattedDateTime に置き換えます。

ui:outputDateTime

lightning:formattedDateTime または lightning:formattedTime に置き換えます。

ui:outputEmail

lightning:formattedEmail に置き換えます。

ui:outputNumber

lightning:formattedNumber に置き換えます。

ui:outputPhone

lightning:formattedPhone に置き換えます。

ui:outputRichText

lightning:formattedRichText に置き換えます。

ui:outputText

lightning:formattedText に置き換えます。

ui:outputTextArea

lightning:formattedText に置き換えます。

ui:outputURL

lightning:formattedUrl に置き換えます。

ui:radioMenuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。


■次のイベントが非推奨になりました。

ui:menuFocusChange

lightning:buttonMenu に置き換えます。

ui:menuSelect

lightning:combobox に置き換えます。

ui:menuTriggerPress

lightning:buttonMenu に置き換えます。


本格的に開発開始する前に知れて良かったです。

SFDC:Lightningレコードページのフォローボタン非表示を試してみました

Lightningレコードページのフォローボタン非表示を試してみました。

f:id:tyoshikawa1106:20191112185624p:plain


フォローボタンはオブジェクトに対してフィード追跡機能を有効化すると表示されます。レコードに対してChatterでやりとりできるようにすると表示されるボタンです。

f:id:tyoshikawa1106:20191112185949p:plain


前からできたのかもしれませんが、こちらもアプリケーションビルダーで非表示にできるようになっていました。
f:id:tyoshikawa1106:20191112190611p:plain


Chatter機能を有効化しつつフォローボタンを非表示にできるのでレコードフォローの機能を利用したくない場合には便利そうです。
f:id:tyoshikawa1106:20191112190737p:plain

SFDC:関連リストのクイックリンクのヘッダーを非表示のオプションを試してみました

関連リストのクイックリンクの表示をスッキリさせるオプションを試してみました。関連リストのクイックリンクは通常の関連リストコンポーネントとは別にマウスオーバーで表示できるコンパクトなコンポーネントです。

f:id:tyoshikawa1106:20191112184722p:plain


個人的にお気に入りの機能のため多様しているのですが気づいたらオプションが追加されてました。(前からあったのかも)

f:id:tyoshikawa1106:20191112184958p:plain


チェックを付けるとヘッダー部分の「関連リストクリックリンク」のラベルが非表示になります。
f:id:tyoshikawa1106:20191112185105p:plain


表示領域が少なくなるので、ノートPCなど画面サイズが小さめのPCで作業するユーザが多い場合に使いやすくなると思いました。