---
schema_version: "1"
id: a31a24cc66ffe2bc86cf0eb5ded464e7982ea5eb8af815042e5e64c39cae093a
title: Document Builder Standard Components
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/service/264-0-0/fs_document_builder_standard_components.md
canonical_url: https://help.salesforce.com/s/articleView?id=service.fs_document_builder_standard_components.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 1cd044a2502eba217b1f2b8e07ab5780f2254c2d86e22d3a5d0fd078e1f63707
description: Here’s a list of standard components available for Document Builder, with descriptions.
products:
  - Field Service
release: "264"
---
# Document Builder Standard Components

Here’s a list of standard components available for Document Builder, with descriptions.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: Lightning Experience.</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">The Field Service core features, managed package, and mobile app are available in <strong>Enterprise</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions.</td></tr></tbody></table>

Document Builder has these standard components. Set the conditional visibility of all components and choose to show them only under specific criteria. For example, if the parent record is Work Order, and the related object is Work Order Line Item, you can choose to show a related record table only if the work order’s work type is Break-Fix. When you create a community site, you can use the service document feature only with the Help Center, Build Your Own (Aura), Customer Service, and Customer Account Portal templates.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
      <colgroup>
        <col style="width:21.978021978021978%">
        <col style="width:78.02197802197803%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d33698e71">Component</th>
          <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d33698e74">Details</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Component" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e71 ">Grid</td>

          <td data-label="Details" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e74 ">
            <p>The grid divides the canvas into columns. To divide each section into multiple columns
              and control the width of each column, add the Grid component to the header, body, or footer.
              To use, drag the Grid component onto the canvas. After you do, you see the Grid settings in
              the Document Settings menu on the right. Here you can change the number of columns (up to
              12), the width of each column, and the space padding between the columns.</p>
            <p style="margin-bottom:0;">If you set the
              conditional visibility rules to hide the grid, the grid and all fields within the grid are
              hidden. If the grid is visible, you can still set conditional visibility rules for
              individual fields within the grid. If you have a conditional visibility rule to hide a field
              within a grid, it’s hidden.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Component" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e71 ">Page Break</td>

          <td data-label="Details" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e74 ">Page breaks control the pagination of your service document and organize your content
            into sections.</td>

        </tr>
        <tr class="">
          <td data-label="Component" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e71 ">Page Numbers</td>

          <td data-label="Details" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e74 ">When added to the header or footer, repeats on all pages of&nbsp;the document. After you add
            it to the canvas, the Document Settings menu shows the Page Numbers Settings, where you can
            change the format and alignment.</td>

        </tr>
        <tr class="">
          <td data-label="Component" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e71 ">Related Record Table</td>

          <td data-label="Details" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e74 ">
            <p>Related record tables show records from child objects related to the service
              document’s template object. For example, if the template object is Work Order, the
              related record table shows records from the Work Order related objects, such as Work
              Order Line Items, Products Consumed, Expenses, and Time Sheet Entries.&nbsp;When the
              Related Record Table component is added to the canvas, you can use the component
              settings panel on the right to configure table details, including:</p>
            <ul>
              <li>Parent record: This field defaults to the Template object, for example, Service
                Appointment.</li>

              <li>Related entity: This field lets you select which child object’s record you want
                to show in the table.</li>

              <li>Related record fields: Add a maximum of 10 related record fields (columns) to
                the table.</li>

              <li> Show related records table when the list is empty: This setting is deselected
                by default and hides related lists that have no records. When the setting is
                selected, related lists that have no records are shown with only the column
                headers and no records. </li>

              <li>Set equal width for columns: By default, column widths are set based on the size
                of the field label. (Fields with larger labels appear with wider column widths).
                When the setting is selected, the column widths are evenly distributed across all
                fields. </li>

              <li>Sort field and sort order: Sort records within the related list. Use these
                fields to specify which field to use to determine sort order and whether sorting
                occurs in ascending or descending order.</li>

            </ul>
            <p style="margin-bottom:0;">Geolocation and Text Area (Long) field types aren't supported.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Component" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e71 ">Signature</td>

          <td data-label="Details" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e74 ">
            <p>The signature component captures signatures from customers, partners, and mobile
              workers on service documents <a href="https://help.salesforce.com/s/articleView?id=ind.qoc_document_builder_signatures_on_web_and_mobile_app.htm&amp;language=en_US" target="_blank">through both the app or web</a>. Define the number
              of signatures needed by adding signature components to the canvas. You can also adjust
              the signature breadth and height. Reorder, include, or exclude these fields by
              specifying settings in the component settings panel.</p>
            <p style="margin-bottom:0;">Because these fields are
              standard fields on a standard object, they’re translated in the user’s language. You
              can customize the labels related to the Digital Signature object and rename them to
              suit your branding and business needs. If you don’t change the labels of the object
              or fields, Salesforce translates the label values for you. If you change labels, or
              if you want to modify the standard translation provided by Salesforce, you can
              translate those new labels.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Component" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e71 ">Image</td>

          <td data-label="Details" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e74 ">Embeds images into your service document. Add images to your image library. Then,
            from the document component panel, select your image, and then use the canvas to add
            image descriptions and include alt text for accessibility. Images must adhere to the
            Salesforce guidelines for file size, found in <a href="https://help.salesforce.com/s/articleView?id=experience.content_file_size_limits.htm&amp;type=5&amp;language=en_US" target="_blank">Salesforce CRM Content Limits</a>.</td>

        </tr>
        <tr class="">
          <td data-label="Component" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e71 ">Image Gallery</td>

          <td data-label="Details" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e74 ">
            <p style="margin-bottom:0;">The image gallery shows all images associated with the object from which you create your
              service document. All images added as files to the template object are shown in this
              component. While you can dictate the number of images to show per row, you can’t modify the
              total number of images. Images in a row have the same size and resolution. You can include
              captions for each image.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Component" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e71 ">Rich Text</td>

          <td data-label="Details" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d33698e74 ">
            <p>Add custom text with styling and formatting to your documents. To represent
              information such as help text, section headers, disclaimers, add custom labels.
              Custom labels are translatable, so using this setting in a rich text component lets
              you translate the content without having to build multiple templates for each
              language your company supports.</p>
            <p>To personalize your service documents, use embedded expressions in rich text
              components. Drag a rich text component onto the canvas. Optionally, add static text
              to give context for the embedded field. To embed the field into the rich text
              component use the following syntax: <code>{!Record.fieldname}</code> or
              <code>{!Record.Objectname.fieldname}</code>. For example, to embed a phone
              number for an account, the syntax is <code>{!Record.Account.phone}</code>. For
              custom labels the format is <code>{!$Label.labelName}</code>. Save the template,
              and then test it on the document preview.
            </p>
            <p style="margin-bottom:0;">Address, Geolocation, Compound Fields, Picklist, Multi-select Picklist, Text Area
              (Long), Text Area (Rich), and Text (Encrypted) aren’t supported for embedded
              expressions in rich text.</p>
          </td>

        </tr>
      </tbody>
    </table>