LWC Live Examples. List of Records . Notifications. Map

EP.10

🪓 예제

---

1) getAccList

• 컨트롤러에서 쿼리한 결과를 화면에 출력
• for:each를 사용해서 여러개의 Account를 리스트로 출력함(for:each = 반복문)
  • for:each를 사용했을 때는 for:item이 필수. for:item에서 선언한 account가 accounts.data의 개별 데이터

• html

  <template>
      <lightning-card variant="Narrow" title="Account List" icon-name="standard:account">
          <div class="slds-p-around_medium">
              <template for:each={accounts.data} for:item="account">
                  <a href="#" key={account.Id}>
                      <lightning-layout>
                          <lightning-layout-item>
                              <p>
                                  Name : {account.Name}
                                  <br/>
                                  Phone : {account.Phone}
                              </p>
                          </lightning-layout-item>
                      </lightning-layout>
                  </a>
              </template>
          </div>
      </lightning-card>
  </template>

• js

  import { LightningElement, wire } from 'lwc';
  import getAccList from "@salesforce/apex/AccountController.getAccList";

  export default class GetAccountList extends LightningElement {
      @wire(getAccList) accounts;
  }

• Apex Controller

  public with sharing class AccountController {
      // public AccountController() {

      // }
      @AuraEnabled(cacheable=true)
      public static List<Account> getAccList(){
          List<Account> acc = [select Id, Name, Phone, Rating from Account ORDER BY CreatedDate];
          System.debug('# Account : ' + acc);
          return acc;
      }
  }

---

2) notificationLWC

(순서대로 Alert, Confirm, Prompt 클릭 후 닫았을 때 콘솔 로그)

• Async :
• Await :

• html

  <template>
    <lightning-card variant="Narrow" title="Notification" icon-name="standard:account">
        <lightning-button label="Alert" title="Non-primary action" onclick={handleAlert} class="slds-m-left_x-small"></lightning-button>
        <lightning-button label="Confirm" title="Non-primary action" onclick={handleConfirm} class="slds-m-left_x-small"></lightning-button>
        <lightning-button label="Prompt" title="Non-primary action" onclick={handlePrompt} class="slds-m-left_x-small"></lightning-button>
        
    </lightning-card>
</template>

• js

import { LightningElement } from 'lwc';
import LightningAlert from "lightning/alert";
import LightningPrompt from "lightning/prompt";
import LightningConfirm from "lightning/confirm";

export default class NotificationLWC extends LightningElement {

    async handleAlert() {
        await LightningAlert.open({
            message : "Sample Alert Message",
            theme : "error",
            label : "Alert Header"
        }).then(() => {
            console.log('### Alert Closed');
        })
    }

    async handleConfirm() {
        const result = await LightningConfirm.open({
            message : "Sample Confirm Message", 
            theme : "Success",
            label : "Confirm Header"
        });
        console.log('### Result', result);
    }

    async handlePrompt() {
        await LightningPrompt.open({
            message : "Sample Prompt Message", 
            theme : "error",
            label : "Prompt Header"
        }).then((result) => {
            console.log('### Result', result);
        });
    }
}

---

3) mapLWC
🔗 lightning-map 속성

• html

  <template>
      <lightning-map map-markers={mapMarkers} show-footer></lightning-map>    
  </template>

• js

  import { LightningElement } from 'lwc';

  export default class MapLWC extends LightningElement {

      mapMarkers;
      connectedCallback() {
          this.mapMarkers = [
              {
                  location : {
                  City : "Ajmer",
                  Country : "India",
                  PostalCode : "305001",
                  Stage : "RJ",
                  Street : "Ajay Nagar"
                  },
              title: "Salesforce Bolt",
              description : "I'm here",
              icon : "standard:account"
              },
              {
                  location : {
                  City : "Seoul",
                  Country : "Korea",
                  PostalCode : "09876",
                  Stage : "RJ",
                  Street : "Ajay Nagar"
                  },
              title: "Helloooo MapLWC",
              description : "Success!",
              icon : "standard:account"
              },
          ]
      }
  }