Getting Started with Salesforce Flow – Part 13 (Hide Date Picker and apply Font-family)

Getting Started with Salesforce Flow – Part 13 (Hide Date Picker and apply Font-family)

Last Updated on December 19, 2020 by Rakesh Gupta

This is a continuation of my article Lightning Flow tips and tricks, In that, I had discussed various tips and tricks related to Flow. This article goes a step ahead and explains, how to hide a date picker and how you can apply different font-family to your Flow elements. Let’s start with a business use case

Business Use Case 1: –  Rachel Gillett is working as a System administrator at Universal Containers. She has created a Student Registration form using old Flow, as shown in the following screenshot

Student Registration Form
Student Registration Form

She wants to remove date picker from the right of Date of birth field in a flow (i.e. Student Registration Form). 

Solution for the above business requirement

1. First of all, embed Student Registration Form, Flow into a Visualforce page, as shown in the following code:

<apex:page>
<br/>
<center>
<font size="5" color="Orange" > Student Registration Form</font>
</center>
<br/>
<flow:interview name="Student_Registraion_Form" finishLocation="{!URLFOR('/home/home.jsp')}" buttonLocation="bottom"/> 
</apex:page>

 

It will look like the following screenshot

Student Registration Form - Embedded into the VF Page
Student Registration Form – Embedded into the VF Page

Note: – If you want to display the Next or Finish button at the bottom or top of the page then use buttonLocation=”bottom” or “top”.

2. The next step is to apply cascading style sheets, to remove the date picker. Use the following style sheet to your Visualforce page. 

<apex:page>
<br/>
<center>
<font size="5" color="Orange" > Student Registration Form</font>
</center>
<br/>
<style type="text/css">
div.Datepickerhide span.dateInput span.dateFormat{
display:none;
}
</style>
<apex:page>

Student Registration Form - Without Date Picker

Student Registration Form – Without Date Picker

Finally, it will look like the preceding screenshot, after hiding the date picker from Date of birth field.

Business Use Case 2: –  Now she wants to apply Color: Green,  font-family: Courier New to Date of Birth and Communication Address fields of the existing Student Registration Form Flow. 

Solution for the above business requirement

Edit the Visualforce page to incorporate the below mention CSS. Where FlowDate and FlowTextArea are Flow Style Class for Date field labelText area field label respectively.

.FlowDate {
color: Green;
font-family: Courier New;
}
.FlowTextArea {
color: Green;
font-family: Courier New;
}

once you’re done, reload the Visualforce page, and it will look like the following screenshot

Student Registraion Form - with Font-family
Student Registration Form – with Font-family

Complete Code:-

<apex:page>
<br/>
<center>
<font size="5" color="Orange" > Student Registration Form</font>
</center>
<br/>
<style type="text/css">
div.Datepickerhide span.dateInput span.dateFormat{
display:none;
}
.FlowDate {
color: Green;
font-family: Courier New;
}
.FlowTextArea {
color: Green;
font-family: Courier New;
}
</style>
<apex:page>
Have feedback, suggestions for posts, or need more information about Salesforce online training offered by me? Say hello, and leave a message!

9 thoughts on “Getting Started with Salesforce Flow – Part 13 (Hide Date Picker and apply Font-family)

  1. Hi Rakesh,

    I am using below code to remove date picker but still showing data picker in view.

    Student Registration Form

    div.Datepickerhide span.dateInput span.dateFormat{
    display:none;
    }

    .FlowDate {
    color: Green;
    font-family: Courier New;
    }

    .FlowTextArea {
    color: Green;
    font-family: Courier New;
    }

  2. nice article Rakesh. 🙂

    just one question, with the CSS

    .FlowDate {
    color: Green;
    font-family: Courier New; }

    .FlowTextArea {
    color: Green;
    font-family: Courier New; }

    This CSS will make all the other Date field and TextArea field on my flow on same style right?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.