ざっと和訳

グーグルさんですよ。私は外国語はさっぱりわかりません。

うーん…これをブログに書いたほうがいいでしょうか？わかりました、それでは行きましょう。おそらく「自己責任で」という大きな免責事項を入れるべきでしょう。最近、伝統的なクイックアクションとして起動されたフローを開発中にばかにしました。目標は、クイックアクションのオーバーレイの幅を増やすことでした。最近、CSS ハックを使用して Lightning コンポーネントのクイックアクションの幅を広げることができたので、フローにも試してみようと思いました。

さあ、幅 70%

基本的に、私がなんとかできたのは、静的 CSS リソースを作成し、 ltng:require/ タグを使用してそれを読み込むことです。

<ltng:require styles="{!$Resource.popupCSS}"/>

PopupCSS 静的リソースには CSS ハックが含まれています (そうです、本に反する ! important を使用しています…)。

やはり!importantは禁じ手なのかな

.slds-modal__container{
     max-width: 70% !important;
     width: 70% !important;
 }

この場合、CSS ハックにより、クラス「slds-model__container」によって識別されるモーダルウィンドウの幅が、使用可能な画面の領域の 70% に増加します。

これで、任意のカスタム Lightning Quick Action Lightning コンポーネントで問題なく動作するようになりました。また、popupCSS リソースは、それが指定されている Lightning コンポーネントの DOM 内にのみダウンロードされるため、ロッカーでも安全です。いいね。

ここで、フロークイックアクションのモーダルダイアログに戻ります。 ltng:require/ タグを別の Lightning コンポーネント内でラップしました。

<aura:component implements="lightning:availableForFlowScreens" description="Flow component to embed a named CSS static resource">
    <ltng:require styles="{!$Resource.popupCSS}"/>
</aura:component>

フロー固有のインターフェース「lightning:availableForFlowScreens」を使用して、フロー内で有効にします。そしてなんと、このコンポーネントをフローの最初の画面に埋め込んだ瞬間に、CSS ハックが効果的に適用されました。

フローに CSS ハックを含める…

　上記は昔のバージョンのフローだな。今のバージョンではどうするんだろう

うーん…これはうまくいきます。ただし、アプリが読み込まれると、CSS ハックがアプリ内のあらゆる場所に適用されるという「副作用」があります。すべてのダイアログ (レコードの編集、新しいレコードなど) は 70% の幅を占めます。

そこで私は、デフォルトで CSS ハックを有効にするという次の「実験」をすることになりました。そして、何だと思いますか？ Winter '19「lightning:backgroundUtilityItem」Lightning コンポーネントインターフェースはまさにそれを行います。 lightning :backgroundUtilityItemインターフェースでは次のことが可能です。

これを使えば標準のテーマをハッキングできるかもしれない

「…アプリレベルのコンポーネントとして使用されるコンポーネント。アプリの読み込み時に作成され、アプリ UI で自身をレンダリングせずにコードを実行します。」

<aura:component implements="lightning:backgroundUtilityItem" description="Popup Width Background Utility Component">
    <c:PopupCssResourceComp/>
</aura:component>

完了したら、Lightning アプリのユーティリティ項目リストに追加するだけです。アプリがロードされるとすぐにロードされます。

繰り返しますが、免責事項に注意してください。私はこれを「運用」環境でテストしていませんが、アプリ全体に影響を与えるでしょう。それでも、実験するということは学ぶということですよね？

参考資料

Build Lightning Styled Screen Flows that Users will Love

Summer '24 リリース以降、Salesforce は、将来の UI 変更 (セーフハーバー) をサポートするために、Lightning コンポーネント、Salesforce Lightning Design System (SLDS) スタイル、およびカスタムプロパティの内部実装を変更しています。