LOV (List of Values) Seekbar

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

The LOV Seekbar contains a list of values. It allows the user to define the specified values from the available list of the values.

Usage

When to use
Use the LOV Seekbar if the user needs to select more than one value by moving the Seekbar. LOV Seekbar works best if you want to use the alphanumeric and character based values as the list of values.

LOV Seekbar Configuration

The “LOV Seekbar” element consists of the following properties:

  • UI Configuration
  • Event Configuration

UI Configuration

For the “LOV Seekbar” element, you can configure the following UI properties:

TabProperty NameDescriptionNew Default ValueVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.lovSeekBar 1
BasicCaptionSpecifies the title of the element.LOV Seekbar
BasicInput SourceThis property allows you to configure the source location for the following purposes:
–> Fetch data from the source and the display it on the element.
–> Store data in the source.


You can click one of the following tabs to configure the input source:
1) Data Store:-
If you select this tab, the Input Value box appears. In the Input Value box, select an entity based array type JSON object. After you select an array type JSON object, the application will access the object and then perform one of the following functions:
–> Fetches data from the object and display it in the element
–> Stores data in the object


2) Enumeration:-
If you select this tab, a Select Master list appears. Click the Select Master list, and then it displays a list of enumeration objects from the Data Modeler. In the list, select an enum object. After you select an enum object, the application will perform one of the following functions:
–> Fetch data from the enum and then display it on the element
–> Store data in the enum


Note:- To use the enum object, you need to define enumeration in the Data Modeler.
BasicInput ValueClick in this box and then select an array type object. After you select the object, the application will perform one of the following functions:
–> Fetch data from the object and then display it in the element.
–> Store data in the object.
{{fx}}When Input Source = Data Store
BasicTooltipThis property allows you to configure the tooltip feature as follows:

–> Yes:- Selecting this value activates the tooltip feature for the LOV Seekbar.

–> No:- Selecting this value deactivates the tooltip feature for the LOV Seekbar.
marked
BasicVisibleAllows you to define the default visibility of the UI element. marked
BasicEnableAllows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.marked
BasicMandatoryAllows you to configure the element as a mandatory element.unmarked
BasicMessage on FailureThis property becomes visible when you select Yes under Mandatory. In the Message on Failure box, enter the error message that the application will display if the user does not perform the function on the element. Requiredwhen mandatory = checked
BasicDefault ValueThis property allows you to define the default value of an element.

To define the default value:
–> Click in this box, and it displays the list of the pre-define functions, attributes, and element IDs.
–> In the list, select an attribute from which the application will fetch the default value and then display it in the element.
{{fx}}
BasicParent Element IDIn this list, you can select the ID of an element. Based on the selected ID of an element, the current element will display the list of values.
To select the element ID:
i. Click in this box, and it displays the list of the pre-defined functions, attributes, and element IDs.
ii. In the list, select an element’s ID.
{{fx}}
UI PropertiesStylesAllows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.NoDefault
UI Properties- Alignment & SpacingMarginAllows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.Theme Variable (Margin)
UI Properties- CaptionFontSelect the font type (For example: – Arial) of the element’s caption.Theme Variable (Font Family)
UI Properties- CaptionSizeEnter the font size of the caption.12
UI Properties- CaptionColorSelect the color of the font of the caption.Theme Variable (Caption)
UI Properties- CaptionBoldEnter the thickness of the character of the element’s caption in the range of values from 1 to 9.4
UI Properties- CaptionStyleSelect the style of font (For example:- Italic) of the captionNormal
UI Properties- Shape & DecorationTypeUnder the Shape and Decoration section, this property has the two following options:

Autofill:- If you select this option, you cannot change the element’s dimensions. When you drag the element to the canvas, this option is selected by default.

If you select Auto Fill, vDesigner places the element with the default dimensions.

Manual:- If you select this option, you can change the dimensions of the element.
UI Properties- Shape & DecorationWidth ValueEnter the width of the element in the pixel unit or percentage unit.100%
UI Properties- Shape & DecorationHeight ValueEnter the height of the element in the pixel unit.Set as ___ & Disable
UI Properties- Shape & DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.Show & Disable
UI Properties- Shape & DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.Show & Disable
UI Properties- Shape & DecorationPointer Font SizeIn this box, enter the value (For example: – 18) that specifies the font size of the text/value that the pointer of the LOV Seekbar displays.12
UI Properties- Shape & DecorationSelect ColorClick the Color box and then define the color of LOV Seekbar when the user places the mouse pointer on the LOV Seekbar to select a value.Theme Variable (Primary)
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
100%
UI Properties- Shape & DecorationUnselect ColorClick the Color box and then define the color of the LOV Seekbar when the user does not place the mouse pointer on the LOV Seekbar.#e0e0e0
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
100%
UI Properties- Shape & DecorationThumb ColorClick the Color box and then define the color of the thumb of the LOV Seekbar. The user moves the thumb to select the value on the LOV Seekbar.Theme Variable (Primary)
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
100%
UI Properties- Shape & DecorationPointer ColorClick the Color box and then define the color of the pointer of the LOV Seekbar.
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
100%
UI Properties- Shape & DecorationActive ColorClick the Color box and then define the color of the LOV Seekbar when the LOV Seekbar element is active and the user can use it.Theme Variable (Primary)
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
100%
UI Properties- Shape & DecorationInactive ColorClick the Color box and then define the color of the LOV Seekbar when the LOV Seekbar element is inactive and the user cannot use it.#1068eb
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
100%
UI Properties- Shape & DecorationPointer Text ColorClick the Color box and then define the color of the value that the pointer of the LOV Seekbar displays to the user.#161616
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
100%
DataEntity PathThis property allows you to map an attribute to the element. You define the JSON based attributes in the entity in the Data Modeler module.
To define the entity path:
–> Click in the Entity Path box, and a list expands.
–> The list displays several attributes from the entity.
–> In the list, select an attribute to map it to the element.

After the user performs the function on the element, the application can perform the following functions:
a. Fetches data from the attribute and then displays it in the element.
b. Stores data in the attribute.
{{fx}}

Event Configuration

For the “LOV Seekbar” element, you can configure the following event:

  • onSeek
Was this article helpful?
YesNo