Show text message when record is automatically submitted for approval and hide message when record is approved or rejected using Lightning Component Visibility

Hello Trailblazers !

In this blog post, we are going to see how to display text message on record page when record is automatically submitted for approval using Lightning Component Visibility Feature.

Requirements

1. Create Approval Process
2. Create Process Builder to call approval process
3. Create Lightning Component to display text message
4. Add component on record page by setting component visibility with filter criteria

Let's see it in action

1. Create Approval Process

Step 1 :

• Create Approval Process on Opportunity Object with Entry Criteria Opportunity Stage equals to Qualification and set the approver

Step 2 :

• Approve Status Flag is a checkbox field. In initial submission it's value is set to False using Field Update Action.
• In Final Approval Process and Rejection Process, Set Approve Status Flag to True
• Also Create email alert to notify record owner.

Step 3: 

• Activate the Approval Process

2. Create Process Builder to call approval process

Steps :

• Create Process Builder on Opportunity Object.
• Process starts when record is created or edited.
• Criteria : Opportunity Stage equals Qualification
• Action : Submit for Approval

3. Create Lightning Component to display text message 

SubmitForApproval.cmp

/*
 * Author Name: Priyanka Dadhe
 * Source     : sfdcsurf.blogspot.com
 * Date       : 25th January, 2020
 * CMP Name   : SubmitForApproval.cmp
 * Description: Display Text Message 
*/
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <div class="slds-page-header">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <div class="slds-media">
                    <div class="slds-media__figure"></div>
                    <div class="slds-media__body">
                        <div class="slds-page-header__name">
                            <h1 style="font-size: 18px;">
                                Record is submitted for approval.
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</aura:component>

SubmitForApproval.css

.THIS.slds-page-header{
    background-color: white;
}
.THIS .slds-page-header__col-title{
    text-align: center;
    color:red;
}

4. Add component on record page by setting component visibility with filter criteria

• As soon as record is approved, text message is hidden using Lightning Component Visibility Feature

So we got to know how we can use this amazing Lightning Component Visibility Feature. Glad to share with you. Do share your feedback.!!!