The ItemsToApprove component can be placed on recordPages to provide a list of records that have been submitted for Approval:
This component goes beyond the Items to Approve lightning component provided by Salesforce in the following ways:
- Restores missing columns from the Classic component, including Submitter, Submission Date, and Recent Approver
- Add additional custom columns of your choice to surface critical information for rapid decision making.
- Works on all lightning pages, including Home, User, standard and custom record pages
- Support for Delegate Approvals
- Support for Queues
- Optionally hide the Reassign button.
- Approve, Reject, or Reassign multiple records in a single action:
- This lightning component is designed to be used in a Flow and not to be placed directly on the lightning page. After installing the package, you will find Items to Approve available in the Screen Builder in Flow Builder:
Create a simple flow of type Screen Flow that has a single screen, and add the Items to Approve component to that screen as shown above. The flow should look something like this:
2) After adding the component to your flow, configure it (see ‘Configuring the Items To Approve Component’ below) and Activate it (Important!)
3) In Lightning App Builder, edit the Page where you want the Items to Approve component displayed, and drag the Flow component onto the page. Make sure the flow component is configured to select the flow that you just activated. The recordId values should be left alone, as shown below, to cause the Id of the User to pass through to the flow and then to the Items to Approve component. (this example assumes you’re placing the component on a User page. See below for other Usage Scenarios)
3) When the page loads, the flow will run and render its screen and the component will retrieve the records awaiting approval from the provided ActorId.
Configuring the ‘Items to Approve’ Screen Component
In Approval Processes, ‘actor’ refers to a user who is or was assigned a pending approval process ‘work item’. The first instruction you need to give this component is whose pending approvals should be displayed, that is: who is the actor on which to focus. Provide the record Id of a User record. Note that pending approvals will be shown for that User from three sources:
- records assigned directly to that User
- records assigned to someone else who has that User specified as their Delegated Approver
- records assigned to a Queue that that User belongs to
If you’re not familiar with Flow, keep in mind that you need to configure two different places: 1) you need to setup a Text variable with the name “recordId” and with the “Use as Input” box checked:
and 2) you need to then assign the value of the recordId variable to the actorId input on the ‘Items to Approve’ component.
If you want to customize the displayed columns, you have to limit the table to display a single object type. Specify it here with a string (Example: ‘Account’).
If you provide an object type in the contextObjectType input (see above), you can specify a set of custom columns by providing a comma-separated list of field names from that context object type. In the example, above, the Account standard object has two custom fields: datetime1__c and textfield1__c.
Hide Reassign Button
This boolean can be set to True but defaults to false.
You can place a flow containing this component on any kind of page, but if you don’t place it on a User page, you need to make sure that a User Id is passed in to the component by the Flow. There are different approaches to this. For example, you could place the Flow on a home page and use the Flow to first get the User Id of the running user (the user that happens to be visiting the home page) and then pass that id to the Items to Approve component.
- This component lacks support for Approval Processes that contain steps that allow the user to specify the next approver themselves.
- Reassignment does not provide any support for filtering. Right now you can select any user.
- If the step is the first step, the Recent Approver column inaccurately shows the name of the submitter.