Description or help in page layouts

Standard

A question asked often by salesforce.com administrators is if they can customize the page layout with labels being colored or adding anything business process help. You used to be able to add HTML to the labels but this was “fixed” by salesforce.com and no longer works (security issue, so right for salesforce.com to stop it). So no label colors. You can add help text on each field so users can hover of the field to get more info about it. This works most of the time but not all the time. Sometimes you need to write a larger process for people to follow/explain.

If you need to write a longer description or help on an objects page layout you have two choices.

  1. Use Flows (Visual Workflow)
  2. Place a Visualforce page inside your page layout

Flows work sometimes and are great. Still trying to pick up steam with the salesforce.com community. You can create wizards, per say, that will walk users through  a business process. You can add info on Flows to help the users through the process.

Flows are not always the answer, though. Sometimes you just want to give some clear direction on one object to your users. Or maybe you want to explain some new fields you added to the page layout. This is where embedded Visualforce pages work well.

Do not get scared thinking you will need to be an Apex developer to do what I will show. It is a little helpful if you knew some HTML but that isn’t even necessary. The steps I am going to show are easy to follow and you don’t need to be a developer to do them.

For this tutorial we are going to write a Visualforce page explaining new fields we are adding to the Account page layout. The new fields are adding that haven’t previously been on the page layout is personal information including birthday, spouse name, date started at account, hobbies, do they like to talk personal on the phone (checkbox), and additional info. I have added Visualforce pages like this a few times, as I feel it helps users understand what you are doing as an administrator. You can remove the Visualforce page after a certain amount of time, if you want. I think by the end of this you will understand what I am meaning.

So here are the steps.

  1. You have created the new personal information fields but not added them to your page layout yet. You want users to understand why are we adding these fields, how they are used, and how they should be used.
  2. We want to write out the help/description and be able to get have it in HTML format.
    1. Go to Quackit’s HTML editor – http://www.quackit.com/html/online-html-editor/
    2. Type in whatever description/help you want. Here is an example.
    3. You now want to copy the actual HTML.
      1. Click the Source button
      2. Copy everything after <body> up to </body>
  3. Now head over to salesforce.com. I would use a new tab and keep the HTML editor tab in your browser.
  4. In salesforce.com go to Setup–>Develop–>Pages
    1. Click New
    2. Name the label whatever you want. In this scenario I am name it “Personal Information Description”
    3. Go down to the Visualforce Markup text area field.
    4. Delete everything in between <apex:page> and </apex:page>
    5. After <apex:page> paste in the HTML you copied earlier.
      1. Might look something like this:
    6. Click Save
  5. Now go to your contact page layout:  Setup–>Customize–>Contacts–>Page Layouts
    1. Edit one of your page layouts
    2. We want to add the Visualforce page to the page layout either at top or near the new fields.
      1. Drag the Section label somewhere into your page layout. This will hold the Visualforce page.
      2. Name the section whatever you want. I usually then uncheck the Detail and Edit page buttons, as I don’t want the section name showing up.
      3. Choose One Column
      4. Click Ok
      5. Now you want to drag the Visualforce page into the new section
        1. Towards the top click on Visualforce Pages
        2. Find your new Visualforce page and drag/drop it into your new section
        3. Move your mouse over the new blue area you see and click the wrench (on the right of the blue area)
        4. Change the height to something like 50. You can play with this until you get it the size you like.
      6. Save your page layout
  6. Now go to a contact that uses this page layout. You should see your Visualforce page inside the layout!

I hope you can now see how you can add  help or descriptions easily on page layouts using Visualforce pages, all without any development.

Have fun with this and help your users at the same time.

 

EDIT: Thank you to Deepak K. Anand for adding his thoughts to this. You should start your Visualforce page with ObjectName“>. This will allow it to also show up on the edit page. If you leave out standardController then the Visualforce won’t show up on the edit. So you have a choice on if you want or do not want this to show up when someone edits.

3 thoughts on “Description or help in page layouts

  1. Deepak K Anand

    Hey Bill Greenhaw,

    So did you not mention about specifying the standardController attribute in the tag ?

    Like if you want the Visualforce Page to be listed in the top bar when in the Edit Mode of a Page Layout belonging to an Opportunity, then you will need to specify the standardController attribute like this:


    Congratulations
    This is your new Page

    Best,
    Deepak

  2. Deepak K Anand

    Hey Bill,

    This is an excellent explanation and is really great! I am sure this is going to help a lot of Admins out there.

    Best,
    Deepak

  3. Another way that I have done this is with a text field that enters my help information as the default value. That way it shows up on both the edit and detail page automatically. I place it in a one column section of the page layout.

Leave a Reply

Your email address will not be published. Required fields are marked *