Items To Approve, Improved

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:

Installation

Unmanaged Package 1.1.2

Setup

  1. 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

actorId

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:

  1. records assigned directly to that User
  2. records assigned to someone else who has that User specified as their Delegated Approver
  3. 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.

contextObjectType

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

fieldNames

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.

Usage Scenarios

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.

Known Issues

  • 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.

View Source

View Source

Subscribe
Notify of
guest
21 Comments
Inline Feedbacks
View all comments
Anonymous

Love this–such a huge improvement! Are all field types supported in the custom columns? I’m having trouble using currency fields.
Thanks for your work on this!

Henri

Alex,

I’m having a problem with a number field not displaying when specified in the fieldnames parameter. The column header shows up, but there is no data listed in the field. Is this a known limitation?

Josh Sangster

Alex, this is a great component. I am trying to host this on a community page and pass in the running user id with a Flow formula. It is a simple text formula that grabs the running user ID and stores as text using {!$User.id}. I am passing that variable into the actorId in the flow, but I still see approvals that are assigned to other users. Any thoughts on how I may have done this incorrectly? EDIT: For posterity, I must leave this mistake here but all it took was saving and activating the correct version of the flow.… Read more »

Giang Nguyen

Hi Alex, thanks for building this great solution! I have been trying to add this to a Home Page component. Currently I run into the problem that the component only displays items to approve when it is assigned to the current user, not queues. The queue membership has been assigned, based on the role of the user. Do you know what I have done wrong in the configuration or is this a bug since your documentation does state it looks at (delegated) user and queues.

Thank you in advance!

Mark

Getting this error when trying to install, is this a bug with the package or something in my org i need to fix:

1. Apex compile failure
Apex class TestFilterOptions: line 42, column 26:
SystemModstamp, LastActivityDate, LastViewedDate, LastReferencedDate
^
ERROR at Row:1:Column:529
No such column ‘LastViewedDate’ on entity ‘Account’. If you are attempting to use a custom field, be sure to append the ‘__c’ after the custom field name. Please reference your WSDL or the describe call for the appropriate names.

Sandy

Hi Alex,

Love this component! I just configured in my org and one thing we noticed. The arrows on the right, where a user can quickly approve, reject, reassign are being cut off. Users can still do the checkbox and manage, but was wondering if you know how to fix that?

Thanks!

Mark

Exactly what I’m needing, and the ability to customise to a specific object will make things so much easier.
That is, of course, once number and currency fields will display in the component. Looking forward to the updated version that fixes this!
Keep up the great work!

Mark

Another thing I noticed is that you do not appear to be able to sort the datatable. The list seems to be in a random order, which is fine if the list is short but if you have over 20 it can be difficult to find the ones you are looking for. Clicking the header column just gives you the option to wrap text. Would be awesome if you could also define a sort order.

Al H

I second this, would be a huge upgrade!!!

Jess D

Hi, can this be used in the Console? I noticed that clicking “Record Name” opened a new browser tab instead of a new workspace tab. I’d need a new workspace tab to open before I could implement this solution. Thanks!

Todd Housel

Alex, we are experiencing a problem with the lightning component will not refresh and remove certain quotes from the pending approval screen and we are getting 2 different errors. Attached screen shots. Thanks for any help tips

error 2.PNG
Todd Housel

Hey Alex, Sorry. I had confused this with another component for Advanced Approvals.

Justine

Hey Alex! I found this from the IdeaExchange (https://success.salesforce.com/ideaView?id=08730000000k8rIAAQ). Any way we can get this added to the AppExchange through Salesforce Labs?

Alex Montiel

Hi, i’m trying to add a single column “Description” in order to have a quick look for the item’s description. But i must be doing something wrong, i can not manage it from the contextObjectType and fieldname. Any suggestion? thanks in advance.

Justin Carter

There appears to be a conflict when installing this package if the SetSharingManually package has also been installed. The toastMessage component has the same name in both packages.

scott meridew

Was hoping to be able to reassign to a different queue …

Anonymous

Love this improvement. Is there a way to disable the default columns. For example, in the case where we do not have a need for the recent approvers column would it be possible to disable this like the reassign button?