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 This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

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

<c-action
    onclick={fetchData}
    ondata={onsuccesscallback}
    onerror={onerrorcallback}
  >
    <c-button label="Fetch Contact" type="button" variant="neutral"></c-button>
    <c-navigate-action
      target-type={_targetType}
      target-id={_targetId}
      target-name={_targetName}
      target-params={_targetParams}
      target-action={_targetAction}
      replace
    >
      <p>URL: {url}</p>
    </c-navigate-action>
  </c-action>

@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();
  }
// Passing these properties down to the navigate-action using attributes.
  onsuccesscallback(ev) {
    let result = ev.detail.result;
    this._targetType = "Record";
    this._targetId = result[0].Id;

    // Because attribute values are set using attributes, 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);
  }

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 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)

 <c-action
    icon-extraclass="slds-m-right_small"
    state-obj={obj}
    context-id={contextId}
    s-object-type={sObjectType}
    state-action={item}
    action-wrapperclass="slds-size--1-of-1"
    action-labelclass="slds-size--7-of-8"
    icon-wrapperclass="slds-size--1-of-8"
  ></c-action>

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

<c-action
    onclick={fetchData}
    ondata={onsuccesscallback}
    onerror={onerrorcallback}
  >
    <c-button label="Fetch Contact" type="button" variant="neutral"></c-button>
    <c-navigate-action
      target-type={_targetType}
      target-id={_targetId}
      target-name={_targetName}
      target-params={_targetParams}
      target-action={_targetAction}
      replace
    >
      <p>URL: {url}</p>
    </c-navigate-action>
  </c-action>

@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)

 <c-action
    icon-extraclass="slds-m-right_small"
    state-obj={obj}
    context-id={contextId}
    s-object-type={sObjectType}
    state-action={item}
    action-wrapperclass="slds-size--1-of-1"
    action-labelclass="slds-size--7-of-8"
    icon-wrapperclass="slds-size--1-of-8"
  ></c-action>

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

<c-action
    onclick={fetchData}
    ondata={onsuccesscallback}
    onerror={onerrorcallback}
  >
    <c-button label="Fetch Contact" type="button" variant="neutral"></c-button>
    <c-navigate-action
      target-type={_targetType}
      target-id={_targetId}
      target-name={_targetName}
      target-params={_targetParams}
      target-action={_targetAction}
      replace
    >
      <p>URL: {url}</p>
    </c-navigate-action>
  </c-action>

@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)

 <c-action
    icon-extraclass="slds-m-right_small"
    state-obj={obj}
    context-id={contextId}
    s-object-type={sObjectType}
    state-action={item}
    action-wrapperclass="slds-size--1-of-1"
    action-labelclass="slds-size--7-of-8"
    icon-wrapperclass="slds-size--1-of-8"
  ></c-action>

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

<c-action
    onclick={fetchData}
    ondata={onsuccesscallback}
    onerror={onerrorcallback}
  >
    <c-button label="Fetch Contact" type="button" variant="neutral"></c-button>
    <c-navigate-action
      target-type={_targetType}
      target-id={_targetId}
      target-name={_targetName}
      target-params={_targetParams}
      target-action={_targetAction}
      replace
    >
      <p>URL: {url}</p>
    </c-navigate-action>
  </c-action>

@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)

 <c-action
    icon-extraclass="slds-m-right_small"
    state-obj={obj}
    context-id={contextId}
    s-object-type={sObjectType}
    state-action={item}
    action-wrapperclass="slds-size--1-of-1"
    action-labelclass="slds-size--7-of-8"
    icon-wrapperclass="slds-size--1-of-8"
  ></c-action>