{"id":539,"date":"2024-06-05T14:29:53","date_gmt":"2024-06-05T14:29:53","guid":{"rendered":"https:\/\/beinthecloud.biz\/sfdc\/1\/?p=539"},"modified":"2024-06-05T14:29:53","modified_gmt":"2024-06-05T14:29:53","slug":"lightning-web-component-lwc-to-display-a-list-of-accounts","status":"publish","type":"post","link":"https:\/\/beinthecloud.biz\/sfdc\/1\/2024\/06\/05\/lightning-web-component-lwc-to-display-a-list-of-accounts\/","title":{"rendered":"Lightning Web Component (LWC) to display a list of accounts"},"content":{"rendered":"\n<p>HTML (accountList.html):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template>\r\n    &lt;lightning-card title=\"List of Accounts\">\r\n        &lt;div class=\"slds-m-around_medium\">\r\n            &lt;template if:true={accounts}>\r\n                &lt;template for:each={accounts} for:item=\"account\">\r\n                    &lt;p key={account.Id}>{account.Name}&lt;\/p>\r\n                &lt;\/template>\r\n            &lt;\/template>\r\n            &lt;template if:false={accounts}>\r\n                &lt;p>No accounts found&lt;\/p>\r\n            &lt;\/template>\r\n        &lt;\/div>\r\n    &lt;\/lightning-card>\r\n&lt;\/template>\r\n<\/code><\/pre>\n\n\n\n<p>JavaScript (accountList.js):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { LightningElement, wire } from 'lwc';\r\nimport getAccounts from '@salesforce\/apex\/AccountController.getAccounts';\r\n\r\nexport default class AccountList extends LightningElement {\r\n    accounts;\r\n\r\n    @wire(getAccounts)\r\n    wiredAccounts({ error, data }) {\r\n        if (data) {\r\n            this.accounts = data;\r\n            this.error = undefined;\r\n        } else if (error) {\r\n            this.error = error;\r\n            this.accounts = undefined;\r\n        }\r\n    }\r\n}\n<\/code><\/pre>\n\n\n\n<p>Apex Controller (AccountController.cls):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public with sharing class AccountController {\r\n    @AuraEnabled(cacheable=true)\r\n    public static List&lt;Account> getAccounts() {\r\n        return &#91;SELECT Id, Name FROM Account LIMIT 10];\r\n    }\r\n}\r\n<\/code><\/pre>\n\n\n\n<p>This Lightning web component retrieves a list of accounts from the server-side Apex controller method <code>getAccounts<\/code> using a wire adapter and displays them in a lightning-card component.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML (accountList.html): JavaScript (accountList.js): Apex Controller (AccountController.cls): This Lightning web component retrieves a list of accounts from the server-side Apex controller method getAccounts using a wire adapter and displays them in a lightning-card component.<\/p>\n","protected":false},"author":1,"featured_media":535,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-content\/uploads\/2024\/06\/Learning-Apex-Salesforce.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/posts\/539"}],"collection":[{"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/comments?post=539"}],"version-history":[{"count":1,"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/posts\/539\/revisions"}],"predecessor-version":[{"id":540,"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/posts\/539\/revisions\/540"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/media\/535"}],"wp:attachment":[{"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/media?parent=539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/categories?post=539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beinthecloud.biz\/sfdc\/1\/wp-json\/wp\/v2\/tags?post=539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}