Increase Salesforce Overlays With The Lightning:backgroundUtilityItem Interface



November 19, 2018と少々古いブログを見つけました。ちょっと面白そうです。


+ [Increase Salesforce Overlays With The Lightning:backgroundUtilityItem Interface](https://cloudmatters.blog/category/lightning/)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/5ffceb41-8495-671d-0d43-06716b8989a4.png)

さあ、幅 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 ハックが効果的に適用されました。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/fe10fa9f-3cf3-e344-7ce0-f5bdbfe612e8.png)

フローに 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 アプリのユーティリティ項目リストに追加するだけです。アプリがロードされるとすぐにロードされます。 


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/9e8d9c97-30af-aecf-bd85-fe9f9cb229e9.png)


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

# 参考資料

+ [Build Lightning Styled Screen Flows that Users will Love](https://unofficialsf.com/build-lightning-styled-screen-flows-that-users-will-love/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/9fcfd96f-e2d0-2d4c-8611-7dea92932db4.png)

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