Field Service Developer Guide
jNewer Version Available
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.
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.
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>