Form Sets

General Info

Form Sets allow you to design additional forms for SharePoint List or Library.

By default, each List only has three forms - New, Edit and Display. Each additional Form Set allows you to add three more forms - also New, Edit and Display, but a Form Set doesn't have to contain all three forms, it can be just one or two.

Form Sets UI

You can select currently active Form Set in an upper right corner, in the drop-down. Default Form Set is what all users see if they are not redirected.

Add new Form Set by clicking + sign next to the currently selected Form Set. Clicking Pen Icon allows you to edit properties of the currently selected Form Set. Trash bin icon allows you to delete a Form Set. After creating a Form Set, do not forget to save every form you plan to use or it might be missing.

Automatic routing based on SharePoint group membership

When you create a Form Set, straight away, you can configure automatic routing for the members of certain groups:

Form Sets Configuration

  • Name - the name of the Form Set, can be anything you want, just makes it easier to find among all the Form Sets.
  • Order - determines the order in which to open Form Sets if conditions are met. The lower the Order value, the higher the priority for Form Set to open.
  • Open forms when a user belongs... - select all groups user must belong to in order to be redirected. Note! Must select something in order for redirection to work.
  • Excluding the selected groups - will not redirect the user that belongs to the previously picked groups, if the user also belongs to one of the groups selected here.

Custom routing

You are not limited to checking current user's group membership, using custom routing you can use any logic to redirect users to specific form. With custom routing, you can check current item's field values, user's properties, such as title or department, or any other information from SharePoint. Based on this information, you can redirect users to different Form Sets or URLs.

Custom routing always takes priority over group routing. So, if your custom code returns ID of a Form Set, users will get redirected to the corresponding URL or Form Set all the time, even if they do not belong to the selected groups for this Form Set. Custom routing is configured for all Forms and Form Sets of the current Content Type. Each Content Type has its own custom routing configuration.

To add custom routing conditions, click Routing button:

Form Routing button

Custom routing is based on JavaScript with SharePoint Patterns & Practices (PnP) JavaScript Core Library and several predefined variables describing the current context. PnP library contains a fluent API for working with the full SharePoint REST API, allowing you to easily get any necessary information from SharePoint.

Some predefined variables accessible from your code:

  • webUrl - URL of the current site
  • formUrl - URL of the current form
  • listId - ID of the current list
  • itemId - ID of the current item
  • contentType - name of the Content Type
  • pnp - pnp JS library instance
  • web - current Web from pnp
  • list - current List from pnp
  • item - current Item from pnp or null for a New form

The code in custom routing must return either server-relative or absolute URL, or ID of a Form Set. It can also return Promise that is resolved with URL or Form Set ID. The URL or the ID will be used to redirect user either to specific Form Set or address.

Form Set ID can be found in the lower left corner of the designer, it can be selected and copied:

Form Set ID

If the code returns nothing or throws an error, default routing is applied.

Routing examples

Check item's field

Redirect to a certain Form Set if 'Status' field equals 'Solved':

//check if Item already exists, will return true for Edit and Display Form
if (item) {
    // return Promise
    return item.get()
        .then(function (item) {
            //if Item's Status is Solved, redirect
            if (item.Status == 'Solved') {
                //return ID of a Form Set
                return '31fb1f41-63f3-48ff-a1c2-18b4e7f7c3e7'
            }
        });
}

Check user's property

Redirect to a certain Form Set if User's Department is 'Fire Safety':

//get properties of the current user
return pnp.sp.profiles.myProperties.get().then(function(result) {
    var props = result.UserProfileProperties;
    //if there is a property with Key: Department and Value: Fire Safety
    if (props.some(function(p){ return p.Key === 'Department' && p.Value === 'Fire Safety'})) {
        //return ID of a Form Set
        return '8720f859-7cca-4c51-8548-7a28f271d6a8';
    }
});

Check item's Person field

Redirect to a certain Form Set if 'AssignedTo' Person field equals the current user:

//check if Item already exists, will return true for Edit and Display Form
if (item) {
    //first, get the current user
    var user;
    // return Promise
    return web.currentUser.get()
        .then(function(u) {
            user = u;
            return item.get();
        })
        .then(function(item) {
            //then compare User ID to ID of the user in the AssignedTo field
            if (user.Id == item.AssignedToId) {
                //return ID of a Form Set
                return '31fb1f41-63f3-48ff-a1c2-18b4e7f7c3e7';
            }
        });
}

Check item's multiple selection Person field

Redirect to a certain Form Set if 'People' multiple selection Person field contains the current user:

//check if Item already exists, will return true for Edit and Display Form
if (item) {
    //first, get the current user
    var user;
    // return Promise
    return web.currentUser.get()
        .then(function(u) {
            user = u;
            return item.get();
        })
        .then(function(item) {
            //if field People contains current user's ID
            if(item.PeopleId && item.PeopleId.indexOf(user.Id) >= 0){
                //return ID of a Form Set
                return '8720f859-7cca-4c51-8548-7a28f271d6a8';
            }
        });
}