LWC – 콤보박스

Salesforce LWC에서는 사용자가 지정된 옵션 목록에서 옵션을 선택할 수 있도록 하려면 콤보 상자를 사용합니다. 이 가이드에서는 콤보박스를 만드는 방법과 콤보박스가 지원하는 다양한 속성을 예제와 함께 설명합니다.

콤보 박스

기본적으로 콤보박스는 지정된 옵션 중에서 옵션을 선택하기 위한 입력을 제공하는 읽기 전용 필드입니다. Lightning-combobox 태그를 사용하여 이를 생성할 수 있습니다. 속성은 공백으로 구분된 속도입니다. 콤보박스를 생성하는 동안 필요한 몇 가지 속성에 대해 논의해 보겠습니다.

상표 – 콤보박스의 라벨(텍스트)을 지정하는 데 사용됩니다.
옵션 – 각 옵션은 '레이블' 및 '값' 속성을 사용합니다. 쉼표로 구분된 목록에 여러 옵션을 지정할 수 있습니다.

[ { 라벨: 라벨1, 값: 값1 }, ,,,];

자리 표시자 : 옵션을 선택하기 전에 사용자는 옵션과 관련된 정보를 알아야 합니다. 따라서 이 속성이 지정됩니다.
필수의 : 옵션을 필수로 선택해야 하는 경우도 있습니다. 이 속성을 지정하여 필수로 만들 수 있습니다.
장애가 있는 : 체크박스에서 해당 옵션을 선택하여 사용자를 차단할 수 있습니다. 이 속성은 콤보박스를 비활성화합니다.

통사론:

몇 가지 중요한 속성이 포함된 콤보박스를 만드는 방법을 살펴보겠습니다.

<번개-콤보박스

이름='이름'

라벨='라벨_이름'

값={value_from_the_option}

placeholder='도움말 텍스트'

옵션={List_of_options}

onchange={handleChange} >

사양:

콤보박스를 생성하고 작업하는 단계를 살펴보겠습니다.

JavaScript 파일에서 'getter' 메서드 내부에 레이블과 값이 포함된 옵션 목록을 만듭니다.

기본 옵션을 저장하는 변수를 만듭니다.

사용자가 UI에서 선택한 옵션을 저장하는 핸들 함수를 작성합니다.

HTML 파일에서 콤보박스를 생성하고 속성을 전달합니다. 또한 콤보박스의 옵션을 처리하는 onchange() 이벤트 핸들러를 전달해야 합니다. 'js' 파일에 생성된 'Handler' 함수를 사용합니다.

이 가이드에서 논의할 모든 예제에서 로직은 'js' 코드로 제공됩니다. 그런 다음 전체 'js' 코드가 포함된 스크린샷을 지정합니다.

예시 1:

Javascript 파일에 5개의 주제(세부 사항)가 포함된 콤보박스를 만듭니다. 기본값을 'JAVA'로 지정합니다. handlerSubjectsOnChange() 메서드에서 콤보박스를 처리합니다. 레이블과 함께 HTML 파일의 '값 및 옵션' 속성에 값과 세부 정보를 전달하고 구성 요소를 배포합니다.

firstExample.html

<템플릿>

<번개 카드 제목 = '주제 콤보박스' >

< div 수업 = 'slds-var-m-around_medium' >

<번개-콤보박스

상표 = '제목을 선택하세요:'

값 = { 값 }

옵션 = { 세부 }

변경시 = { HandleSubjectsOnChange } >< / 번개 콤보박스>

< br >

< 피 > 귀하의 주제: < 비 > {값} < / 비 >< / 피 >

< / div >

< / 번개카드>

< / 템플릿>

firstExample.js

// 기본값 생성 - 콤보박스의 경우 'JAVA'
값 = '자바' ;

// 주제 표시
얻다 세부 ( ) {
// 5개 과목
반품 [ { 상표 : '자바' , 값 : '자바' } ,
{ 상표 : '파이썬' , 값 : '파이썬' } ,
{ 상표 : 'HTML' , 값 : 'HTML' } ,
{ 상표 : '씨' , 값 : '씨' } ,
{ 상표 : 'C++' , 값 : 'C++' } ] ;
}

// 값을 설정하는 로직을 처리합니다.
HandleSubjectsOnChange ( 이벤트 ) {
이것 . 값 = 이벤트. 세부 사항 . 값 ;
}
}

전체 코드:

firstComponent.js-meta.xml

버전 = '1.0' ?>

= 'http://soap.sforce.com/2006/04/metadata' >

57.0 < / api버전>

<노출됨> 진실 < / 노출되어 있다>

<대상>

<대상> 번개__앱페이지 < / 대상>

<대상> 번개__레코드 페이지 < / 대상>

< / 대상>

< / LightningComponentBundle>

산출:

이 구성 요소를 개체의 '기록' 페이지에 추가합니다. HTML 파일에서는 단락 태그에 값을 표시합니다. 사용자가 옵션을 선택하면 굵은 글씨로 표시됩니다. 기본적으로 'JAVA'가 선택되어 구성 요소가 페이지에 렌더링된 후에 표시됩니다.

주제를 'C'로 선택하겠습니다. 'C'가 콤보 상자 아래에 반환됩니다.

예 2:

이 예에서는 캠페인 유형 선택 목록 값(캠페인 개체의)을 기반으로 다양한 구성 요소를 렌더링합니다.

캠페인 유형이 '회의'인 경우 텍스트를 반환하는 템플릿을 렌더링합니다. – 캠페인 상태: 계획됨
캠페인 유형이 '웹 세미나'인 경우 텍스트를 반환하는 템플릿을 렌더링합니다. – 캠페인 상태: COMPLETED
캠페인 유형이 '파트너'인 경우 텍스트를 반환하는 템플릿을 렌더링합니다. – 캠페인 상태: IN PROGRESS
캠페인 상태: 나머지 옵션에 대해서는 중단됨.

두 번째Example.html

<템플릿>

<번개 카드 제목 = '캠페인 유형' 상- 이름 = '표준:캠페인' >

< div 수업 = 'slds-var-m-around_medium' 스타일 = '높이:20px; 너비:400px' >

<템플릿 행운:if = { 캠페인 유형값. 데이터 } >

<번개-콤보박스 값 = { 값 }

옵션 = { 캠페인 유형값. 데이터 .값 }

변경시 = { 핸들변경 } >

< / 번개 콤보박스>

< / 템플릿>< br / >

< / div >

< br >< br >

<템플릿 행운:if = { 회의 } >

< 센터 > 캠페인 상태: < 비 >< 나 > 예정< / 나 >< / 비 > < / 센터 >

< / 템플릿>

<템플릿 행운:elseif = { 웹 세미나 } >

< 센터 > 캠페인 상태: < 비 >< 나 > 완료< / 나 >< / 비 > < / 센터 >

< / 템플릿>

<템플릿 행운:elseif = { 파트너 발 } >

< 센터 > 캠페인 상태: < 비 >< 나 > 진행 중< / 나 >< / 비 > < / 센터 >

< / 템플릿>

<템플릿 행운:else>

< 센터 > 캠페인 상태: < 비 >< 나 > 중단됨< / 나 >< / 비 > < / 센터 >

< / 템플릿>

< / 번개카드>

< / 템플릿>

secondExample.js

캠페인 개체(표준)를 CAMPAIGN으로 가져오고 여기에서 유형을 TYPE으로 가져옵니다. Lightning/uiObjectInfoApi에서 getPicklistValues 및 getObjectInfo를 가져옵니다. 유형 필드에서 사용할 수 있는 선택 목록 값을 가져옵니다. 이는 콤보박스의 옵션으로 활용됩니다. 다음은 handlerChange()에서 처리됩니다.

값 === 'Conference'인 경우 conferenceval 변수를 true로 설정하고 나머지 두 변수는 false로 설정합니다.
값 === “Webinar”인 경우 webinarval 변수를 true로 설정하고 나머지 두 변수는 false로 설정합니다.
값 === “Partners”인 경우 Partnerval 변수를 true로 설정하고 나머지 두 변수는 false로 설정합니다.
값이 주어진 옵션에 없으면 모두 false입니다.

수입 { 번개요소 , 길 , 철사 , API } ~에서 '운' ;

수입 캠페인: '@salesforce/schema/캠페인' ;

수입 유형: '@salesforce/schema/Campaign.Type' ;

수입 { getPicklist값 } ~에서 '번개/uiObjectInfoApi' ;

수입 { getObjectInfo } ~에서 '번개/uiObjectInfoApi' ;

내보내다 기본 수업 두 번째 예 연장하다 번개요소 {

@ 가치를 추적하다 ;

// 객체 가져오기
@ 철사 ( getObjectInfo , { objectApi 이름 : 운동 } )
객체정보 ;

// 캠페인 유형 가져오기 - 선택 목록
@ 철사 ( getPicklist값 , { 레코드 유형 ID : '$objectInfo.data.defaultRecordTypeId' , fieldApi 이름 : 유형 } )
캠페인 유형값 ;

회의 = 거짓 ;
웹 세미나 = 거짓 ;
파트너 발 = 거짓 ;
다른 = 거짓 ;

// 로직 처리
핸들변경 ( 이벤트 ) {
이것 . 값 = 이벤트. 표적 . 값 ;
만약에 ( 이것 . 값 === '회의' ) {
// 상태를 계획됨으로 표시
이것 . 회의 = 진실 ;
이것 . 웹 세미나 = 거짓 ;
이것 . 파트너 발 = 거짓 ;
}
또 다른 만약에 ( 이것 . 값 === '웨비나' ) {
// 상태를 완료로 표시합니다.
이것 . 웹 세미나 = 진실 ;
이것 . 회의 = 거짓 ;
이것 . 파트너 발 = 거짓 ;
}
또 다른 만약에 ( 이것 . 값 === '파트너' ) {
// 상태를 IN PROGRESS로 표시합니다.
이것 . 웹 세미나 = 거짓 ;
이것 . 회의 = 거짓 ;
이것 . 파트너 발 = 진실 ;
}
또 다른 {
// 상태를 IN ABOTED로 표시합니다.
이것 . 웹 세미나 = 거짓 ;
이것 . 회의 = 거짓 ;
이것 . 파트너 발 = 거짓 ;

}
}

}

secondComponent.js-meta.xml

산출:

유형 - '회의'. 따라서 상태는 '계획됨'입니다.

유형 – “웹 세미나”. 따라서 상태는 'COMPLETED' 입니다.

유형 – “파트너”. 따라서 상태는 '진행 중'입니다.

제공된 옵션에 유형이 없습니다. 따라서 상태는 'ABORTED'입니다.

예시 3:

이제 캠페인 기록을 옵션으로 사용하여 콤보박스를 만듭니다. 옵션을 선택하면 해당 캠페인 유형이 UI에 반환됩니다.

먼저 getCampaign() 메서드를 사용하여 Apex 클래스를 생성해야 합니다. 이 메소드는 ID, 이름, 유형 및 상태가 포함된 모든 캠페인 목록을 반환합니다.

캠페인 기록. apxc

공유가 포함된 공개 수업 캠페인 기록 {

@ Aura 활성화됨 ( 캐시 가능 = 진실 )

// 캠페인 목록을 가져옵니다.

공공의 공전 목록 < 운동 > get캠페인 ( ) {

반품 [ 아이디 선택 , 이름 , 유형 , 캠페인 상태 ] ;

}

}

thirdExample.html

<템플릿>

<번개 카드 제목 = '캠페인 유형' 상- 이름 = '표준:캠페인' >

< div 수업 = 'slds-var-m-around_medium' 스타일 = '높이:20px; 너비:400px' >

<번개-콤보박스 이름 = '운동'

상표 = '캠페인 이름 선택'

옵션 = { 캠페인 옵션 }

값 = { 값 }

변경시 = { 핸들온체인지 }

>

< / 번개 콤보박스>

< / div >< br >

< br >

< 피 > 이 캠페인의 캠페인 유형: < 비 > {값} < / 비 >< / 피 >

< / 번개카드>

< / 템플릿>

thirdExample.js

linkedcallback() 메소드 내에서 캠페인 목록을 가져오는 메소드를 지정해야 합니다. 'camps'라는 배열을 선언하고 결과를 캠페인 ID로 라벨을, 캠페인 유형으로 값을 저장합니다. 이 배열은 캠페인 이름에 대한 입력입니다(트랙 데코레이터를 사용하여 생성해야 함).
Campaignoptions() getter 메서드에서 캠페인 이름 배열을 반환합니다. 따라서 콤보박스는 이러한 옵션을 사용합니다.
Handleonchange() 핸들러 메서드에서 선택한 값을 설정합니다.

수입 { 번개요소 , 길 } ~에서 '운' ;

수입 다음에서 캠페인 가져오기 '@salesforce/apex/CampaignRecords.getCampaign' ;

내보내다 기본 수업 세 번째 예 연장하다 번개요소 {

값 = '' ;
@ 캠페인 이름 추적 = [ ] ;
얻다 캠페인 옵션 ( ) {
반품 이것 . 캠페인 이름 ;
}

// Apex의 캠프 배열에 옵션을 추가합니다.
// 라벨은 캠페인 이름이 됩니다.
// 값은 캠페인 유형이 됩니다.
연결된콜백 ( ) {
get캠페인 ( )

. 그 다음에 ( 결과 => {

캠프를 보자 = [ ] ;

~을 위한 ( ~였다 케이 = 0 ; 케이 < 결과. 길이 ; 케이 ++ ) {

캠프. 푸시 ( { 상표 : 결과 [ 케이 ] . 이름 , 값 : 결과 [ 케이 ] . 유형 } ) ;
}
이것 . 캠페인 이름 = 캠프 ;
} )

}

// 값 처리
핸들온체인지 ( 이벤트 ) {
이것 . 값 = 이벤트. 세부 사항 . 값 ;
}
}

산출:

레코드를 선택하고 유형을 살펴보겠습니다.

결론

속성과 예제를 사용하여 LWC에서 콤보박스를 만드는 방법을 배웠습니다. 먼저 값 목록이 포함된 콤보박스를 만들고 선택한 값을 표시했습니다. 다음으로 조건부 렌더링을 통해 선택한 값을 기반으로 HTML 템플릿을 렌더링합니다. 마지막으로 기존 Salesforce 레코드에서 콤보박스에 대한 옵션을 생성하고 관련 필드를 UI에 표시하는 방법을 배웠습니다.