#LWC30 discussing

📢 【Trailhead Academyより新コースのご連絡】

「Lightning Web コンポーネントプログラミング [前編] [後編]」

Trailhead Academyより新しいコース開始のお知らせです。 

本コースでは、Lightning Web コンポーネント（LWC）を作成して、Lightning ExperienceとSalesforce モバイルで動作するカスタムアプリケーションの開発方法を学習します。

フローや動的フォームを活用すれば、コードを書かなくても効率的なシステム作りを行うことが可能ですが、複雑なビジネス要件を完遂し、標準機能の限界を超える高度なUIを実現するには、プロフェッショナル開発の標準である Lightning Web コンポーネント（LWC） のスキルが不可欠です。

単なる機能紹介にとどまらず、現場で戦えるエンジニアを育成するための体系的なカリキュラムになっています。

ぜひご受講を検討ください。

コース名＆お申し込み：

• Lightning Web コンポーネントプログラミング [前編] (DEX602-1) (期間：3日)：お申し込み
• Lightning Web コンポーネントプログラミング [後編] (DEX602-2) (期間：2日)：お申し込み

受講対象者：

• カスタム Lightning Web コンポーネントと複数の Salesforce 環境で動作するアプリケーションを開発したい独立系ソフトウェアベンダー（ISV）および Web アプリケーション開発者
• 「Salesforce 認定 JavaScript デベロッパー」資格の取得を目指す方

初回開催日程：

• [前編] 2026年7月1日-3日
• [後編] 2026年7月6日-7日

@* カスタマーサクセス日本 *

#LWC

lightning-record-edit-formで数値(18,0)の桁数超過が検知されず保存される問題 

レコード新規作成・編集用のLWCを作成しています。 

lightning-record-edit-formを使用し、form.submit(fields)で保存しています。 

項目はlightning-input-fieldを使用しています。 

数値項目（例：数値(18,0)）に対して18桁を超える非常に大きい値を入力した場合、 

通常は以下のようなシステムエラーが表示されます。 

「項目名 : 数値項目で有効な範囲を逸脱した値: 数値 1E+42 は大きすぎます。18 桁、小数点以下第 0 位以下の値を入力してください。 」 

しかし、特定のパターンの場合のみ、エラーにならず、そのまま保存されてしまいます。 

保存後の値は入力値とは異なる値に変換されています。 

例： 

入力値：100000000000000000000079　→　保存される値：200376420520689000 

入力値：1000000000000000000000000000000000000000000079　→　保存される値：802379605485813000 

標準のレコード作成ではこのような動作は発生しません。 

LWC + lightning-record-edit-form を使用する場合、 

標準画面と同様に桁数を制御する方法はありますでしょうか。 

原因や解決方法をご存知でしたら教えていただけますと幸いです。  

 LWC lightning-select class Bug: slds-has-error in Log But No Red Border

I'm developing a Lightning Web Component (LWC) with an inline lightning-select picklist field (projectDetails) in a data table, where I validate required fields before submission. 

Core Issue

When users:

1. First submit the form with an empty projectDetails value (for selected rows) → the validation logic correctly flags the error, sets item.projectDetailsClass = 'slds-has-error', and the red error border appears as expected.
2. Then select a valid value for projectDetails (clearing the error) → the red border disappears (correct behavior).
3. Reselect/clear the projectDetails value to empty again and click submit → the validation logic still detects the empty value (confirmed via console.log showing hasDetailsError = true and projectDetailsClass: "slds-has-error"), but the red error border does NOT reappear on the lightning-select field.

Final Fix

The issue was resolved by binding both onblur and onchange to the same handleBlur handler

(which syncs the field value to the component’s data state), ensuring all user interactions (value change + focus loss) update the state in real time—even when reselecting empty values. 

<lightning-select
	label="企画内容"
	name="projectDetails"
	value={item.projectDetails}
	options={projectDetailsPickListValues}
	data-item-id={item.id}
	variant="label-hidden"
	onblur={handleBlur}
	onchange={handleBlur}
	class={item.projectDetailsClass}
></lightning-select>

Hi I am facing an issue while creating an Movie search app using the APIs.

1.⭐ https://m.media-amazon.com

  2.⭐ https://www.omdbapi.com

import { LightningElement } from 'lwc';

const DELAY=300;

export default class MovieSearch extends LightningElement {

    selectedType="";

    selectedsearch="";

    loading=false;

    selectedPageNo="1";

    delayTimeout;//to store the timeout delay

    // search filter for movies .....

    get typeoptions(){

        return[

        {label:"None",value: ""},

        {label:"Movie",value: "movie"},

        {label:"Series",value: "series"},

        {label:"Episode",value: "episode"}

    ];

    }

//here we are destructuring the values....

    handleChange(event)

    {

        let {name,value}=event.target;

        this.loading=true;

        if(name ==="type")

        {

            this.selectedType=value;

        }

        else if(name ==="search")

        {

          this.selectedsearch=value;

        }

        else if(name==="pageno")

        {

            this.selectedPageNo=value;

        }

        //debouncing process--> where we can delay the execution process for sometime that we want...

        clearTimeout(this.delayTimeout)// this will clears the existing timeout...

        this.delayTimeout =setTimeout(()=>{

           this.searchMovies();

        },DELAY);//always define the constants in Capital letters as a best practice.....

    }

//this method will search for the entered movies

// here we need to use the fetch method.

// Fetch method always returns the promise .

//to handle the promise we need to uise asyn and await.

   async searchMovies()

      {

        //how to put the url..

        // http://www.omdbapi.com/?i=tt3896198&apikey=ac0b1a0e

        //const URL='https://www.omdbapi.com/?s=${enteredValue}&type=${this.selectedType}&page=${this.pageNumber}&apikey=ddb0ceaa'---> Api key we need to enter from our mail;

        const url=`https://www.omdbapi.com/?s=${this.selectedsearch}&type=${this.selectedType}&page=${this.selectedPageNo}&apikey=ddb0ceaa`;// by using that url we are making API call

        const res=await fetch(url);//here we are calling the API

        const data=await res.json();//herte we atre storing the response in the property of a data by using the json.

        console.log("Movies Search Output",data);

      }

}

HTML:

<template>

   <!--Filter Section for the movies--> 

  <div>

<lightning-layout horizontal-align="center">

    <lightning-layout-item 

    padding="around-small"

    size="3">

    <!--Filter Section==> for the  type of movies(movie,series,episode)-->

    <lightning-combobox

            name="type"

            label="Type"

            value={selectedType}

           placeholder="Select Type"

            options={typeoptions}

            onchange={handleChange} ></lightning-combobox>

 </lightning-layout-item>

    <lightning-layout-item 

    padding="around-small" 

    size="7">

    <!--Filter Section{ by using the name we can search here }-->

    <lightning-input

            name="enter-search"

            label="Enter Search Item"

            placeholder="Search for Movie/Series"

            type="search"

            is-loading={loading}

            onchange={handleChange}

        ></lightning-input>

    </lightning-layout-item>

  <!--PAge Number Code-->

    <lightning-layout-item 

    padding="around-small" 

    size="2">

    <lightning-input 

    type="number" 

    name="pageno" 

    label="Page"

    onchange={handleChange}

    value={selectedPageNo}

    field-level-help="Range 1-100"

    min="1"

    max="100"

    step="1" 

    message-when-range-underflow="Minimum value is 1"

    message-when-range-overflow="Maximum value is 1">

    </lightning-input>

    </lightning-layout-item>

</lightning-layout>

  </div>

   <!--Display Section-->

   <div>

   </div>

</template> #Salesforce Developer #Lightning Web Components #Lightning Experience #Integration #Salesforce Developer #LWC

I am facing the below issue while taking up challenge "Create a Models API Lightning Web Component" under 'Agentblazer Legend - Get Started with the Models API' 

- Performed all the steps mentioned in the trail but could not find the Custom LWC component 'modelsAPIDashboard' under Custom components section of Lightning App Builder. 

Component is exposed to 'true' in js-meta.xml file.

Please help me with this issue. 

Thank You.

Transform Your Dev Flow with Agentforce Vibes: Agentforce NOW Ask Me Anything November 2025

Are you ready to build more while writing less code, accelerating the delivery of high-quality, scalable applications? 

In the November edition of our monthly  #AMA Session, our product experts @Vivek Chawla, @Jeff Douglas and @John Belo, hosted by developer advocate @Charles Watkins, are answering all your questions about Agentforce Vibes.  

Agentforce Vibes is an #AI coding agent designed to maximize developer efficiency. It directly reduces the time and resource drain of writing, debugging, and deploying code by offering comprehensive assistance entirely via natural language.  

Developers can instruct the system to generate, refactor, and explain code, allowing them to drastically reduce time spent on repetitive or complex tasks. By managing the boilerplate, Agentforce Vibes ensures developers can maintain their focus on core application logic.

In this session, our experts will cover topics like:  

• Generating #Apex and #LWC code using natural language
• Accelerating project setup and deployment using MCP-enabled vibe coding agents
• Following a governed release management process with #Devops MCP

Register here: https://www.linkedin.com/events/7381734198459637760/