Adding RTF fields in Progressive Web Applications

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

      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. 
      
      The PWA screen displays the following options on the RTF toolbar:
      

      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		Bold text	Bold
      		Italicize text	Italic
      		Underline text	Underline
      		Strikeout text	Strike
      		Subscript	Subscript
      		Superscript	Superscript
      		Remove formatting	RemoveFormat
      		Copy formatting	CopyFormatting
      Style		Format	Format
      		Font	Font
      		Font size	FontSize
      Color		Text color	TextColor
      		Background color	BGcolor
      Editing		Find	Find
      		Replace	Replace
      		Select all	SelectAll
      Paragraph		Outdent	Outdent
      		Indent	Indent
      		Justify to the left	JustifyLeft
      		Justify to center	JustifyCenter
      		Justify to right	JustifyRight
      		Justify	JustifyBlock
      		Numbered list	NumberedList
      		Bulleted list	BulletedList
      		Quote	Blockquote
      Link		Add link	Link
      		Remove link	Unlink
      		Add anchor	Anchor
      Insert		Add image	Image
      		Add table	Table
      		Add horizontal rule	HorizontalRule
      		Embed YouTube video	Youtube
      		Insert page break	PageBreak
      clipboard		Cut	Cut
      		Copy	Copy
      		Paste	Paste
      		Paste as plain text	PasteText
      		Paste Word content	PasteFromWord
      		Undo	Undo
      		Redo	Redo
      		Maximize	Maximize

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:

     Options in the RTF editor

     Function	Description
     	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.

     Additional options in advanced RTF editor

     Function	Description
     	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 Failed to execute the [excerpt-include] macro.
       .