Paragraph

The Paragraph Display Control allows users to easily create and customize rich text content, including images and links, for clearer and more engaging form communication. This feature enables users to give detailed instructions or descriptions, ensuring clarity in data collection. It is useful for explaining form fields, outlining processes, and guiding users, thereby improving communication and enhancing the overall experience.  A sample screenshot is shown below: 

Figure: Paragraph_Producer View

Figure: Paragraph_Consumer View

Let's explore the following use-case.

Configure Paragraph Control

Let's configure Paragraph Control!

1. Navigate to General tab of Form Designer. Enter all mandatory details required for the Form.
2. In Design Form tab, from the left pane select Controls > Form Controls > Paragraph.
   Drag and drop this control on form designer canvas for configuration. Click Settings icon to view Properties pop-up.

You can view the following tabs for Paragraph control:

• Properties
• Appearance

Properties

In this section, the Application Designer can configure the label name, upload the image, add title and description to the image. To know more about the fields that are available under the Properties section, see Field Description given below:

Figure: Properties

Field Description
This table contains the list of fields and their descriptions that are available under the Properties section: 

General
Label	Specify the unique name for the Paragraph control. This name identifies the Paragraph control on the form. The system displays the validation message as "Enter a label", if you try to save the image control without providing any label to it. Example: Description, Instructions etc.
Include Label	If this toggle button is enabled then the configured label will be displayed alongside the Paragraph control. This option provides flexibility to control the visibility of the label associated with Paragraph control.Figure: Include Label_Producer View Figure: Include Label_Consumer View
Content	Specify the description which will be prominently displayed as the Paragraph text, helping users to quickly identify and understand the associated functionality.

Appearance

This section contains the list of validation setups using which the Administrator can configure the respective control as mandatory, based on condition etc. To know more about the fields that are available under the Appearance section, see Field Description given below.

Figure: Appearance

Field Description
This table contains the list of fields and their descriptions that are available under the Appearance section:

Text
Font Type	Select the type of the font from the drop-down list of available options of font type.
Font Color	Select the type of the font color from the color widget from the provided set of color options. Click  option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Font Size	Select the size of the font from the drop-down list of available options of font type using upwards or downward arrows. A sample screenshot is shown below:Figure: Font Size Drop-down You can also use a horizontal slider to increase or decrease the font size. A sample screenshot is shown below: Figure: Font Size Slider
Font Style	Select the required font style. Available options are as follows: B - Select it to make the Paragraph bold. I - Select it to make the Paragraph italics. U - Select it to make the Paragraph underlined.
Font Alignment	Specify the alignment of the Paragraph. The available options are as follows: - Select it to make the Paragraph as left aligned. - Select it to make the Paragraph as center aligned. - Select it to make the Paragraph as right aligned. - Select it to make it justified.
Margin	The margin is the space outside the border of an element, defining the gap between the element and its neighboring elements. Margins are used to create separation between different elements on a page, ensuring they remain distinct and don't touch or overlap. Example: If you set a top margin of 10px, there will be 10 pixels of space between the top of the element and the element above it. A sample screenshot is shown below: Figure: Margin Specify the top, right, bottom, or left margins of the Paragraph  as needed.
Padding	The padding is the space inside the border of an element, positioned between the border and the content. Padding is utilized to create internal space within an element, ensuring the content inside the element does not touch its edges. Example: If you set a left padding of 10px, the content inside the element will start 10 pixels away from the left border of the element. Specify the top, right, bottom or left padding of the Paragraph  as per your requirement. A sample screenshot is shown below: Figure: Padding
Border
Style	Specify the style of the border. Available options are as follows: None - No border is applied to the Paragraph . Dashed - The border is displayed as dashed line. Solid - The border is displayed as solid line.  Dotted - The border is displayed as dotted line. If the border Style is selected as Dashed, Solid or Dotted, it displays the additional border specifications options such as Side, Width, Color and Corner. A sample screenshot is shown below: Figure: Border Style
Side	Specify the side on which the border should be applied. Available options are as follows: Bottom - Apply the border only at the bottom of the Paragraph. Top - Apply the border only at the top of the Paragraph. Left - Apply the border only at the left of the Paragraph.  Right - Apply the border only at the right of the Paragraph. Select the topmost check box to apply the border on all four sides. A sample screenshot is shown below:Figure: Side
Width	Specify the width of the border to be applied in px. Available options are as follows: 1/4 px 1/2 px 3/4 px 1 px 1 1/2 px 2 px 1/4 px 3 px 4 1/2 px 6 px A sample screenshot is shown below: Figure: Width
Color	Specify the color of the border. Select the required color from the color widget.A sample screenshot is shown below: Figure: Color Widget
Corner	Specify the corner style of the border. This option appears only if border style is selected as Dashed, Solid or Dotted. Available options are as follows: Round - Provides the rounded corner border for the applied border Sharp - Provides the sharp corner border for the applied border
Background
Background Type	Specify the background type of the Paragraph. Available options are as follows: None - Select it to keep the Paragraph background null. Image - Select it provide an image as background of the Paragraph. Solid - Select it provide any color as background of the Paragraph.
Image Upload	This option appears only if background Type is selected as Image. A sample screenshot is shown below: Figure: Image Upload Select and upload the required image using upload icon.
Color	This option appears only if background Type is selected as Solid. A sample screenshot is shown below: Figure: Color Specify the color of the background from the color widget from the provided set of color options. Click option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Corner Radius	Specify how rounded the corners of the border must appear, with higher values resulting in more pronounced rounding. This option is available when the border style is set to Dashed, Solid, or Dotted and the Corner option is selected as Round.