Notes
HTML
<template>
<lightning-card title="Account List">
<template if:true={accounts}>
<template for:each={accounts} for:item="acc">
<lightning-record-view-form key={acc.Id} record-id={acc.Id} object-api-name="Account">
<lightning-layout multiple-rows>
<lightning-layout-item size="12" padding="around-small">
<lightning-output-field field-name="Name"></lightning-output-field>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small">
<lightning-output-field field-name="Industry"></lightning-output-field>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small">
<lightning-output-field field-name="Phone"></lightning-output-field>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small">
<lightning-output-field field-name="Type"></lightning-output-field>
</lightning-layout-item>
</lightning-layout>
</lightning-record-view-form>
<lightning-divider></lightning-divider>
</template>
</template>
<template if:false={accounts}>
<p class="slds-text-color_destructive slds-p-around_medium">No accounts found.</p>
</template>
</lightning-card>
</template>
JavaScript
import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
export default class AccountList extends LightningElement {
accounts;
@wire(getAccounts)
wiredAccounts({ error, data }) {
if (data) {
this.accounts = data;
} else if (error) {
console.error('Error fetching accounts:', error);
}
}
}
Meta XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="FormattedTimeLWC">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
Apex
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts() {
return [SELECT Id, Name, Industry, Phone, Type FROM Account LIMIT 10];
}
}
