学习目标
完成本单元后，您将能够：
- 描述SLDS数据表和表单组件如何工作。
- 使用JavaScript远程对象构建包含动态数据的列表视图页面。
将数据添加到混合
让我们面对它，Web应用程序是不是很令人兴奋，除非它们包含一些数据。这个单元是关于使我们的列表视图是真实的，并使用开发者组织的一些示例数据。
我们将使用JavaScript Remote Objects访问Salesforce数据，但您也可以使用JavaScript Remoting。请注意，设计系统尚不支持Apex标签，但Visualforce可视化设计考虑事项上的Trailhead单元解释了遗留代码样式的选项，使其看起来像新的Lightning UI。
本单元中的JavaScript不在设计系统的范围之内，但它有助于将我们的一些关键组件生命化并展示它们的使用方式。再加上它会让事情变得更有趣。
数据表组件
数据表组件是用于使用Lightning UI样式显示表格数据的HTML表格的增强版本。数据表是通过将slds-table类应用于<table>标签而创建的。使用slds-table-bordered类来应用边界。
这是一个包含两列和一个标题行的示例表。您可以看到，其应用了设计系统类的熟悉的HTML标记。再次没有任何CSS可以看到。不用担心输入，下一节我们将使用Salesforce数据动态填充真实的数据表。
<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover">
<thead>
<tr class="slds-text-heading--label">
<th scope="col">Account ID</th>
<th scope="col">Account name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">123</th>
<td>Account 1</td>
</tr>
<tr>
<th scope="row">456</th>
<td>Account 2</td>
</tr>
</tbody>
</table>用动态数据填充数据表
正如我们上面提到的那样，在这个版本中，设计系统不支持内置的Visualforce组件 – <apex：*>，<chatter：*>以及其他您熟悉和喜欢的组件 – 用于布置页面和访问数据。这一点很重要。不要指望将设计系统应用到您的传统Visualforce页面，并让他们立即转化为互联网上最美丽的用户界面。
目前，我们建议使用远程对象，JavaScript Remoting或REST API从基于Design System标记的Visualforce页面访问Salesforce数据。本教程中的示例将使用远程对象。我们在这里专注于设计系统，所以虽然我们将提供完整的代码，但我们不打算深入讨论远程对象部分。如果您想了解有关这些数据访问技术的更多信息，请参阅以下资源。
我们走吧。摇动你的手来预热 – 是时候编码了。使用名称Trailhead_SLDS_Listview_Data克隆您的列表视图页面作为新的Visualforce页面。然后通过在</ head>和<body>标记之间插入以下代码，将Salesforce组织的客户记录连接为远程对象：
</head>
<apex:remoteObjects>
<apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>
</apex:remoteObjects>
<body>
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- 客户列表 -->
<div id="account-list" class="slds-p-vertical--medium"></div>
<!-- / 客户列表 -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
<!-- JAVASCRIPT -->
<script>
(function() {
var account = new SObjectModel.Account();
var outputDiv = document.getElementById('account-list');
var updateOutputDiv = function() {
account.retrieve(
{ orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
function(error, records) {
if (error) {
alert(error.message);
} else {
// create data table
var dataTable = document.createElement('table');
dataTable.className = 'slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover';
// add header row
var tableHeader = dataTable.createTHead();
var tableHeaderRow = tableHeader.insertRow();
var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);
tableHeaderRowCell1.appendChild(document.createTextNode('Account name'));
tableHeaderRowCell1.setAttribute('scope', 'col');
tableHeaderRowCell1.setAttribute('class', 'slds-text-heading--label');
var tableHeaderRowCell2 = tableHeaderRow.insertCell(1);
tableHeaderRowCell2.appendChild(document.createTextNode('Account ID'));
tableHeaderRowCell2.setAttribute('scope', 'col');
tableHeaderRowCell2.setAttribute('class', 'slds-text-heading--label');
//建立表体
var tableBody = dataTable.appendChild(document.createElement('tbody'))
var dataRow, dataRowCell1, dataRowCell2, recordName, recordId;
records.forEach(function(record) {
dataRow = tableBody.insertRow();
dataRowCell1 = dataRow.insertCell(0);
recordName = document.createTextNode(record.get('Name'));
dataRowCell1.appendChild(recordName);
dataRowCell2 = dataRow.insertCell(1);
recordId = document.createTextNode(record.get('Id'));
dataRowCell2.appendChild(recordId);
});
if (outputDiv.firstChild) {
// replace table if it already exists
// see later in tutorial
outputDiv.replaceChild(dataTable, outputDiv.firstChild);
} else {
outputDiv.appendChild(dataTable);
}
}
}
);
}
updateOutputDiv();
})();
</script>
<!-- / JAVASCRIPT -->
填充的数据表
我们在这里仍然可以做得更好。让我们互动吧。在这一步中，您将在Visualforce页面的顶部添加一个基本表单，允许用户创建一个新客户。将以下代码插入到您的主要内容包装中，在客户列表上方
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- 创建新客户 -->
<div aria-labelledby="newaccountform">
<!-- 创建新客户表单 -->
<form class="slds-form--stacked" id="add-account-form">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Add a new account</legend>
<div class="slds-form-element">
<label class="slds-form-element__label" for="account-name">Name</label>
<div class="slds-form-element__control">
<input id="account-name" class="slds-input" type="text" placeholder="New account"/>
</div>
</div>
<button class="slds-button slds-button--brand slds-m-top--medium" type="submit">Create Account</button>
</fieldset>
<!-- / BOXED AREA -->
</form>
<!-- 创建新客户表单 -->
</div>
<!-- / 创建新客户 -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
...
表单标记被封装到一个<div>包装器中以添加页面结构。
现在我们发现另一个设计系统组件：表单。设计系统为多种表单布局提供样式，包括水平，堆叠和内联。在这个例子中，我们使用slds-form-stacked类将一个垂直堆叠布局应用于<form>。
在表单里面是第二个包装元素，一个<fieldset>包含三个类：slds-box，slds-theme-default和slds-container-small。这三个班级创造了一个白色的，盒装的，小的区域，以保持视觉的美观和整洁。 <legend>标签中的标题在框的顶部添加了一个标题。 <legend>元素的id属性对应于包装器<div>元素的aria-labelledby属性，以实现可访问性。
每个标签和输入对都放在一个包含slds-form-element的包装盒中，以提供最佳的间距。在包装器中，<label>元素有一个slds-form-element__label类。 <input>字段放置在另一个包装器<div>中，并带有slds-form-element__control类，以提供最佳的间距。 <input>字段本身具有slds-input类。
在你的表单中添加所有这些标记和类，几乎可以自动地将所有的Lightning样式应用于自己。您添加类，我们提供所有的CSS。
我们不要忘记，用户必须能够提交表单。因此，我们包含一个<按钮>类slds-button，slds-button-brand和slds-m-top-medium。这些现在应该是不言自明的。如果没有，请参阅链接的文档。
最后，我们需要通过一种方式来连接表单，以实际保存表单的数据。我们将使用一个createAccount（）JavaScript函数来完成此工作，该函数再次使用远程对象来完成这项工作。在updateOutputDiv（）函数下面添加以下内容：
var accountForm = document.getElementById('add-account-form');
var accountNameField = document.getElementById('account-name');
var createAccount = function() {
var account = new SObjectModel.Account();
account.create({ Name: accountNameField.value }, function(error, records) {
if (error) {
alert(error.message);
} else {
updateOutputDiv();
accountNameField.value = '';
}
});
}
accountForm.addEventListener('submit', function(e) {
e.preventDefault();
createAccount();
});
预览您的页面，然后尝试添加一些客户。 每次您使用有效的客户名称提交表格时，表格应自动更新：
那真是个单位！ 如果你有一切工作，现在就马上做一个胜利圈。 真的，你应得的！
在本单元中，我们了解了数据表和表单组件，然后使用远程对象将它们连接到实际数据。 然而，这里缺少的东西不是吗？ 我们已经有了一个闪电式的桌子，但是有点儿单调乏味。 该网页真的需要一些图标和图像来活跃起来，你不觉得吗？ 在下一节中，我们将给你的页面设计TLC值得。