`lightning__ECSFSApp` Target

Enables a component to be used in Field Service Mobile App Builder.

Syntax

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>56.0</apiVersion>
4    <isExposed>true</isExposed>
5    <targets>
6        <target>lightning__ECSFSApp</target>
7    </targets>
8    <targetConfigs>
9        <targetConfig targets="lightning__ECSFSApp">
10            <property name="contactName" type="String" label="Contact Name" required="true" description="A contact name property example." placeholder="Enter contact name"/>
11            <property name="isActive" type="Boolean" label="Active" required="true" description="A boolean property example." default="true"/>
12            <property name="priority" type="Integer" label="Priority" description="An integer property example." placeholder="Enter priority"/>
13            <property name="category" type="String" label="Category" required="true" description="A picklist property example." datasource="category1,category2,category3"/>
14        </targetConfig>
15    </targetConfigs>
16</LightningComponentBundle>

targetConfigs

Configures the component for Field Service Mobile App Builder and defines component properties. The targetConfigs tag contains at least one targetConfig tag.

targetConfig

Configures a page type with this attribute.

Attribute	Description	Required
`targets`	Specify one or more page types in the `targets` attribute, such as `<targetConfig targets="lightning__ECSFSApp">` or `<targetConfig targets="lightning__ECSFSApp,lightning__AppPage">`. The `targets` attribute value must match one or more of the page types that you listed under `<targets>`.	Yes

The targetConfig tag includes at least one property tag. You can also include one or more event tags.

property

Specifies a public property of a component that can be set in Field Service Mobile App Builder. The component author defines the property in the component’s JavaScript class using the @api decorator. See the Usage section.

Use the property tag with these attributes.

Attribute	Type	Description	Required
`name`	String	The attribute name. This value must match the property name in the component’s JavaScript class.	Yes
`type`	String	The attribute’s data type. Valid values are: `Boolean` `Integer` `Picklist` `String`	Yes
`datasource`	String	Renders a field as a picklist, with static values. Supported only if the `type` attribute is `String`. For example: `datasource="value1,value2,value3"`. You can also set the picklist values dynamically using an Apex class, such as: `datasource="apex://MyCustomPickList"`. For more information, see Create Dynamic Picklists for Your Custom Components.
`default`	String	The default value for the attribute.
`description`	String	Displays as an i-bubble for the attribute in Field Service Mobile App Builder.
`label`	String	Displays as a label for the attribute in Field Service Mobile App Builder.
`placeholder`	String	Input placeholder text for the attribute when it displays in Field Service Mobile App Builder. This text is the ghost text in text fields and text areas before a user starts typing. Supported only if the `type` attribute is `String`.
`max`	Integer	The maximum allowed value for an attribute of type `Integer`.
`maxLength`	Integer	The maximum number of characters allowed for an attribute of type `String`.
`min`	Integer	The minimum allowed value for an attribute of type `Integer`.
`minLength`	Integer	The minimum number of characters allowed for an attribute of type `String`.
`required`	Boolean	Specifies whether the attribute is required. The default value is `false`.

Usage

To expose a component property in Field Service Mobile App Builder, define the property in the component’s JavaScript class using the @api decorator.

1import { LightningElement, api } from "lwc";
2
3export default class StringPicklistComponent extends LightningElement {
4  @api stringProp;
5  @api picklistProp;
6
7  properties = [];
8
9  connectedCallback() {
10    this.initializeData();
11  }
12
13  initializeData() {
14    const picklistData = [
15      { id: 1, stringProp: "Example string 1", picklistProp: "Option1" },
16      { id: 2, stringProp: "Example string 2", picklistProp: "Option2" },
17      { id: 3, stringProp: "Example string 3", picklistProp: "Option3" },
18      { id: 4, stringProp: "Example string 4", picklistProp: "Option1" },
19      { id: 5, stringProp: "Example string 5", picklistProp: "Option2" },
20    ];
21
22    this.properties = picklistData.filter((data) => {
23      return (
24        (!this.stringProp || data.stringProp.includes(this.stringProp)) &&
25        (!this.picklistProp || data.picklistProp === this.picklistProp)
26      );
27    });
28  }
29}

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>56.0</apiVersion>
4    <isExposed>true</isExposed>
5    <targets>
6        <target>lightning__ECSFSApp</target>
7    </targets>
8    <targetConfigs>
9        <targetConfig targets="lightning__ECSFSApp">
10            <property name="stringProp" type="String" label="String Property" required="true" description="A string property example." placeholder="Enter string"/>
11            <property name="picklistProp" type="String" label="Picklist Property" required="true" description="A picklist property example." datasource="Option1,Option2,Option3"/>
12        </targetConfig>
13    </targetConfigs>
14</LightningComponentBundle>

See Also