Carousel

The Carousel control is used to sequentially display a set of images with links to the specific page. It allows you to move forward or backward with displayed group of images by scrolling left or right. A sample screenshot is shown below: 

Figure: Carousel

Let's explore the following use-case.

Configure Carousel Control

Let's configure Carousel 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 > Carousel.
   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 Carousel control:

• Properties
• Appearance

Properties

This section contains the list of properties using which the Administrator can configure the respective control's name, subtitles etc. 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 name for the Carousel control. This name identifies the Carousel control on the form.
Include Label	If selected, then the configured label will not be displayed on the form. If not selected, then the configured label will not be displayed on the form.
Render Image as	Select the one of the following options either to display the image as a thumbnail or a full page. Available options are as follows: Thumbnail - Select it to display the image as a small image representation of the full image. It will be helpful to have a quick look on images while browsing a group of images and hence managing it effectively. Full Image - Select it to display the image as a full-size image. It will be helpful to have massive visual impact on the user. By default, the Render Image as is selected as Full Image.
No. of Image per page	This field is visible only if Render Image as is selected as Thumbnail. Select the numeric value from the drop-down list. The available options are from 1 to 7. The minimum selectable value is 1. The maximum selectable value is 7.   For Example - If you select the numeric value as 4 then the number of images displayed per page are 4.
Image Upload	Select and upload the required image using upload icon. It loads the PC window. You can upload one image at a time or multiple images from the computer. Figure: Single Image Selection Figure: Multiple Images Selection
Title	Specify the relevant title for the selected image. The title should be crisp and short. System displays the following validation messages if you try to attempt adding next image without mentioning title of the selected image. Figure: Title Validation Message
Description	Specify the description to be displayed along with the title of the image. The description provides brief introduction about the relevant image.
URL	Specify the URL to which the Image should redirect on click. The URL will get open in next tab. For Example - As shown in the below screenshot, the Image_1 will redirect to the Incident Mangement module link, Image_2 will redirect to the Service Request Managment module link and Image_3 will redirect to the Change Management module link. Figure: URL link
	Click + (plus) icon to add more than image. System displays the following validation message if you try to attempt the next row without mentioning mandatory field values. Figure: Add New Row Validation Message
	Click delete icon to delete any selected row. System displays the following confirmation message before deleting it. Figure: Delete Confirmation Message

Appearance

This section contains the list of validation setups using which the Application Designer 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 - Image

Figure: Appearance - Caption

Figure: Appearance - Container Background

Figure: Appearance - Container Border

Figure: Appearance - Container Background

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

Image
Columns	Select the number of columns in which the images should be rearranged. Increase or decrease the count using upward and downward arrows respectively. An arrow is displayed if the selected number of images are more than the selected number of columns. The two-page dots icon is displayed towards the bottom if selected number of images are more than selected number of columns. A sample screenshot is shown below: Figure: Two Dots For Example: If selected number of images are 5 and selected number of columns are 3 then an arrow and page dots will be displayed.
Images to Scroll	Select the number of images to be scrolled while navigating the images using scroll. For Example:  If the selected number of images are 5, selected number of columns are 3 and Image to Scroll is 2 then it will load the 4th and the 5th image while scrolling.
Spacing	Select the spacing between the images from the drop-down list. Available options are as follows: Default - Select it to keep the default spacing between the images. Custom - Select it to specify the specific custom spacing between the images.
Custom Spacing	This field is visible only if Spacing is selected as Custom. Select the count from the drop-down list by which the images should be separated. You can also use the slider to increase or decrease the spacing size. A sample screenshot is shown below: Figure: Custom Spacing The minimum count is 1px and maximum count is 5px.
Image Border
Style	Specify the style of the border. Available options are as follows: None - Select it to keep the image without any border. Dashed - Select it to keep the image border as dashed line. Solid - Select it to keep the image border as solid line. Dotted - Select it to keep the image dotted line. If the image border Style is selected as Dashed, Solid or Dotted, it displays the additional image border specifications options such as Side, Width, Color and Corner. A sample screenshot is shown below: Figure: Image Border Style
Side	Specify the side on which the image border should be applied. Available options are as follows: Bottom - Select it to apply the image border only at the bottom of the image. Top - Select it to apply the image border only at the top of the image.  Left - Select it to apply the image border only at the left of the image. Right - Select it to apply the image border only at the right of the image.  Select the topmost check box to apply the border on all four sides.
Width	Specify the width of the image 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 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	This option appears only if image border style is selected as Dashed, Solidor Dotted. Available options are as follows: Round - Select it to provide the rounded corner border for the applied border. Sharp - Select it to provide the sharp corner border for the applied border.
Caption
Title	Specify the title. You can specify the font type, font color, font size, font style and font alignment.
Description	Specify the description. You can specify the font type, font color, font size, font style and font alignment.
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 downwards 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 font as bold. I - Select it to make the font as italics. U - Select it to make the font as underlined.
Font Alignment	Specify the alignment of the font. The available options are as follows: - Select it to make the font as left aligned. - Select it to make the font as central aligned. - Select it to make the font as right aligned. - Select it to make it justified.
Container Border
Style	Select the style from the drop-down list. Available options are as follows: None Dashed Solid Dotted
Container Background
Background Type	Select the background type. Available options are as follows: None Image Solid
Image Upload	This field is visible only if Container Background Type is selected as Image. Select the required image using the upload button. A sample screenshot is shown below: Figure: Container Background - Image Upload
Color	This field is visible only if Container Background Type is selected as Color. Select the required image using the color pallet. A sample screenshot is shown below: Figure: Container Background - Color