--- schema_version: "1" id: 4261dcfa5d434d1b175c7ce6962fbbcdb0cb571f5a29c67f863a88ca1c7d1ad5 title: Action Lightning Web Component ReadMe (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_action_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_action_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 451b09ffaa63a5a6315c2374884d490de44e32f67356190ab08d7590f08f376a description: For the managed package runtime, this page contains the Action LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # Action Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains the Action LWC ReadMe for each Vlocity release. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). ## Vlocity Insurance and Health Summer '20 The _Action Lightning Web Component_ is the base component for all action components. ## Available c-action Attributes To navigate the page after fetching data from a datasource, use the following attributes.

Attribute	Value	Type	Required	Description
debug	true, false (Default: false)	boolean		To enable debug mode, set to true. Prints fetched data inside template and updates JSON for testing.
definition	JSON	object	yes	Contains required object. See Available definition Attributes
disableCache	true, false (Default: false)	boolean		To turn off caching, set to true.
url	URL	string		Reads the interpolated url.

## Example c-action Component ```

URL: {url}

Attribute	Value	Type	Required	Description
datasource	JSON	object	yes	Defines the source from which to fetch the data. See Datasource Lightning Web Component for more information.
data	JSON	object		To use the data fetched from the datasource dierctly inside the definition, add data here.
isTrackingDisabled	true, false (Default: true)	string		To disable tracking, set to false.
navigateTo	JSON	object		Defines the navigation service object. If url is not present, this object is considered for navigation and is interpolated if type and value are passed. See Salesforce documentation on navigation
navigate	true or false (Default: false)	boolean		Specifies whether the url navigates or not.
parameters	JSON	object		Adds all fields as url parameters only if url is set.
target	current window or new window	string		Specifies which window the url opens. Works only if the url is relative and is not salesforce object data.
trackingObj		string		Specifies the tracking object of the container Flexcard.
url		string		Defines the navigation url, which is interpolated if type and value are passed. The url is given higher preference over the navigateToobject.

## Example definition JSON ## Navigate to View Page by Navigation Object ``` { "datasource": { "type": "query", "value": { "query": "SELECT Id, name FROM Contact LIMIT 1" } }, "navigateTo": { "type": "standard__objectPage", "attributes": { "objectApiName": "${data[0].Id}", "actionName": "view" } }, "navigate": true } ``` ## Navigate to View Page by URL ``` { "datasource": { "type": "query", "value": { "query": "SELECT Id, name FROM Contact LIMIT 1" } }, "url": "/${data[0].Id}", "navigate": true } ``` ## Navigation to Object with Direct Data ``` { "data": { "Id": "001B000000qBQXDIA4" }, "url": "/${data.Id}", "navigate": true } ``` ## Navigate to Object Home Page ``` { "navigateTo": { "type": "standard__objectPage", "attributes": { "objectApiName": "Account", "actionName": "home" } }, "navigate": true } ``` ## Navigate to Account Create New Screen ``` { "navigateTo": { "type": "standard__objectPage", "attributes": { "objectApiName": "Account", "actionName": "new" } }, "navigate": true } ``` ## Available c-action Attributes for Links To perform an action by clicking on the link, use the following attributes.

Attribute	Value	Type	Required	Description
action-labelclass		string		Adds an extra class to the action label element.To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
action-wrapperclass		string		Adds an extra class to the action wrapper element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
context-id		string		Sets action context Id.
icon-color		string		Sets the color of the icon.
icon-extraclass		string		Adds an extra class to the icon element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
icon-size	xx-small, small, medium, large, x-large	string		Sets the size of the icon.
icon-url	URL	string		Sets the icon URL. Use with Newport Design System (NDS) theme only.
icon-wrapperclass		string		Adds an extra class to the icon wrapper element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
s-object-type	sObject	string		Sets action sObject type.
state-action	JSON	object	yes	Sets the action Info.
state-obj	JSON	object		Contains the layout/card records.
styles		string		To set inline styles of label and text-align property. it should be in this formt `style = { "label": "", "textAlign" : ""}`
theme	slds, nds (Default: slds)	string		Specifies which theme to use.

## Example c-action Component (inside Vlocity Card state template) ``` ``` ## Vlocity Insurance and Health Spring '20 The _Action Lightning Web Component_ is the base component for all action components. ## Available c-action Attributes To navigate the page after fetching data from a data source, use the following attributes.

Attribute	Value	Type	Required	Description
debug	true, false (Default: false)	boolean		To enable debug mode, set to true. Prints fetched data inside the template and updates JSON for testing.
definition	JSON	object	yes	Contains the required object. See Available definitionAttributes
disableCache	true, false (Default: false)	boolean		To turn off caching, set to true.
url	URL	string		Reads the interpolated URL.

## Available definition Attributes

Attribute	Value	Type	Required	Description
datasource	JSON	object	yes	Defines the source from which to fetch the data. See Datasource Lightning Web Component for more information.
data	JSON	object		To use the data fetched from the datasource directly inside the definition, add data here.
navigateTo	JSON	object		Defines the navigation service object. If URL is not present, this object is considered for navigation and is interpolated if type and value are passed. See Salesforce documentation on navigation
navigate	true or false (Default: false)	boolean		Specifies whether the URL navigates or not.
parameters	JSON	object		Adds all fields as URL parameters only if url is set.
target	current window or new window	string		Specifies which window the URL opens. Works only if the URL is relative and is not salesforce object data.
url		string		Defines the navigation URL, which is interpolated if type and value are passed. The url is given a higher preference over the navigateToobject.

## Example c-action Component ```

URL: {url}

``` ``` @track query = JSON.stringify({ datasource: { type: "query", value: { query: "SELECT Id, name FROM Contact LIMIT 1" } }, url: "/${data[0].Id}", target: "_blank", parameters: {}, navigate: false }); fetchData(ev) { let action = ev.currentTarget; let def = JSON.parse(this.query); action.definition = this.query; action.triggerAction(); } // I'm passing these properties down to the navigate-action via // attributes. onsuccesscallback(ev) { let result = ev.detail.result; this._targetType = "Record"; this._targetId = result[0].Id; // Because we're setting the attribute values via attributes, // we need to give the ui a chance to re-render. Promise.resolve().then(() => { let navigateAction = this.template.querySelector("c-navigate-action"); navigateAction.navigate(); this.url = ev.target.url; this.onResult( result.map(obj => { var rObj = obj; rObj.isEdit = false; return rObj; }) ); }); } onerrorcallback(error) { console.log(error); } ``` ## Examples for definition JSON ## Navigate to View Page by Navigation Object ``` { "datasource": { "type": "query", "value": { "query": "SELECT Id, name FROM Contact LIMIT 1" } }, "navigateTo": { "type": "standard__objectPage", "attributes": { "objectApiName": "${data[0].Id}", "actionName": "view" } }, "navigate": true } ``` ## Navigate to View Page by URL ``` { "datasource": { "type": "query", "value": { "query": "SELECT Id, name FROM Contact LIMIT 1" } }, "url": "/${data[0].Id}", "navigate": true } ``` ## Navigation to Object with Direct Data ``` { "data": { "Id": "001B000000qBQXDIA4" }, "url": "/${data.Id}", "navigate": true } ``` ## Navigate to Object Home Page ``` { "navigateTo": { "type": "standard__objectPage", "attributes": { "objectApiName": "Account", "actionName": "home" } }, "navigate": true } ``` ## Navigate to Account Create New Screen ``` { "navigateTo": { "type": "standard__objectPage", "attributes": { "objectApiName": "Account", "actionName": "new" } }, "navigate": true } ``` ## Available c-action Attributes for Links To perform an action by clicking on the link, use the following attributes.

Attribute	Value	Type	Required	Description
action-labelclass		string		Adds an extra class to the action label element.To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
action-wrapperclass		string		Adds an extra class to the action wrapper element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
context-id		string		Sets action context Id.
icon-extraclass		string		Adds an extra class to the icon element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
icon-size	xx-small, small, medium, large, x-large	string		Sets the size of the icon.
icon-url	URL	string		Sets the icon URL. Use with Newport Design System (NDS) theme only.
icon-wrapperclass		string		Adds an extra class to the icon wrapper element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
s-object-type	sObject	string		Sets action sObject type.
state-action	JSON	object	yes	Sets the action Info.
state-obj	JSON	object		Contains the layout/card records.
theme	slds, nds (Default: slds)	string		Specifies which theme to use.

## Example c-action Component (inside Vlocity Card state template) ``` ``` ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _Action Lightning Web Component_ is the base component for all action components. ## Available c-action Attributes for Navigation To navigate the page after fetching data from a datasource, use the following attributes.

Attribute	Value	Type	Required	Description
debug	true, false (Default: false)	boolean		To enable debug mode, set to true. Prints fetched data inside template and updates JSON for testing.
definition	JSON	object	yes	Contains required object. See Available definition Attributes
url	URL	string		Reads the interpolated url.

## Available Definition Attributes

Attribute	Value	Type	Required	Description
datasource	JSON	object	yes	Defines the source from which to fetch the data. See Datasource Lightning Web Component for more information.
data	JSON	object		To use the data fetched from the datasource directly inside the definition, add data here.
navigateTo	JSON	object		Defines the navigation service object. If url is not present, this object will be considered for navigation and is interpolated if type and value are passed.
navigate	true or false (Default: false)	boolean		Specifies whether the url has to navigate or not.
parameters	JSON	object		Adds all fields as url parameters only if url is set.
target	current window or new window	string		Specifies which window the url opens. Works only if the url is relative and is not salesforce object data.
url		string		Defines the navigation url, which is interpolated if type and value are passed. The url is given higher preference over the navigateTo object.

## Example c-action Component ```

URL: {url}

Attribute	Value	Type	Required	Description
action-labelclass		string		Adds an extra class to the action label element.To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
action-wrapperclass		string		Adds an extra class to the action wrapper element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
context-id		string		Sets action context Id.
icon-extraclass		string		Adds an extra class to the icon element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
icon-size	xx-small, small, medium, large, x-large	string		Sets the size of the icon.
icon-url	URL	string		Sets the icon URL. Use with Newport Design System (NDS) theme only.
icon-wrapperclass		string		Adds an extra class to the icon wrapper element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
s-object-type	sObject	string		Sets action sObject type.
state-action	JSON	object	yes	Sets the action Info.
state-obj	JSON	object		Contains the layout/card records.
theme	slds, nds (Default: slds)	string		Specifies which theme to use.

## Example c-action Component (inside Vlocity Card state template) ``` ``` ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _Action Lightning Web Component_ is the base component for all action components. ## Available c-action Attributes for Navigation To navigate the page after fetching data from a datasource, use the following attributes.

Attribute	Value	Type	Required	Description
debug	true, false (Default: false)	boolean		To enable debug mode, set to true. Prints fetched data inside template and updates JSON for testing.
definition	JSON	object	yes	Contains required object. See Available definition Attributes
url	URL	string		Reads the interpolated url.

## Available definition Attributes

Attribute	Value	Type	Required	Description
datasource	JSON	object	yes	Defines the source from which to fetch the data. See Datasource Lightning Web Component for more information.
data	JSON	object		To use the data fetched from the datasource directly inside the definition, add data here.
navigateTo	JSON	object		Defines the navigation service object. If url is not present, this object will be considered for navigation and is interpolated if type and value are passed. See Salesforce documentation on navigation.
navigate	true or false (Default: false)	boolean		Specifies whether the url has to navigate or not.
parameters	JSON	object		Adds all fields as url parameters only ifurl is set.
target	current window or new window	string		Specifies which window the url opens. Works only if the url is relative and is not salesforce object data.
url		string		Defines the navigation url, which is interpolated if type and value are passed. The url is given higher preference over thenavigateTo object.

## Example c-action Component ```

URL: {url}

``` ``` @track query == JSON.stringify({ datasource: { type: "query", value: { query: "SELECT Id, name FROM Contact LIMIT 1" } }, url: "/${data[0].Id}", target: "_blank", parameters: {}, navigate: false }); fetchData(ev) { let action == ev.currentTarget; let def == JSON.parse(this.query); action.definition == this.query; action.triggerAction(); } // I'm passing these properties down to the navigate-action via // attributes. onsuccesscallback(ev) { let result == ev.detail.result; this._targetType == "Record"; this._targetId == result[0].Id; // Because we're setting the attribute values via attributes, // we need to give the ui a chance to re-render. Promise.resolve().then(() => { let navigateAction == this.template.querySelector("c-navigate-action"); navigateAction.navigate(); this.url == ev.target.url; this.onResult( result.map(obj => { var rObj == obj; rObj.isEdit == false; return rObj; }) ); }); } onerrorcallback(error) { console.log(error); } ``` ## Examples for definition JSON ## Navigate to View Page by Navigation Object ``` { "datasource": { "type": "query", "value": { "query": "SELECT Id, name FROM Contact LIMIT 1" } }, "navigateTo": { "type": "standard__objectPage", "attributes": { "objectApiName": "${data[0].Id}", "actionName": "view" } }, "navigate": true } ``` ## Navigate to View Page by URL ``` { "datasource": { "type": "query", "value": { "query": "SELECT Id, name FROM Contact LIMIT 1" } }, "url": "/${data[0].Id}", "navigate": true } ``` ## Navigation to Object with Direct Data ``` { "data": { "Id": "001B000000qBQXDIA4" }, "url": "/${data.Id}", "navigate": true } ``` ## Navigate to Object Home Page ``` { "navigateTo": { "type": "standard__objectPage", "attributes": { "objectApiName": "Account", "actionName": "home" } }, "navigate": true } ``` ## Navigate to Account Create New Screen ``` { "navigateTo": { "type": "standard__objectPage", "attributes": { "objectApiName": "Account", "actionName": "new" } }, "navigate": true } ``` ## Available c-action Attributes for Links To perform an action by clicking on the link, use the following attributes.

Attribute	Value	Type	Required	Description
action-labelclass		string		Adds an extra class to the action label element.To add multiple classes, use a space to separate each class, such as `classone classtwo'.
action-wrapperclass		string		Adds an extra class to the action wrapper element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.
context-id		string		Sets action context Id.
icon-extraclass		string		Adds an extra class to the icon element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.
icon-size	xx-small, small, medium, large, x-large	string		Sets the size of the icon.
icon-url	URL	string		Sets the icon URL. Use with Newport Design System (NDS) theme only.
icon-wrapperclass		string		Adds an extra class to the icon wrapper element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.
s-object-type	sObject	string		Sets action sObject type.
state-action	JSON	object	yes	Sets the action Info.
state-obj	JSON	object		Contains the layout/card records.
theme	slds, nds (Default: slds)	string		Specifies which theme to use.

## Example c-action Component (inside Vlocity Card state template) ``` ```