Adding rich-text-formatting capabilities to a character field

You can add rich-text formatting (RTF) to character fields in browsers so that users can make changes to the format of text in a character field. For example, a user might want to italicize or center text. (Right-to-left (RTL) formatting is not supported in RTF fields.)

You can modify rich text formatting (RTF) properties for the character fields at run-time by using a workflow. For more information, see Defining-Change-Field-active-link-actions.

The following figure shows the RTF dialog box that appears when a user clicks the RTF icon ( RTFicon.gif) next to the field. 

RTF.gif

The rich-text-formatting (RTF) options provide a way for users to apply some basic styling of text and inclusion of images with their text. The options do not provide the level of functionality of a desktop-based word processor such as Microsoft Word.  For information about using the RTF functions, see Using-the-RTF-editor. For information about using the STRIPHTML function in workflow to remove RTF formatting, see Functions.

Considerations when adding plain text to an RTF enabled field

When plain text is added through other sources such as data pushed from a character field to an RTF, or a form that has an RTF-enabled field, only the basic line formatting is retained. 
However, if the content includes valid HTML tags, only the tag-specific formatting is retained. 

The following screenshot shows plain text added to an RTF enabled field, where the basic line formatting is retained:

RTF-Example1.png

The following screenshot shows valid HTML tags for bold and Italics font treatment are added:

RTF-Example2.png

To add rich-text-formatting capabilities to a character field

  1. Create a character field.
  2. In the Properties tab, select one of the following options from the Display Type list:
    • Rich Text—Allows users to click the RTF icon ( RTFicon.gif) and make RTF changes in a separate dialog box

    • Rich Text In Place—Allows users to make RTF changes within the field, which includes a toolbar with a smaller subset of the commands found on the dialog box.

      If you attach a menu to a character field with the Display Type property defined as Rich Text In Place, the RTF toolbar will not appear inside the field if the user selects the menu.

  3. If you select the Rich Text In Place option:
    1. Set the Rows property to 10 or more.
    2. Set the Width property to 500 or more.
      The changes to the Rows and Width properties enable the rich-text-formatting functions to appear when the user clicks in the field.
  4. To allow users to add an image to a character field, complete the procedure below.
  5. Save the field.

To enable dynamic resizing of dynamic fields

You can enable dynamic resizing of RTF fields so that the fields resize to fit the current contents as a user is entering information (text or images), and scroll bars are not required. 

Tip

In modify mode, dynamic resizing of RTF fields fails when you switch among panels (that were initially collapsed) with RTF Auto Resize set to Vertical in a flow layout panel. This issue occurs in all browsers. In create mode, dynamic resizing works for RTF fields. The panels in questions are Collapsible and Accordion Panels.

  1. Create a panel that will contain the RTF fields.
    For more information, see the Creating-panels and Creating-panel-holders sections.
    To avoid the horizontal and vertical scroll bars on the RTF field, set the display property Custom CSS to RTFPanel.
  2. Resize the panel so that it is large enough to hold the RTF fields.
  3. Set the following properties for the panel:

    • Set Layout Style to Flow.
      When you set this property, the panel can contain only one field per row.
      Tabbed Panel Holders support the Flow Layout Style; however, if an RTF grows dynamically, a scroll bar will not appear on the tab. Consequently, users cannot see fields that disappear at the bottom of the panel because of the resized RTF.
      Additionally, if you add a gradient color (Background Color property) or an image (Background Image property) to a panel that includes an RTF field, the color or image might not extend to the bottom of the panel when Flow is selected for the panel's Layout Style property.

      When you select Flow as the Layout Style property for a panel, the fields in the panel are left-aligned and vertically spaced equally. If you add another field after setting the Flow option, that field will not be properly aligned until you select the Flow option again.

    • Set Vertical Spacing to the number of pixels of space between each field in the panel.
    • (Optional) Set the following properties to create margins around the fields in the panel.
      • Panel Bottom Margin
      • Panel Left Margin
      • Panel Right Margin
      • Panel Top Margin
        These Panel Margin properties are not supported on Tabbed Panel Holder fields.
  4. Create RTF fields in the panel as described in the previous procedure.
  5. Set the following properties for each RTF field within a panel:
    • Set Auto Resize to Vertical, or Horizontal, or Both, depending on the content expected in the RTF field. Select Both as this option displays the vertical and horizontal scroll bars on the panel.
      If you set the RTF field to grow Vertically, the field does not show vertical scroll bars. Similarly, for the Horizontal scroll bars. If you select Horizontal or Both, set the Custom CSS property to RTFPanel.

    • Set Maximum Height to 0 (no limit) or to a number that is equal to or greater than the field's Height property.

      While editing contents of the RTF field, scroll bars appear on the RTF field if the contents of the field exceed the maximum limits specified in the display properties.

      Scroll bars might appear while editing the contents of the RTF field. These scroll bars disappear when you tab-out of the RTF field. When a large image or text inside the RTF field is removed, the scroll bars on the panel disappear and the RTF field and its contents resize to the dimensions specified in the display properties.

      For the RTF fields to grow horizontally and vertically, set the Custom CSS display property to RTFPanel.

To allow users to add an image to a character field

Users can add an image to a field with rich-text formatting (RTF) by referencing a URL to an image or through an attachment pool.

Tip

If entries in an .arx file include an RTF field with an image from a URL, the image does not appear in the record after the .arx file is imported to a server. To view the image, users must re-enter the URL.

  1. Create an attachment pool on the form.
  2. Add one or more attachment fields to the pool, depending on how many images you want to allow the users to add to the character field.
    For more information, see Managing-attachments-in-interfaces-by-creating-attachment-pools.
  3. To ensure that the RTF field can store the text, images, and the hidden HTML tags used for formatting purposes, increase the Input Length property, or set the property to 0 (unlimited length).
    The default Input Length property for character fields is set to 255. Inserting an image or a table can insert many more referencing text characters in the field.

  4. To hide the attachment pool, set the Visible property to False.

    You can hide the attachment pool, but the attachment fields should be kept visible.

    Set the Visible property of all the attachment fields to True. If you set the attachment fields to False, the attachments will not be visible in the RTF field.

  5. Create a character field with rich-text formatting capabilities.
    1. For the Display Type property, select Rich Text or Rich Text In Place.

    2. For the Image Attachment property of the character field, select the attachment pool field that you want to link to the character field.

      If you delete an attachment pool that is linked to an RTF field, remove the reference in the Image Attachment property of the corresponding character field.

      For information about setting up the RTF field to hold large images, see the previous procedure.

  6. Save the form.

    If a user adds an attachment image to a field with RTF but clicks the main cancel button to close the editor, the image is removed from the field, but the image remains in the attachment pool until the Browse button in the Image Options dialog box is clicked again. The image also remains in the attachment pool if the user deletes the image from the editor before saving the entry.

 

Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*