This documentation supports the 23.3 version of BMC Helix Innovation Suite (AR System and BMC Helix Innovation Studio).

To view an earlier version, select the version from the Product version menu.

Adding RTF 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.


Related topics

Creating common data fields

Developing the application interface

Configuring email profiles and templates Open link

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.
  3. Select the character field.
  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 Advance Rich Text.
      Select Advance Rich Text to create an RTF field for additional options to configure the RTF field. For example, you can decide which RTF toolbar options 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.

  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 Advance 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. On the Properties pane, in the Display > Switch to Text View list, select True.
    This enables a toggle button on the rich text field where application users can view the content as plain text. This option appears only after you set Display Type to Advance Rich Text.
  2. 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. 


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

      Property

      Step

      HotkeyClick 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 to 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 to 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 not relevant for RTF fields.

      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 to select the fields from which the @mention list obtains data.

      For example, if you have specified the form with all user details in the Menu Name column, in the RTF Labels, you can select the fields for user name, device ID, user email, and company name as shown in the following example:

      If you do not specify anything, 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.

    4. Click OK.

  3. 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.

      For example, enter Maximize, Bold, Underline | Image, Link to display the Maximize, Bold, and Underline options with the RTF field. 

      The PWA screen displays the following options on the RTF toolbar:

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

      TypeRTF toolbar optionDescriptionValue





      Basic style




      Bold textBold

      Italicize textItalic

      Underline textUnderline

      Strikeout textStrike

      SubscriptSubscript

      SuperscriptSuperscript

      Remove formattingRemoveFormat

      Copy formattingCopyFormatting



      Style

      FormatFormat

      FontFont

      Font sizeFontSize


      Color

      Text colorTextColor

      Background colorBGcolor



      Editing

      FindFind 

      ReplaceReplace

      Select allSelectAll







      Paragraph



      OutdentOutdent

      IndentIndent

      Justify to the leftJustifyLeft

      Justify to centerJustifyCenter

      Justify to rightJustifyRight

      Justify JustifyBlock

      Numbered listNumberedList

      Bulleted listBulletedList

      QuoteBlockquote



      Link

      Add linkLink

      Remove linkUnlink

      Add anchorAnchor





      Insert

      Add imageImage

      Add tableTable

      Add horizontal ruleHorizontalRule

      Embed YouTube videoYoutube

      Insert page breakPageBreak






      clipboard

      CutCut

      CopyCopy

      PastePaste

      Paste as plain textPasteText

      Paste Word contentPasteFromWord

      UndoUndo

      RedoRedo


      MaximizeMaximize
  4. 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:

      FunctionDescription

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

      Select the text color and text highlighting background.

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

      Create an ordered or unordered list.

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

      Set paragraph formatting style such as headings.

      Make the selected text subscript or superscript.

      Embed a YouTube video when you provide the embed URL.

      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.

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

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

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

      Copy formatting and remove text formatting.

      Search, replace, and select all text.

      Text indentation.

      Remove hyperlink from text and add an anchor.

      Insert tables.

      Insert page breaks for printing.

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

      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.
      • Domains are also compared to the BMC Helix Innovation Suite administration email configuration whitelist and only valid domains are rendered as a link.
        For more information about the whitelist, see Configuring email profiles and templates Open link .


Was this page helpful? Yes No Submitting... Thank you

Comments