Creating a news-ticker message on the home page

Animated text messages and custom HTML styling can be very effective in gaining users' attention.

Not only do they allow a reasonably large number of characters to be presented on a single line of text but they also provide a visually dynamic "headline news" style of message delivery for what can otherwise be overlooked static text.

You can draw attention to your news message on the Salesforce home page using this custom home page component recipe with the steps listed in the following section.

How to do it...

Carry out the following steps to create a news-ticker message on the home page:

  1. Navigate to the home page components setup page, by clicking the following: Your Name | Setup | Customize | Home | Home Page Components.
  2. Click on New.

    Note

    The New button is found by scrolling down the page to the Custom Components section.

  3. Click on Next (on the Understanding Custom Components splash screen if shown). The Next button is found on the Understanding Custom Components splash screen (this page is only shown if the Don't show this page again checkbox has not previously been checked) as in the following screenshot:
    How to do it...

    Here, we are presented with the Step 1. New Custom Components page.

  4. Enter the name of the custom component in the Name field. Enter the text News Ticker.
  5. Select the HTML Area option from the Type options list.
  6. Click on Next.
  7. Ensure that the Wide (Right) Column option is selected within the Component Position option list.

    Note

    You are unable to change this setting after the component is created.

  8. Check the Show HTML checkbox.

    Note

    The above step is important! Locate and check the Show HTML checkbox, as shown in the following screenshot:

    How to do it...
  9. Paste the following code (as shown in the following screenshot):
    <center>
    <div style="border: 1px solid rgb(51, 153, 255); width: 96%; color: black; font-size: 18px; background-color: rgb(255, 255, 204);" id="NewsTicker">
    <marquee onmouseover="this.scrollAmount=0" onmouseout="this.scrollAmount=6" width="98%">Welcome to the Salesforce CRM Admin cookbook</marquee></div></center><br>
    How to do it...
  10. Click on Save.

    Note

    We have created our News Ticker custom home page component but we are not finished yet. We now need to add the custom home page component to a home page layout.

  11. Navigate to the home page components setup page by going to Your Name | Setup | Customize | Home | Home Page Layouts.
  12. Determine which home page layout to place the component on and click on Edit. Here we are editing the home page layout named DE Default, as shown in the following screenshot:
    How to do it...

    We will be presented with the Step 1. Select the components to show page.

  13. Check the News Ticker checkbox in the Select Wide Components to Show section, as shown in the following screenshot:
    How to do it...
  14. Click on Next.
  15. Move News Ticker to the top position in Wide (Right) Column using the Arrange the component on your home page. section, as shown in the following screenshot:
    How to do it...
  16. Click on Save.

How it works...

By using HTML and in particular the HTML marquee tag and Cascading Style Sheets (CSS), we are able to present a moving text section. You can see what this looks like in the following screenshot:

How it works...

There's more...

Replace the text Welcome to the Salesforce CRM Admin cookbook with a suitable message of your choice.

When entering HTML and JavaScript code into the HTML editor section (in step 2 of the New Custom Component wizard) you must ensure that the code is valid.

Note

Pay particular attention to the displayed warning message:

Please ensure that the HTML code entered below is valid, well formed HTML. Poorly written HTML in this component may cause the entire Home tab to appear incorrectly

There is a maximum of 20 custom components that can be added to a Home Page layout.

Note

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. From http://en.wikipedia.org/wiki/Marquee_element:

The marquee element was first invented for Microsoft's Internet Explorer and is still supported by it. Firefox, Opera, Chrome, and Safari web browsers support it for compatibility with legacy pages.