icon Person or Group

The Person or Group allows to select users and groups, only one or multiple. Usually allows selection from all users, but can be limited to a specific group in List Settings → Column Settings.

Selecting a user

Common Properties

SharePoint Field




SharePoint Field




JavaScript framework

In this section, you can find basic examples of how to work with the SharePoint fields using JavaScript.

For more examples, check out Working with form fields in JavaScript article. If you are not familiar with the JavaScript framework, get started with the JavaScript basics.


The field is only accessible once the form is rendered, so all calls to the field must be inside fd.spRendered event:

    //make field required
    fd.field('Field1').required = true;

Wait until field is ready

Wait until the field is loaded. The ready method returns a promise that is resolved when the field has been fully initialized and is ready to work with.

fd.field('Field1').ready(function(field) {
    // alert selected user's name
fd.field('Field1').ready().then(function(field) {
    // alert selected user's name

Get or set field value

Get or set the field value in a single selection mode:

//return field value as an object

//get display text
var name = fd.field('Field1').value.DisplayText;

//set field value
fd.field('Field1').value = 'user@mail.com';

Get or set the field value in a multiple selection mode:

//return field value as an array of objects

//set field value
fd.field('Field1').value = ['user@mail.com', 'user2@mail.com'];

Handle change event

Execute a function when a field value has been changed:

fd.field('Field1').$on('change', function(value) {
    //log new value to browser's console

Make field required

Make a field required or optional:

//make field required
fd.field('Field1').required = true;

//make field not required
fd.field('Field1').required = false;

Disable field

Make a field non-editable. The field value can still be changed with JavaScript and saved:

//disabled field
fd.field('Field1').disabled = true;

//enable field
fd.field('Field1').disabled = false;

Get HTML element

Access HTML element inside the field in order to modify it, hide it, or do something else.

//access field's control
var htmlField = fd.field('Field1').$el;

//access field's block, which includes title and control
var htmlFullField = fd.field('Field1').$parent.$el;

Hide field

Hide a field from a user. The field value can still be accessed and changed with JavaScript.

//hide field
fd.field('Field1').hidden = true;

//show field
fd.field('Field1').hidden = false;

Clear field

Clear field value.


Validate users

With a custom validator, you can validate number of users or other information about selected users, before the form is submitted:

        name: 'Length validator',
        error: 'No more than 6 users can be selected',
        validate: function(value) {
            if (value.length > 6) {
                return false;

            return true;

Cоnfigure widget

You can access the widget used by the field. The widget is based on Kendo UI DropDownList in regular mode, and in multiple selection mode it is based on Kendo UI MultiSelect.

// get the widget

// change the widget's configuration
fd.field('Field1').widgetOptions = { template: '<span style="font-weight: bold">#: data.DisplayText #</span>' }

widgetOptions is the same as widget.setOptions({}) but can be defined before widget initialization.

Change dropdown item template

With widget options, you can customize the appearance of the dropdown items.

For example, you can display both the user name and the department in the dropdown with the following code:

fd.spBeforeRender(function() {
    var template = '';
    template += '# if (data.EntityData.Email) { #';
    template += '<img alt="" src="' + fd.webUrl + '/_layouts/15/userphoto.aspx?accountname=#:data.EntityData.Email#&size=S"';
    template += ' class="k-state-default photo" width="40" height="40" /># }';
    template += 'else { # <div class="initials" style="background:#= data._initialsColor #"><span>#: data._initials #</span></div> # } #';
    template += '<div class="ml-2 text-truncate">';
    template += '#: data.DisplayText #';
    template += '# if (data.EntityData.Department) { # <span class="d-block text-muted small">#: data.EntityData.Department # </span> # } #';
    template += '</div>';
    fd.field('Field1').widgetOptions = {
        template: template