Lookup control basic properties

Title

Specify text of the title that will appear next to the Lookup control.

//returns the control's title as a string
fd.control('Control1').title

//sets the control's title
fd.control('Control1').title = 'Last Name'

Name

A unique identifier for the control.

fd.spRendered(function(){
    //can access the control using its Name:
    fd.control('Control1').ready(function(control) {
       // alert selected option as a text string
       alert(control.value.Title);
    });
 });

Required

Select if the control will be required to submit the form or not.

//returns the control's required status as true/false
fd.control('Control1').required;

//sets the control's required status
fd.control('Control1').required = true;

Hint

Defines a placeholder text that appears in the input before a user starts typing:

//sets the control's Hint
fd.control('Control1').placeholder = "Enter your name";

Orientation

Select if the title will appear to the left of the control, or right above it.

Read-only

Define whether a user can view or edit the contents of the control:

Class

Add a CSS class to the control, which comes in handy with CSS or even JavaScript code. This will work like class attribute for an HTML tag.

Same class can be applied to multiple controls, and then you can use CSS to modify the appearance of these controls. For example, here we’ve used the following CSS code in CSS editor to give controls with my-class a blue background, white text and rounded corners, with a little bit of padding:

.my-class {
    color: #FFFFFF;
    padding: 10px;
    background-color: #1E90FF;
    border-radius: 30px;
}

Style

Add custom CSS style to the control. This will work like style attribute for an HTML tag.

This style will allow you to hide the control, making it invisible to user (but still usable with JavaScript):

display: none;

You can also apply different styles to it. For example, the following style will allow you to add a thin gray border around the control:

padding: 10px;
border: 1px solid #CED4DA;

Visible

Select if the control’s title will be visible or not.

Width

Specify in pixels how much space should the control’s title take.

Font Size

Specify the font size for the control’s title.

Font Style

Select if you want Normal or Italic text in the title.

Font Weight

Select if you want Normal, Semibold or Bold text in the title.

Font Color

Specify a color for the control’s title text. Select the color from the palette or enter the Hex color code.

Wrap

Select if the title’s text should wrap in multiple lines when there is not enough space, or just be shortened until it fits (with dots… at the end).

Width

Specify in pixels how much space should the control’s control take.

Font Size

Specify the font size for the control’s control.

Font Style

Select if you want Normal or Italic text in the control.

Font Weight

Select if you want Normal, Semibold, or Bold text in the control.

Font Color

Specify color for the control’s title text. Select the color from the palette or enter the Hex color code.