Code Examples for Document Builder

Build custom components for Document Builder with Lightning web components (LWCs).

With custom components, the sky’s the limit, but these code samples can get you started on your own Document Builder customization journey.

For custom LWCs to appear on mobile document preview, you must include this code in your js-meta.xml file: <supportedFormFactor type="Small" />

Important

Static Text

The header and medium header base components come with color and padding configuration. This code creates a medium header component.

1// Below is the code for the HTML block:
2<template>
3   <h2 class="slds-text-heading_medium" style={inlineStyle}>{text}</h2>
4</template>
5
6// Below is the code for the javascript block:
7import { LightningElement, api } from "lwc";
8
9export default class MediumHeaderText extends LightningElement {
10   @api text;
11   @api colorhex;
12   @api topPadding;
13   @api leftPadding;
14   @api rightPadding;
15   @api bottomPadding;
16
17   get inlineStyle() {
18       return `color:#${this.colorhex};
19padding:${this.topPadding}px ${this.rightPadding}px ${this.bottomPadding}px ${this.leftPadding}px`;
20   }
21}
22
23// Below is the extensible markup language block
24<?xml version="1.0" encoding="UTF-8" ?>
25<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
26   <apiVersion>57.0</apiVersion>
27   <isExposed>true</isExposed>
28   <targets>
29       <target>lightning__ServiceDocument</target>
30   </targets>
31   <targetConfigs>
32       <targetConfig targets="lightning__ServiceDocument">
33           <supportedFormFactors>
34               <supportedFormFactor type="Large" />
35           </supportedFormFactors>
36
37           <property name="text" type="string" default="A medium header" />
38           <property name="colorhex" type="string" default="1B3971" />
39           <property name="topPadding" type="string" default="0" />
40           <property name="rightPadding" type="string" default="0" />
41           <property name="leftPadding" type="string" default="0" />
42           <property name="bottomPadding" type="string" default="0" />
43       </targetConfig>
44   </targetConfigs>
45
46</LightningComponentBundle>

Static Images

Here’s some sample code to create custom static images. This code creates a Static Image component.

Don’t use static resources, as they aren’t supported offline and are deprecated. Only use ContentAsset in your LWC. See Using Assets in LWC, How to Create Assets, and Viewing and Editing Assets.

Important

1// Below is the HTML block
2<template>
3   <div>
4       <div class="image" style={inlineStyle}>
5           <img src={salesforceUrl} />
6       </div>
7   </div>
8</template>
9
10// Below is the JavaScript block
11import { LightningElement, api } from "lwc";
12import SALESFORCE_LOGO from "@salesforce/contentAssetUrl/salesforce";
13
14export default class DemoSalesforceLogo extends LightningElement {
15   @api width;
16   @api height;
17
18   // Expose the static resource URL for use in the template
19   get salesforceUrl() {
20       return SALESFORCE_LOGO;
21   }
22
23   get inlineStyle() {
24       return `width: ${this.width}px;height: ${this.height}px`;
25   }
26}
27
28// Below is the Extensible Markup Language block
29<?xml version="1.0" encoding="UTF-8" ?>
30<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
31   <apiVersion>54.0</apiVersion>
32   <isExposed>true</isExposed>
33   <targets>
34       <target>lightning__ServiceDocument</target>
35   </targets>
36   <targetConfigs>
37       <targetConfig targets="lightning__ServiceDocument">
38           <supportedFormFactors>
39               <supportedFormFactor type="Large" />
40               <supportedFormFactor type="Small" />
41           </supportedFormFactors>
42
43           <property name="width" type="integer" />
44           <property name="height" type="integer" />
45       </targetConfig>
46   </targetConfigs>
47
48</LightningComponentBundle>

This code uses SFDX to deploy contentAssets.

1// Below is the XML block:
2<?xml version="1.0" encoding="UTF-8" ?>
3<ContentAsset xmlns="http://soap.sforce.com/2006/04/metadata">
4   <isVisibleByExternalUsers>true</isVisibleByExternalUsers>
5   <language>en_US</language>
6   <masterLabel>salesforce</masterLabel>
7   <relationships>
8       <organization>
9           <access>VIEWER</access>
10       </organization>
11       <workspace>
12           <access>INFERRED</access>
13           <isManagingWorkspace>true</isManagingWorkspace>
14           <name>sfdc_asset_company_assets</name>
15       </workspace>
16   </relationships>
17   <versions>
18       <version>
19           <number>1</number>
20           <pathOnClient>salesforce.png</pathOnClient>
21       </version>
22   </versions>
23</ContentAsset>