Common field properties - SharePoint
This article covers common field properties, shows their location in web editor’s UI, and provides examples of how to use them in custom JavaScript.
SharePoint field
These read-only properties are only available for fields from the connected SharePoint list or library.
Name
The internal name of the SharePoint column.
JavaScript
The Name property allows to work with the field via JavaScript code, like this:
fd.spRendered(() => {
// can access the field using its Name:
fd.field('Title').value = 'Project Delta';
});
Important
The Internal name can’t be changed. You can only change the display name of the column.
Required
Indicates whether the field is required.
You can change this property in SharePoint column settings:
Or using the JavaScript:
// returns the field's required status as true/false fd.field('Text1').required; // sets the field's required status fd.field('Text1').required = true;
Type
Indicates the column type.
You can change the column type in SharePoint column settings:
General
Title
Specify text of the title that appears next to the field.
JavaScript
Use this code to get or set the field’s title dynamically:
// returns the field's title as a string
fd.field('Text1').title;
// sets the field's title
fd.field('Text1').title = 'Last Name';
Toggle the visibility of the Title on/off:
Name
Note
This property is only available for common fields. See the read-only equivalent for SharePoint fields
A unique identifier for the field.
With Name, you can:
Read the field’s value from Plumsail Forms connector
Select the field in custom JavaScript
fd.rendered(() => { // Surname is the field's Name property: fd.field('Surname').value = 'John Doe'; });
Required
Note
This property is only available for common fields. See the read-only equivalent for SharePoint fields
Define if a user needs to fill this field to submit a form.
JavaScript
Use this code to get and set field’s required status
// returns the field's required status as true/false
fd.field('Text1').required;
// sets the field's required status
fd.field('Text1').required = true;
Hint
Note
This property is only available for Single-line Text, Multi-line Text, Number, Drop Down, Date and Time, and Date fields.
Defines a placeholder text that appears in the input box before a user starts typing:
JavaScript
Use this code to get or set the field’s placeholder text dynamically:
// sets the field's Hint
fd.field('FieldName').placeholder = 'Enter your name';
Description
Add a description to the field.
It appears as small text right under the field.
Read-only
Note
This property is only available for SharePoint fields.
Define whether a user can edit the contents of the field:
Layout
Select if the title appears to the left of the field, or right above it.
Class
Add a CSS class to the field, which comes in handy with custom CSS or JavaScript. This works like class attribute for an HTML tag.
You can add the same class to multiple fields, and use single CSS rule to modify their appearance.
For example, add the following code to CSS editor to give fields with my-class
a blue background, white text, rounded corners, and a little bit of padding:
.my-class { color: #FFFFFF; padding: 10px; background-color: #1E90FF; border-radius: 30px; }
To access this property, click the “More options” bar at the bottom of General category.
Style
Add custom CSS style to the field. This works like style attribute for an HTML tag.
For example, make the field invisible to users, while keeping it usable in JavaScript:
display: none;
As another example, add a thin gray border around the field:
padding: 10px; border: 1px solid #CED4DA;
To access this property, click the “More options” bar at the bottom of General category.
Rules
Add a set of conditions to hide or disable the form element based on form state. Click the gear icon inside the respective property to manage them:
Each condition consists of a field to check, the check to perform, and optionally another field or value to check against. These conditions fall under the following categories:
Checking whether a field is valid or empty
Comparing a field value with another field or a fixed value
Checking whether a field value matches any of the given values
Select whether ANY or ALL conditions should be met to hide or disable the form element:
For more complex conditional logic, use the custom JavaScript framework.
Hide
Define one or more conditions to hide this form element based on form state. To manage these no-code conditions, click the gear icon.
Disable
Define one or more conditions to disable this form element based on form state. To manage these no-code conditions, click the gear icon.
Title
These properties allow you to customize appearance of the field’s title.
Width
Specify in pixels how much space should the field’s title take.
Font
Specify the font size for the field’s title.
Change the formatting of the field’s title using these settings:
font size:
font color. Use the color picker or enter the hex color code:
font style: normal, bold, or italic:
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).
Control
These properties allow you to customize appearance of the field’s main area.
Width
Specify in pixels how much space should the field’s input box take.
Font
Change the formatting of the field’s input box using these settings:
font size:
font color. use the color picker or enter the hex color code:
font style: normal, bold, or italic:
