--- schema_version: "1" id: cfcf79a058a859e8bd33d18ffcff52331c0b5f1da8eec98d1b2cd09c96c9ba27 title: Navigate 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_navigate_action_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_navigate_action_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 8a927867791c38aafc465e5b37eb25e29f5bef76d08167c57ab43a35de0b8156 description: For the managed package runtime, this page contains a Navigate Action LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # Navigate Action Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains a Navigate 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 Spring '20 The _NavigateAction Lightning Web Component_ enables navigation to any of Salesforce's [PageReference](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_page_reference_type) types, by leveraging Salesforce's [navigation service](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_navigate). ## Available c-navigate-action Attributes

Attribute	Value	Type	Required	Description
targetType	App, Component, Knowledge Article, Login, Object, Record, Record Relationship, Named Page, Community Named Page, Navigation Item, Web Page, Current Page	string	yes	Specifies the name of the target PageReference type. Pass `undefined` for the current PageReference.
targetId		string		Specifies the 18 character record ID.
targetName		string		Specifies the API name of the component, object, tab, app or record.
targetParams		string		Adds state params sent to the target page reference.
targetAction		string		Specifies action passed to object, login and record `targetType`.
targetArticleType		string		If the targetType is knowledgeArticle, specifies the articleType API name of the Knowledge Article record. In Communities, articleType is ignored.
targetRelationship		string		Specifies the API name of the object’s relationship field.
replace	true or false (Default: false)	boolean		To call the navigate() function to replace the current entry in window.history, set to true.
useHref	true or false (Default: false)	boolean		To wrap with an anchor tag, set to true.
openTargetIn	newTab, currentTab	string		Specifies whether to open the target in a new tab or the current tab.
url		string		Read-only property that displays the value of the generated url when `useHref` is set to true.
pageReference		string		Read-only property that gets the generated page reference object for the given properties.

## Example c-navigate-action Component The `navigate-action` component renders a single template, and is designed to attach functionality onto the slotted markup. ``` ``` ## Configure c-navigate-action to Navigate to a Salesforce Tab Navigate to any app tab or Lightning page by setting _target-type_ to 'navigation item', and target-name (found in the url when viewing the app tab or page, such as _/n/namespace\_\_Target\_Name_). Note`namespace` must be replaced with actual the namespace in your org. ``` ``` ## Configure c-navigate-action to Navigate to a Component Navigate to an aura component by specifying the _target-type="Component"_ and _target-name_ attributes where the aura components name is the value of _target-name_. Currently Lightning web components must be wrapped in an aura component that implements the lightning:isUrlAddressable interface. ``` ``` ## Configuring c-navigate-action to navigate to update the current page reference To update the `CurrentPageReference.state`, use a navigation action that excludes the _target-type_ attribute. Values passed in _target-params_ are added to the current state. ``` ``` To remove parameters from the `CurrentPageReference.state`, set the param to an empty value. In the following example, executing the navigation removes the view parameter from the PageReference.state. ``` ``` ## Configuring c-navigate-action to Navigate to a Record Navigate to an action by setting _target-type_ to 'record', a _target-id_, and a _target-action_ (clone, edit, or view). By default the _target-action_value is 'view'. ``` ``` ## Open the Default Salesforce Edit Dialogue ``` ``` ## Available Methods NavigationAction.navigate() Performs navigation to the PageReference that is constructed via the passed attributes. Calls `NavigationMixin.Navigate()`. The generated pageReference is returned. NavigateAction.generateUrl() Returns a promise that resolves the value of the configured PageReference URL and updates the tracked property `url`. This method is called on `connectedCallback`. Note, if `useHref` is set to true and properties are updated after component initialization, generateUrl must be called manually. ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _NavigateAction Lightning Web Component_ enables navigation to any of Salesforce's [PageReference](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_page_reference_type) types, by leveraging Salesforce's [navigation service](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_navigate). ## Properties

Name	Scope	Description
targetType	api (public)	{string} The name of the target PageReference type. One of - component, knowledgeArticle, object, record, relationship, tab, web - Pass undefined for the current PageReference.
targetId	api (public)	{string} - The 18 character record ID.
targetName	api (public)	{string} - Name of the component, object, tab or record.
targetParams	api (public)	{string} - State params sent to the target page reference.
targetAction	api (public)	{string} - Action passed to object, and record references.
targetArticleType	api (public)	{string} - The articleType API name of the Knowledge Article record. In Communities, articleType is ignored.
targetRelationship	api (public)	{string} - The relationship name of the record.
replace	api (public)	{boolean} - When replace is true, calling the navigate() will replace the current entry in window.history.
useHref	api (public)	{boolean} - If true, wrap the slot with an anchor tag.
openTargetIn	api (public)	{string} - To open the target in newTab/currentTab.
url	track (private)	{string} - When useHref is true, the value of the generated url.
pageReference	private get	{PageReference} - The generated page reference object for the given properties.

## Methods

Signature	Scope	Return Value	Description
navigate	public	PageReference	Calls `lightning/navigation NavigationMixin.navigate()` with the configured attributes.
generateUrl	public	Promise	Generates a url value based on the configured attributes.

## Markup The `navigate-action` component renders a single template, and is designed to attach functionality onto the slotted markup. ## Usage ``` ``` ## Example Usage ## Configure c-navigate-action to Navigate to a Salesforce Tab Navigate to any app tab or Lightning page by setting _target-type_ to 'navigation item', and target-name (found in the url when viewing the app tab or page _/n/namespace\_\_Target\_Name_). Note`namespace` must be replaced with actual the namespace in your org. ``` ``` ## Configure c-navigate-action to Navigate to a Component Navigate to an aura component by specifying the _target-type="Component"_ and _target-name_ attributes where the aura components name is the value of _target-name_. Currently Lightning web components must be wrapped in an aura component that implements the lightning:isUrlAddressable interface. ``` ``` ## Configuring c-navigate-action to navigate to update the current page reference To update the `CurrentPageReference.state`, use a navigation action that excludes the _target-type_ attribute. Values passed in _target-params_ are added to the current state. ``` ``` To remove parameters from the `CurrentPageReference.state`, set the param to an empty value. In the following example, executing the navigation removes the view parameter from the PageReference.state. ``` ``` ## Configuring c-navigate-action to Navigate to a Record Navigate to an action by setting _target-type_ to 'record', a _target-id_, and a _target-action_ (clone, edit, or view). By default the _target-action_ value is 'view'. ``` ``` ## Open the Default Salesforce Edit Dialogue ``` ``` ## Available Methods NavigationAction.navigate() Performs navigation to the PageReference that is constructed via the passed attributes. NavigationMixin.Navigate() is called, and the generated pageReference is returned. NavigateAction.generateUrl() Returns a promise that resolves the value of the configured PageReference URL and updates the tracked property `url`. This method is called on `connectedCallback`. Note, if `use-href` is set to true and properties are updated after component initialization, generateUrl must be called manually. ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _NavigateAction Lightning Web Component_ enables navigation to any of Salesforce’s [PageReference](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_page_reference_type) types, by leveraging Salesforce’s [navigation service](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_navigate). ## Properties

Name	Scope	Description
targetType	api (public)	{string} The name of the target PageReference type. One of - component, knowledgeArticle, object, record, relationship, tab, web - Pass undefined for the current PageReference.
targetId	api (public)	{string} - The 18 character record ID.
targetName	api (public)	{string} - Name of the component, object, tab or record.
targetParams	api (public)	{string} - State params sent to the target page reference.
targetAction	api (public)	{string} - Action passed to object, and record references.
targetArticleType	api (public)	{string} - The articleType API name of the Knowledge Article record. In Communities, articleType is ignored.
targetRelationship	api (public)	{string} - The relationship name of the record.
replace	api (public)	{boolean} - When replace is true, calling the navigate() will replace the current entry in window.history.
useHref	api (public)	{boolean} - If true, wrap the slot with an anchor tag.
openTargetIn	api (public)	{string} - To open the target in newTab/currentTab.
url	track (private)	{string} - When useHref is true, the value of the generated url.
pageReference	private get	{PageReference} - The generated page reference object for the given properties.

## Methods

Signature	Scope	Return Value	Description
navigate	public	PageReference	Calls`lightning/navigation NavigationMixin.navigate()` with the configured attributes.
generateUrl	public	Promise	Generates a url value based on the configured attributes.

## Markup The `navigate-action` component renders a single template, and is designed to attach functionality onto the slotted markup. ## Usage ``` ``` ## Example Usage ## Configure c-navigate-action to Navigate to a Salesforce Tab Navigate to any app tab or Lightning page by setting _target-type_ to \`navigation item', and target-name (found in the url when viewing the app tab or page _/n/namespace_Target\_Name\_\_). Note`namespace` must be replaced with actual the namespace in your org. ``` ``` ## Configure c-navigate-action to Navigate to a Component Navigate to an aura component by specifying the_target-type=\`\`Component''_ and _target-name_ attributes where the aura components name is the value of _target-name_. Currently Lightning web components must be wrapped in an aura component that implements the lightning:isUrlAddressable interface. ``` ``` ## Configuring c-navigate-action to navigate to update the current page reference To update the `CurrentPageReference.state`, use a navigation action that excludes the _target-type_ attribute. Values passed in_target-params_ are added to the current state. ``` ``` To remove parameters from the `CurrentPageReference.state`, set the param to an empty value. In the following example, executing the navigation removes the view parameter from the PageReference.state. ``` ``` ## Configuring c-navigate-action to Navigate to a Record Navigate to an action by setting _target-type_ to \`record', a_target-id_, and a _target-action_ (clone, edit, or view). By default the _target-action_ value is \`view'. ``` ``` ## Open the Default Salesforce Edit Dialogue ``` ``` ## Available Methods NavigationAction.navigate() Performs navigation to the PageReference that is constructed via the passed attributes. NavigationMixin.Navigate() is called, and the generated pageReference is returned. NavigateAction.generateUrl() Returns a promise that resolves the value of the configured PageReference URL and updates the tracked property `url`. This method is called on `connectedCallback`. Note, if `use-href` is set to true and properties are updated after component initialization, generateUrlmust be called manually.