LWC
-
lwc 확인 모달 2가지 스타일 ( lwc confirmation modal 2 styles )LWC 2024. 4. 27. 21:18
1. LightningConfirmimport LightningConfirm form 'lightning/confirm';LightningConfirm.open({메시지, 변수, 라벨, 테마 등}) import LightningConfirm from 'lightning/confirm';export default class RestApi_OrderProcess extends LightningElement { async sendOrder(){ const confirmation = await LightningConfirm.open({ message: '정말 주문하시겠습니까?', variant: 'header', //headerless ..
-
LWC SFDC 필드 레코드 페이지 처럼 표시하기 ( Display like SFDC field record page in LWC )LWC 2024. 4. 12. 13:21
1. 개체 가져오기 및 objectApiName 설정 // js파일 import MDE_Document__c from '@salesforce/schema/MDE_Document__c'; export default class Zz_Clvs_MDE_Document_Details extends LightningElement { @api recordId; objectApiName = MDE_Document__c; } 2. 보여줄 필드 가져오기 및 fields[ ] 세팅 // js파일 import Contract__c from '@salesforce/schema/MDE_Document__c.Contract__c'; import Requester__c from '@salesforce/schema/MDE_Docume..
-
DataTable in Lightning Web Component (LWC)LWC 2024. 4. 6. 00:28
1. 이란?LWC의 DataTable 구성 요소는 Salesforce에서 표 형식 데이터를 표시하고 상호 작용하는 데 필수적인 도구 2. datatable에서 보여줄 List와 Columns 생성 2-1 : data List 생성 //js파일@track data = []; connectedCallback() { const data = [ { id:'123', TemplateTitle__c:'공급계약서', TemplateId__c:' tmplate01'}, { id:'456', TemplateTitle__c:'후지급계약서', TemplateId__c:' tmplate02'} ] this.data = data; ..
-
lwc 페이지 리다이렉트 방법 - NavigationMixin, widow.location.href ( How to redirect lwc page - NavigationMixin, widow.location.href )LWC 2024. 4. 5. 15:02
1. NavigationMixin 1-1 : import { NavigationMixin } from 'lightning/navigation'; /* js 파일 */ import { LightningElement,wire, track, api } from 'lwc'; import { NavigationMixin } from 'lightning/navigation'; 1-2 : extends NavigationMixin(LightningElement) { ... } export default class zz_clvs_MDE_Template_Create extends NavigationMixin(LightningElement) { .... } 1-3 : this[NavigationMixin.Navigate]..
-
lwc for:each 에서 index 활용하는 방법 - How to use index in lwc for:eachLWC 2024. 3. 27. 22:42
1. LWC 반복문 2. 추가 3. 반복되는 행에 index 및 event 부여 data-index={인덱스} onclick = {이벤트} {pli.Name} {pli.UnitPrice} 4. event로 부여한 index 가져오기 및 활용 index 체크 -> const index = event.target.dataset.index; index 활용 -> this.리스트[index]; //js파일 addOrderList(event){ const index = event.target.dataset.index; co..
-
LWC 성공, 실패, 에러 알람 띄우기 (ShowToast) - Display success, failure, and error alarm messagesLWC 2024. 3. 19. 22:26
1. import {ShowToastEvent} 및 showToast 메서드 생성 JS 파일 import { ShowToastEvent } from 'lightning/platformShowToastEvent'; showToast(title, message, variant){ ... } showToast 메서드 호출 import { ShowToastEvent } from 'lightning/platformShowToastEvent'; //1번 export default class zz_clvs_MDE_Template_Create extends LightningElement { //취소버튼 클릭 시 전자계약 템플릿 개체 목록보기 페이지로 이동 returnListVeiw(event){ var titleInp..
-
lwc 로딩 중 아이콘 화면에 표시하기 (Spineer) - Displaying icon on screen while loading LWCLWC 2024. 3. 19. 22:21
1. 를 사용하면 된다. 2. 작업예시 //JS파일 import { LightningElement, track } from 'lwc'; export default class MyComponent extends LightningElement { @track isLoading = false; // 백엔드 작업을 수행하는 메서드 handleBackendWork() { // 작업 중인 상태를 true로 설정하여 작업 중 아이콘을 화면에 보여줌 this.isLoading = true; // 백엔드 작업 수행 // (예: Apex 호출, 비동기 작업 등) // 작업이 완료되면 작업 중인 상태를 false로 설정하여 아이콘을 감춤 this.isLoading = false; } } 3. developer 라이브러리 참..
-
LWC 컴포넌트 url로 호출하는 방법 - How to call with LWC component urlLWC 2024. 3. 18. 21:46
1. 결론 LWC 컴포넌트를 URL로 직접 호출하는 것은 불가능하다. Salesforce 플랫폼의 보안 및 아키텍처 제한으로 인해 지원되지 않습니다. 2. LWC 표시 방법 Screen Flow를 활용하여 LWC 호출하여 표시 Visualforce 페이지 내에서 LWC 컴포넌트 표시 Lightning Page에서 LWC 구성요소 추가하여 표시 Aura Component를 활용하여 LWC 호출하여 표시 3. URL로 LWC 보여주는 방법 - Aura 컴포넌트 랩핑 동작원리 URL로 AuraComponent를 호출하고 해당 AuraComponent에서 LWC 호출하여 표시 구현 aura component 생성 aura.cmp파일에서 implements 설정 및 lwc 컴포넌트 호출 aura.cmp파일에서 L..