Adding rich text fields in Progressive Web Applications

As an application developer, you can add character fields as rich text format (RTF) fields to enable your application users to add formatted text, add images along with text, and so on. 

Application users can perform the following tasks by using RTF fields:

  • Edit and format text. 
  • Add content from Microsoft Word, Microsoft Outlook, or HTML pages.
  • Add images and links along with text.

Important

Rich text fields are displayed as plain text fields in mobile views.

Related topics

Adding-icons-and-images-to-Progressive-Web-Applications

Customization-best-practices-for-developing-PWA

Enabling rich text fields on PWA screens by running a utility

small RTF.png

To add RTF fields or advanced RTF fields in Progressive Web Applications 

  1. In Developer Studio, create a progressive view.
  2. In Palette, in the Data Fields section, drag Character into the view.
    image2021-5-14_16-24-5.png
  3. Select the character field.
    image2021-5-14_16-27-32.png
  4. On the Properties pane, perform one of the following steps:
    • To create a simple rich text field, in the Display > Display Type list, select Rich Text.
      This option creates an RTF field in PWA but does not provide you any additional configuration options.

    • To create an advanced rich text field in the Display > Display Type list, select Advanced Rich Text.
      Select Advanced Rich Text to create an RTF field along with additional configuration options. For example, you can select the RTF toolbar options that are displayed in the application along with other features described in the following section. In the select Display > Display as text list, select True to display the rich text in view-only mode.

      Best practice
      If you source text from a rich-text-enabled field in Mid Tier and display it within a field in a PWA screen, you must make sure that the field in PWA also has rich text enabled. In such a scenario, if you do not enable rich text in the field in PWA, the field may display text along with the HTML source. 

  5. Save the changes.

To perform additional configurations to advanced RTF fields in Progressive Web Applications

Optionally, you can add additional properties to the advanced RTF (ARTF) fields after you select Advanced Rich Text in Developer Studio to do the following:

  • Add a toggle that enables application users to switch the RTF field to show plain text.
  • Enable application users to use @mention in the RTF fields.
  • Show or hide advanced RTF palette options.
  1. Enable @mention to the rich text field.
    1. On the Properties panel, under the Display property group, for the Enable Menu Hotkeys property, select the True value.
    2. In the Value column for the Menu Hotkeys property, click the ellipsis button.
      The Menu Hotkeys dialog box is displayed. 
      image2023-1-9_17-3-43.png

    3. Click Add, and then perform the following steps:

      Property

      Step

      Hotkey

      Click the first row in this column, and then select a character from the list. 
      When application users type this character, the @mention list appears.

      Menu Name

      Click the first row in this column, and then click the ellipsis button image2023-1-10_9-33-47.pngto select a menu from the Menu Selector dialog box.
      This is the menu from which information for the @mention list if obtained.

      Active Link

      Click the first row in this column, and then click the ellipsis button image2023-1-10_9-33-47.pngto select an active link from the Active Link Selector dialog box.

      The active link that you attach to a hotkey must be an existing one and associated with the current form.

      Labels

      Leave this column empty. This column is related to only character fields without any RTF enabled.

      Auto Complete Key Stroke #

      Enter an integer value. 
      This is the number of characters application users have to enter before the @mention list appears.

      RTF Labels

      Click the first row in this column, and then click the ellipsis button image2023-1-10_9-33-47.pngto select the fields from which the @mention list obtains data.

      For example, if you specify a form with all user details in the Menu Name column, you can select the fields representing the following data:

      • User name
      • Device ID
      • User email
      • Company name

      In such a scenario, the @mention in the PWA screens displays the information as shown:
      image2023-1-9_17-59-42.png

      The displayed order of the information is the same as the order in which they are in the RTF Label column.

      Important

      • The @mention list in the PWA screen displays only the first four fields you select in the RTF Labels column.
      • If you select more than four fields, the @mention performs the search in all those fields even though it displays only the first four fields in the PWA screen.
      • If you do not specify anything in the RTF Labels column, Developer Studio uses the first four available fields in the order specified in the form and then displays it in the @mention list in the application.

      Best practice
      Since @mention searches through all the fields you add in the RTF Label column, make sure you add those fields which make search easier to the application users.

    4. Click OK.
  2. Show only relevant RTF field options.
    1. On the Properties panel, beside the Display > Additional RTF Toolbar Configuration property, click the field.

    2. Enter the list of options you want the RTF field to display with the following syntax:
      Option1, Option2 | Option3, Option4, Option5
      The pipe character (|) specifies that the options after it are in a new group. The syntax is case sensitive.

      Example syntax for adding RTF toolbar options

      For example, enter Maximize, Bold, Underline | Image, Link to display the Maximize, Bold, and Underline options with the RTF field. 
      image2023-1-9_21-13-30.png
      The PWA screen displays the following options on the RTF toolbar:
      image2022-12-19_21-30-32.png

      Values for RTF toolbar options

      You must use the following values for the corresponding RTF toolbar options:

      Type

      RTF toolbar option

      Description

      Value





      Basic style




      uEB21-bold_adapt.png

      Bold text

      Bold

      uEB28-italic_adapt.png

      Italicize text

      Italic

      uEB3A-underline_adapt.png

      Underline text

      Underline

      uEB33-strikethrough_adapt.png

      Strikeout text

      Strike

      uEB34-subscript.png

      Subscript

      Subscript

      uEB35-superscript.png

      Superscript

      Superscript

      uEB39-text_formatting_clear.png

      Remove formatting

      RemoveFormat

      uEB8B-copy_formatting.png

      Copy formatting

      CopyFormatting



      Style

      image2022-12-20_9-32-10.png

      Format

      Format

      image2022-12-20_9-32-34.png

      Font

      Font

      image2022-12-20_9-33-5.png

      Font size

      FontSize


      Color

      uEB38-text_colorpicker_adapt.png

      Text color

      TextColor

      uEB22-colorpicker_adapt.png

      Background color

      BGcolor



      Editing

      uE693-search.png

      Find

      Find 

      uEB9D-replace.png

      Replace

      Replace

      uEB9E-select_all.png

      Select all

      SelectAll







      Paragraph



      uEB90-indent_rtl.png

      Outdent

      Outdent

      uEB27-indent_adapt.png

      Indent

      Indent

      uEB1C-align_left_adapt.png

      Justify to the left

      JustifyLeft

      uEB1A-align_center_adapt.png

      Justify to center

      JustifyCenter

      uEB1D-align_right_adapt.png

      Justify to right

      JustifyRight

      uEB1B-align_justify.png

      Justify 

      JustifyBlock

      uEB2D-list_ordered_adapt.png

      Numbered list

      NumberedList

      uEB2E-list_unordered_adapt.png

      Bulleted list

      BulletedList

      uEB30-quote.png

      Quote

      Blockquote



      Link

      uEB29-link_adapt.png

      Add link

      Link

      uEBA3-unlink_adapt.png

      Remove link

      Unlink

      uEA94-arrows_anchor.png

      Add anchor

      Anchor





      Insert

      uEB1E-attachment_image_adapt.png

      Add image

      Image

      uEB36-table_adapt.png

      Add table

      Table

      uEB91-insert_horizontal_line.png

      Add horizontal rule

      HorizontalRule

      uEB1F-attachment_video_adapt.png

      Embed YouTube video

      Youtube

      uEB92-insert_page_break.png

      Insert page break

      PageBreak






      clipboard

      uEA46-scissors.png

      Cut

      Cut

      uE658-files_copy_o.png

      Copy

      Copy

      uEA4A-files_text.png

      Paste

      Paste

      uEB97-paste_plain_text.png

      Paste as plain text

      PasteText

      uEB99-paste_word.png

      Paste Word content

      PasteFromWord

      uEB4B-undo_adapt.png

      Undo

      Undo

      uEB4A-redo_adapt.png

      Redo

      Redo


      uEBA9-move_expand_adapt.png

      Maximize

      Maximize


      image-2023-9-13_10-11-8.png

      View as source

      Source

  3. Save the changes.

To validate the RTF field or advanced RTF field in PWA

  1. In a browser, log in to PWA.
    <serverName>:8080/arsys/pwa/#/login
  2. Change the URL to include the Progressive View form that you created in Developer Studio.
    <serverName>:8080/arsys/pwa/#/forms/<serverName>/<formName>/<viewName>
  3. (Optional) If you want to display more changes you made in Developer Studio, you must sync the cache in Mid Tier. 
    1. Log in to Mid Tier configuration.
      <serverName>:8080/arsys/shared/config/config.jsp
    2. Click Sync Cache.
    3. Refresh the browser displaying the progressive view form.
  4. As an application user, you can perform the following tasks in the RTF editor:
    • Add content that uses standard HTML markup, this RTF editor renders the content without any loss of formatting.
    • Edit the existing rich text content.
    • Copy content from Microsoft Word, Microsoft Outlook, or HTML while retaining most of the supported formatting.

    • You can view the following options in the RTF editor and advanced RTF editor:

      Options in the RTF editor

      Function

      Description

      image2021-5-17_8-52-46.png

      Make the selected text bold, italicized, underlined, or strikethrough.

      image2021-5-17_8-52-27.png

      Select the text color and text highlighting background.

      image2021-5-17_8-53-50.png

      Set the paragraph so that it aligns evenly on the left or center, or justifies the text.

      image2021-5-17_8-54-21.png

      Create an ordered or unordered list.

      image2021-5-17_8-58-14.png

      Create special formatting to any text so that it is displayed prominently as shown in the following example:

      image2021-5-17_9-3-1.png

      image2021-5-17_8-51-59.png

      Set paragraph formatting style such as headings.

      image2021-5-17_8-53-7.png

      Make the selected text subscript or superscript.

      image2021-5-17_8-55-51.png

      Embed a YouTube video when you provide the embed URL.

      image2021-5-17_9-8-10.png

      Insert a URL.
      The URL must contain the protocol such as http:// or  https://.
      For example, enter http://www.docs.bmc.com instead of entering www.docs.bmc.com.

      image2021-5-17_8-57-20.png

      Insert an image into the RTF field.
      You can also copy and paste images into the RTF field.

      image2021-5-17_9-3-48.png

      The undo button removes the last 30 changes made in the RTF editor or reverses the undo action.

      Additional options in advanced RTF editor

      Function

      Description

      image2022-9-2_16-36-51.png

      Set text formatting style such as headings, font, and size.

      image-2023-9-13_10-11-27.png

      Display the text along with source.

      image2022-9-5_11-34-15.png

      Copy formatting and remove text formatting.

      image2022-9-2_16-41-29.png

      Search, replace, and select all text.

      image2022-9-5_12-12-26.png

      Text indentation.

      image2022-9-5_12-14-5.png

      Remove hyperlink from text and add an anchor.

      image2022-9-22_14-47-47.png

      Insert tables.

      image2022-9-8_11-44-5.png

      Insert page breaks for printing.

      image2022-9-5_19-20-41.png

      Cut, copy to clipboard, paste from clipboard, paste as plain text, and paste from Word

      image2022-9-2_16-57-16.png

      Maximize the field to occupy the browser screen.

      How does advanced RTF handle HTML and domains?
      • Any content created in earlier releases that has HTML is executed and rendered according to the HTML tags.
      • HTML tags are compared to the BMC Helix Innovation Suite administration email configuration whitelist.
      • If the tags are not in the whitelist, they are removed and then displayed by the advanced RTF field.




 

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