November 19, 2018と少々古いブログを見つけました。ちょっと面白そうです。
ざっと和訳
グーグルさんですよ。私は外国語はさっぱりわかりません。
うーん…これをブログに書いたほうがいいでしょうか？わかりました、それでは行きましょう。おそらく「自己責任で」という大きな免責事項を入れるべきでしょう。最近、伝統的なクイック アクションとして起動されたフローを開発中にばかにしました。目標は、クイック アクションのオーバーレイの幅を増やすことでした。最近、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 アプリのユーティリティ項目リストに追加するだけです。アプリがロードされるとすぐにロードされます。
繰り返しますが、免責事項に注意してください。私はこれを「運用」環境でテストしていませんが、アプリ全体に影響を与えるでしょう。それでも、実験するということは学ぶということですよね？
参考資料
