+ Start a Discussion
Kiran Jain 15Kiran Jain 15 

How to Hide Flow Header And Finish Message In Aura Component

Hi Folks,
I have stucked in an requirement.  I have a autolunched flow that update  Opportunity Type From Aura Component.
In Aura Component, I have a input field in which I put Opportunity Type Value and the moment I press the button my Aura component call to flow and update Opportunity Value.
Everything is working fine but problam is after flow finish, flow header and Finish Message show on screen Like Below.
User-added imageMy Requirment is that When I call to flow at that time the flow header and finish message should not show on screen. It will seem like Hide flow. I have found out on google but Didn't get any right way.can someone help me to solve it.

Here is my Lightning Code.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,
                            force:hasRecordId,lightning:availableForFlowScreens"
                access="global" >
    
    <aura:attribute name="oppType" type="boolean" /> 
    
    
    <lightning:flow aura:id="flowData" onstatuschange="{!c.statusChange}"/>
    
    
    <div>
                <lightning:input type="text" name="text" label="Opportunity Type" value="{!v.oppType}"/>
                <lightning:button label="Submit" name="next" variant="brand" onclick="{!c.handleNextStage}"/>
     </div>
    
    
</aura:component>
 
({
	handleNextStage : function(component, event, helper) {
       var flow = component.find("flowData");
         var inputVariables = [
             {
                name : "recordId",  
                type : "String",
                value : component.get('v.recordId')
             },
             
             {
                name : "OpportunityType",  
                type : "String",
                value :  component.get('v.oppType')
             },
             
              
           ];
            
            flow.startFlow("update_Opportunity_Type",inputVariables);
             component.set('v.oppType','');
            },
            
     
             
      statusChange : function (component, event) {
              
        if (event.getParam('status') === "FINISHED_SCREEN") {
             $A.get("e.force:refreshView").fire();
              
         }
    }
})

Your help will be appreciated.
Thanks In Advance
 
Best Answer chosen by Kiran Jain 15
ravi soniravi soni
hi Kiran,
try below code.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,
                            force:hasRecordId,lightning:availableForFlowScreens"
                access="global" >
    <aura:attribute name="hasFlow" type="boolean" default="true"/> 
    <aura:attribute name="oppType" type="boolean" /> 
    
    <aura:if isTrue="{!v.hasFlow}"> 
    <lightning:flow aura:id="flowData" onstatuschange="{!c.statusChange}"/>
    </aura:if>
    
    <div>
        <lightning:input type="text" name="text" label="Opportunity Type" value="{!v.oppType}"/>
                <lightning:button label="Submit" name="next" variant="brand"  onclick="{!c.handleNextStage}"/>
     </div>
    
    
</aura:component>
({
	handleNextStage : function(component, event, helper) {
      component.set('v.hasFlow',true);
       var flow = component.find("flowData");
         var inputVariables = [
             {
                name : "recordId",  
                type : "String",
                value : component.get('v.recordId')
             },
             
             {
                name : "OpportunityType",  
                type : "String",
                value :  component.get('v.oppType')
             },
             
              
           ];
            
            flow.startFlow("update_Opportunity_Type",inputVariables);
             component.set('v.oppType','');
            
             
         },
            
     
             
      statusChange : function (component, event) {
             
        if (event.getParam('status') === "FINISHED_SCREEN") {
             component.set('v.hasFlow',false);
             $A.get("e.force:refreshView").fire();
              
             
        }
             
    },
             })

we have to use Aura:if for hiding the screen.
don't forget to mark it as best answer so that it can help to others in future.
Thank you​​​​​​​