How to create an HTML field - Answers - Salesforce Trailblazer Community
Trailblazer Community
Ask Search:
Titanium FireTitanium Fire 

How to create an HTML field

We would like to create a new custom field that has HTML colour option.  Users can add data and then select the colour of the text. 

If that option is not possible, we could set this field to have a fixed colour option.

Charmaine Rhule
TitaniumFire Ltd
Nebojsa (Nash) ZgonjaninNebojsa (Nash) Zgonjanin
Your best bet is to laverage Rich Text type of custom field unless you want to go toward Visual Force page development.

Using Rich Text Area Fields

Available in: Contact Manager, Group, Professional, Enterprise, Unlimited, and Developer Editions

User Permissions Needed
To create or change custom fields:"Customize Application"

To improve the appearance of text, including adding images and hyperlinks, create rich text area custom fields. Rich text area fields use the Salesforce HTML editor to format content.

Implementation Tips

Before creating rich text area custom fields, note the following:

  • Salesforce supports up to 32,768 characters for each rich text area field, including the HTML tags. If desired, you can set a lower limit.
  • When you view or print content, Salesforce preserves the formatted version of the HTML in rich text area fields.
  • Searches of content that contains rich text area fields ignore images and tags.
  • Deleting a rich text area field moves it to the Deleted Fields section on the custom object or Salesforce Knowledge article types.
  • There are no limits to the number of rich text area and long text area fields that an object can contain, although your Edition's limit for the total number of custom fields allowed on an object, regardless of field type, applies. Each object can contain a total of 1.6 million characters across long text area and rich text area fields. The default character limit for long text area and rich text area fields is 32,768 characters. A long text area or rich text area field needs to contain at least 256 characters.
  • Maximum size for uploaded images is 1 MB. Only gif, jpeg and png file types are supported.
  • You can only convert rich text area fields into long text area fields. Any images are deleted the next time the long text area field is saved.
  • You can't add a hyperlink to an image.
  • There is no support for disabling specific rich text area features. For example, you can't disable support for hyperlinks or images on certain fields.
  • HTML code is not supported in the Salesforce HTML editor. HTML code is treated as text.
  • JavaScript or CSS is treated as text. For example, if you're creating an Idea through the API, any JavaScript or CSS code is removed without warning.
  • If you're creating an Idea through the API, some tags and attributes are filtered without warning. Salesforce supports a limited number of approved HTML tags.
  • Rich text area fields can be filtered and summarized in reports, but the HTML tags are included as text.
  • Only the first 254 characters in a rich text area or a long text area is displayed in a report. If you download the report, the entire field is available.
  • When a rich text area field is used in a formula, the HTML tags are stripped out before the formula is run. For example, when a rich text area field is used in a validation rule's criteria, the HTML tags are removed before the evaluation.
  • Rich text area fields aren't available in self service portals. They are available in partner portals and customer portals.
  • Images uploaded within a rich text area field are extracted in the organization's weekly export and included in the exported data.
  • The mobile application treats the rich text area field like a long-text area field, which doesn't support formatted HTML content and images. The mobile application truncates the field at 1,000 characters, and the 1,000 character limit includes HTML markup. Administrators should consider removing rich text area fields from mobile page layouts. If a mobile user edits a rich text area field containing an existing text entry over 1,000 characters, the mobile application will truncate the text in the field.
  • The text part of rich text area fields counts towards data storage for the entity that contains the field. The uploaded images within the rich text area fields are counted towards file storage for the entity that contains the field.
  • The rich text area field is available in the API.

Best Practices

  • You can specify how big the editor box should be for this field by configuring the “Number of lines displayed” property in the field’s setup.
  • We recommend using the rich text area field in a one column page layout; the field's formatting toolbar is ideal for a single column.
  • To upload many images, use the API version 20 or later. For more information, see Configuring the Data Loader to Use the Bulk API and the Force.com Web Services API Developer's Guide. Note
    When uploading images with the API, the alt attribute is not populated unless specified separately.
Steve MolisSteve Molis
Can you explain where and how this field is being used?
Titanium FireTitanium Fire
Hello, the New field is expected to be added to the top of Leads and Contact pages and
will act an alerts
or to highlight IMPORTANT information such as do not call.

Users can generate this alert as and when need. It will not be a compulory field requirement.

Charmaine
Steve MolisSteve Molis
So you're trying to highlist the text that the user enters in a Text field?  I think you might need to use VisualForce for this.
Nebojsa (Nash) ZgonjaninNebojsa (Nash) Zgonjanin
Use formula custom field and image or gif to Alert users.

Here you go:

Image Links

Yahoo! Instant Messenger™ Image

This formula displays an image that indicates whether a contact or user is currently logged in to Yahoo! Instant Messenger. Clicking the image launches the Yahoo! Instant Messenger window. This formula uses a custom text field called Yahoo Name to store the contact or user’s Yahoo! ID.

IF(ISBLANK(Yahoo_Name__c),"", HYPERLINK("ymsgr:sendIM?" & Yahoo_Name__c, 
IMAGE("http://opi.yahoo.com/online?u=" & Yahoo_Name__c & "&m=g&t=0", " ")))

For details about using these functions, see IF, LEN, HYPERLINK, and IMAGE.

“Skype Me™” Auto Dialer Button

This formula displays an image that looks like a push button. Clicking the button automatically dials the specified phone number.

HYPERLINK("callto://" & "+1" & Phone, 
IMAGE("http://goodies.skype.com/graphics/skypeme_btn_small_blue.gif", 
"Click to Skype"))

For details about using these functions, see HYPERLINK and IMAGE.

Flags for Case Priority

This formula displays a green, yellow, or red flag image to indicate case priority.

IMAGE( 
CASE( Priority, 
"Low", "/img/samples/flag_green.gif",
"Medium", "/img/samples/flag_yellow.gif",
"High", "/img/samples/flag_red.gif", 
"/s.gif"), 
"Priority Flag")

For details about using this function, see IMAGE.

Color Squares for Case Age

This formula displays a 30 x 30 pixel image of a red, yellow, or green, depending on the value of a Case Age custom text field.

IF( Case_Age__c > 20, 
IMAGE("/img/samples/color_red.gif", "red", 30, 30),
IF( Case_Age__c > 10,
IMAGE("/img/samples/color_yellow.gif", "yellow", 30, 30),
IMAGE("/img/samples/color_green.gif", "green", 30, 30),
))

For details about using these functions, see IF and IMAGE.

Traffic Lights for Status

This formula displays a green, yellow, or red traffic light images to indicate status, using a custom picklist field called Project Status. Use this formula in list views and reports to create a “Status Summary” dashboard view.

IMAGE( 
CASE(Project_Status__c, 
"Green", "/img/samples/light_green.gif",
"Yellow", "/img/samples/light_yellow.gif",
"Red", "/img/samples/light_red.gif", 
"/s.gif"), 
"status color")

For details about using these functions, see IMAGE and CASE.

Stars for Ratings

This formula displays a set of one to five stars to indicate a rating or score.

IMAGE( 
CASE(Rating__c, 
"1", "/img/samples/stars_100.gif",
"2", "/img/samples/stars_200.gif",
"3", "/img/samples/stars_300.gif", 
"4", "/img/samples/stars_400.gif", 
"5", "/img/samples/stars_500.gif", 
"/img/samples/stars_000.gif"), 
"rating")

For details about using these functions, see IMAGE and CASE.