+ Start a Discussion
Tina Chang 6Tina Chang 6 

After embedding a Flow in Visualforce Page, how to make a Visualforce Page form display only for certain screen of Flow?

Hello, everyone! I had a flow embedded in a Visualforce Page. And then I created a apex form for users to upload the files. My question is: is it possible to display this Upload an Attachment form area for only the 1st Intro Screen in the flow session? That is, I don't want the users to see the Upload an Attachment section during the flow session except for the 1st Intro Screen - STEP 1 as captured in the image below. Is there a way for me to hide that section for the rest of the steps? Any suggestions and help would be greatly appreciated!! :)

User-added image

The Visualforce Page:
<apex:page sidebar="false" showHeader="false" title="Salesforce Requests" controller="AttachmentUploadController">
    <flow:interview name="Salesforce_Request_System" finishLocation="{!URLFOR('/home/home.jsp')}" buttonLocation="bottom" buttonStyle="color:#333366; background-color:#fed; border:1px solid;"/>
        
          <apex:form enctype="multipart/form-data">
            <apex:pageMessages />
            <apex:pageBlock title="Upload an Attachment" >
        
              <apex:pageBlockButtons location="bottom">
                <apex:commandButton action="{!upload}" value="Save" style="color:#333366; background-color:#fed; border:1px solid;"/>
              </apex:pageBlockButtons>
        
              <apex:pageBlockSection showHeader="false" columns="2" id="block1">
        
                <apex:pageBlockSectionItem >
                  <apex:outputLabel value="File Name" for="fileName"/>
                  <apex:inputText value="{!attachment.name}" id="fileName"/>
                </apex:pageBlockSectionItem>
        
                <apex:pageBlockSectionItem >
                  <apex:outputLabel value="File" for="file"/>
                  <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}" id="file"/>
                </apex:pageBlockSectionItem>
        
                <apex:pageBlockSectionItem >
                  <apex:outputLabel value="Description" for="description"/>
                  <apex:inputTextarea value="{!attachment.description}" id="description"/>
                </apex:pageBlockSectionItem>
        
              </apex:pageBlockSection>
        
            </apex:pageBlock>
          </apex:form>
</apex:page>

Following is the Apex Class: AttachmentUploadController
public with sharing class AttachmentUploadController {

  public Attachment attachment {
  get {
      if (attachment == null)
        attachment = new Attachment();
      return attachment;
    }
  set;
  }

  public PageReference upload() {

    attachment.OwnerId = UserInfo.getUserId();
    attachment.ParentId = '500S0000008lP0o';
    attachment.IsPrivate = true;

    try {
      insert attachment;
    } catch (DMLException e) {
      ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading attachment'));
      return null;
    } finally {
      attachment = new Attachment(); 
    }

    ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'Attachment uploaded successfully'));
    return null;
  }

}

 
Best Answer chosen by Tina Chang 6
Waqar Hussain SFWaqar Hussain SF
Hi Tina, 

I shared just an example of rerender in my previous code. 

You have to create a boolean variable in your flow and for the desired screen you have to put value (true) in this variable. Then you can use this variable on the page where you are embadding the flow. 

Flow variable values can be used in a Visualforce page. Once you’ve embedded your flow in a Visualforce page, you can use Visualforce markup to get values for variables or sObject variables. To render attachment section you will use flow variable.

FLOW CONTROLLER:
 
public class FlowController {
    public boolean ShowAttachment;
    public FlowController() {
        ShowAttachment = false;
    }
    
    //you will have to put below line on the code in function, which is called on next button for desired screen
    ShowAttachment = true;
}




ON VF page:
<apex:pageBlock title="Upload an Attachment" rendered="{!ShowAttachment}">

For more information, please see the below article.

https://help.salesforce.com/articleView?id=pages_flows_getting_values.htm&type=0

Let me know, If you have any confusion. 

Regards,
Waqar Hussain 
Skype: waqar.hussain991
2011waqar@gmail.com 

All Answers

Waqar Hussain SFWaqar Hussain SF
Hi Tina,

You can use rendered attribute on visualforce to dynamically show/hide elementes. You can use rendered attribut on page block to show upload block section. 

For example you can render, the section if attachment is uploaded. 
<apex:page sidebar="false" showHeader="false" title="Salesforce Requests" controller="AttachmentUploadController">
    <flow:interview name="Salesforce_Request_System" finishLocation="{!URLFOR('/home/home.jsp')}" buttonLocation="bottom" buttonStyle="color:#333366; background-color:#fed; border:1px solid;"/>
        
          <apex:form enctype="multipart/form-data">
            <apex:pageMessages />
            <apex:pageBlock title="Upload an Attachment" rendered="{!NOT(ISNULL(Attachment.Id))}">
        
              <apex:pageBlockButtons location="bottom">
                <apex:commandButton action="{!upload}" value="Save" style="color:#333366; background-color:#fed; border:1px solid;"/>
              </apex:pageBlockButtons>
        
              <apex:pageBlockSection showHeader="false" columns="2" id="block1">
        
                <apex:pageBlockSectionItem >
                  <apex:outputLabel value="File Name" for="fileName"/>
                  <apex:inputText value="{!attachment.name}" id="fileName"/>
                </apex:pageBlockSectionItem>
        
                <apex:pageBlockSectionItem >
                  <apex:outputLabel value="File" for="file"/>
                  <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}" id="file"/>
                </apex:pageBlockSectionItem>
        
                <apex:pageBlockSectionItem >
                  <apex:outputLabel value="Description" for="description"/>
                  <apex:inputTextarea value="{!attachment.description}" id="description"/>
                </apex:pageBlockSectionItem>
        
              </apex:pageBlockSection>
        
            </apex:pageBlock>
          </apex:form>
</apex:page>


Let me know If you have any question.
 
Tina Chang 6Tina Chang 6
Thank you so much @Waqar Hussain SF for your answer! Much appreciated!!! I updated the code to be like the following and found out the Attachment Upload block section was hidden from the Intro Screen - STEP 1 as well, which was not what I was intending to do. I wonder if I have missed anything? I am very new to apex and sorry for not being as accomplished as I need to be! May you please look further into this and advise? Thank you so much for your time!
<apex:pageBlock title="Upload an Attachment" rendered="{!NOT(ISNULL(Attachment.Id))}">
Waqar Hussain SFWaqar Hussain SF
Hi Tina, 

I shared just an example of rerender in my previous code. 

You have to create a boolean variable in your flow and for the desired screen you have to put value (true) in this variable. Then you can use this variable on the page where you are embadding the flow. 

Flow variable values can be used in a Visualforce page. Once you’ve embedded your flow in a Visualforce page, you can use Visualforce markup to get values for variables or sObject variables. To render attachment section you will use flow variable.

FLOW CONTROLLER:
 
public class FlowController {
    public boolean ShowAttachment;
    public FlowController() {
        ShowAttachment = false;
    }
    
    //you will have to put below line on the code in function, which is called on next button for desired screen
    ShowAttachment = true;
}




ON VF page:
<apex:pageBlock title="Upload an Attachment" rendered="{!ShowAttachment}">

For more information, please see the below article.

https://help.salesforce.com/articleView?id=pages_flows_getting_values.htm&type=0

Let me know, If you have any confusion. 

Regards,
Waqar Hussain 
Skype: waqar.hussain991
2011waqar@gmail.com 
This was selected as the best answer
Waqar Hussain SFWaqar Hussain SF
Did the help? Please don't forget to mark best answer if this helped.