Skip to main content
欢迎参加 3 月 5 日至 6 日在旧金山举行的 TDX AI 代理时代开发者大会,或通过 Salesforce+ 参与。立即注册

Render and Preview the Contact List

Follow Along with Trail Together

Want to follow along with an expert as you work through this step? Take a look at this video, part of the Trail Together series.

(This clip starts at the 10:45 minute mark, in case you want to rewind and watch the beginning of the step again.)

Render the Contact List

  1. Add the following code on a new line after the comment <!-- Contact list goes here -->:
    <lightning:datatable data="{! v.Contacts }" columns="{! v.Columns }" keyField="Id" hideCheckboxColumn="true"/>
    A lightning:datatable is another Base Lightning Component that will display the list of contacts.
  2. Select File | Save.
  3. Click the MyContactListController.js tab.
  4. Update the myAction function with the following code on a new line above the var action line:
    component.set("v.Columns", [
        {label:"First Name", fieldName:"FirstName", type:"text"},
        {label:"Last Name", fieldName:"LastName", type:"text"},
        {label:"Phone", fieldName:"Phone", type:"phone"}
    ]);
    The datatable component uses the values stored in the Columns attribute to determine the number of columns to display.
  5. Select File | Save.
  6. Refresh the Account page in your org.

Summary

Congratulations! You have created your first Lightning component. Now any admin can add your component to their org to display contacts for an account. Other developers can also use your component instead of writing their own code.

验证步骤

+100 分

您将在您自己的实践组织中完成此项目。单击启动以开始,或单击您的组织的名称以选择不同的组织。

在 Salesforce 帮助中分享 Trailhead 反馈

我们很想听听您使用 Trailhead 的经验——您现在可以随时从 Salesforce 帮助网站访问新的反馈表单。

了解更多 继续分享反馈