LWC コーディングサンプル




+ [I need examples for lightning datatable and the datacell should be a dropdown to select](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007UtHzm)
+ [Export data to CSV using LWC and APEX](https://trailhead.salesforce.com/en/trailblazer-community/feed/0D54S00000FT3a9)
+ [How to use openTab() in a LWC placed in Utility Bar?](https://trailhead.salesforce.com/en/trailblazer-community/feed/0D54S00000FXeNH)
+ [LightningWebセキュリティと外部ライブラリ](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000HEBMG)
+ [lightning-record-edit-formとlightning-input-fieldをそれぞれtr,tdタグで囲う方法について](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000O7fNd)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/0d7a0e46-3905-583a-2a21-1b012296d309.png)

:::note
調べてみると似たような現象の解説がありますね。

LWCでテーブルの行コンポーネントがうまく表示されなかったので、display:table-row;した
https://zenn.dev/hrk623/articles/fa0770aabccb26
:::

+ [lightning-datatableでmin-column-widthとcolumn-widths-mode='auto'を指定時、列に余白が生じる](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000OqTlF)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/bcd77ada-16fa-afb3-4190-65ca21f134fa.png)

+ [lwcで生のhtmlを追加するときにiframeのallow属性などが消えてしまう](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007A2P4j)

:::note
以下に回避策が説明されています。参考になると思います。

Is attribute 'allowfullscreen' of iframe unavailable in Lightning component?
https://salesforce.stackexchange.com/questions/161892/is-attribute-allowfullscreen-of-iframe-unavailable-in-lightning-component
:::

+ [Importing Functions from Class imported as Static Resource](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007BIauM)

+ [【LWC】改良された条件付きディレクティブについて](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007FUp18)

:::note
lwc:if={!condition}と思ったのですが... 違うみたいですね。
何やらサポートされて無さそうな感じです。

what if we want to render if the flag is false? i am trying to set it lwc:if={!condition} OR lwc:if={condition == false} but it does not work

You will have to create yet another getter function in JavaScript.

https://salesforce.stackexchange.com/questions/327591/is-it-possible-to-use-expressions-in-iftrue-or-iffalse-tag-in-lwc

Complex expressions like !condition or object?.property?.condition aren’t supported. To evaluate complex expressions, use a getter in your JavaScript class.

https://www.apexhours.com/conditional-rendering-in-lwc-using-lwcif-and-lwcelse/
:::

+ [「lightning-progress-indicator」でstepの下にテキストを表示したい。](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007erNCI)

:::note
Lightning Design Systemを見てみると、Step 1 - Activeのテキスト文字のところの属性がslds-assistive-textとして定義されているので、<lightning-progress-indicator type="base">でも同じかもしれません。

https://www.lightningdesignsystem.com/components/progress-indicator/

```
<div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <div class="slds-progress__marker" tabindex="0">
        <span class="slds-assistive-text">Step 1 - Active</span>
      </div>
    </li>
    <li class="slds-progress__item">
      <div class="slds-progress__marker" tabindex="0">
        <span class="slds-assistive-text">Step 2 </span>
      </div>
    </li>
```

slds-assistive-text、スクリーン リーダーが非表示のテキストを読み取れるようになります。このクラスは通常、テキストの代わりに画像を表示するアイコンやその他の UI 要素に使用されます。

https://www.lightningdesignsystem.com/utilities/visibility/

色を変えたいという質問があるのですが、回答としては独自にコンポーネントを作ることを提案されているので今回も独自コンポーネントになるのではないでしょうか。

How to change the color of lightning-progress-indicator for type="path"

https://salesforce.stackexchange.com/questions/407575/how-to-change-the-color-of-lightning-progress-indicator-for-type-path
:::