Designing SharePoint forms

Open the designer

First of all, you need to make sure that you've registered a Plumsail Account, downloaded and installed the designer application to your PC. Don't forget to follow all the steps in the SharePoint installation instruction, upload package to your App Catalog and share it with all the sites.

The app launches with the following window:

Simply choose SharePoint in Forms Designer during sign in, enter your site's URL and Site Owner credentials, select a List or a Library forms for which you want to modify and start working on the forms. Saved forms will automatically replace default forms on your site.

New, Edit and Display forms

Inside the designer, when you open a specific List or a Library to work with, you can select which form you want to edit in the upper right corner.

• New Form - only available for SharePoint Lists, not available in SharePoint Libraries. Form that you see when you click +New Item.
• Edit Form - form that allows you to edit values stored in an item, or properties of an uploaded file in SharePoint Library.
• Display Form - form that only allows you to see what values are stored in an item or check properties of an uploaded file, cannot edit.

Content Type

Also, if Content Types are enabled for the List, you can select which Content Type you want to customize forms for:

Each Content Type has its own forms.

Basics of form design

In the designer, on the left, you have Containers, Controls and Fields that you can use on the form:

Adding them to the form is easy, just drag and drop the desired elements to the form. You can change individualy configuration of each Field, Control and Container by selecting it with a click and then adjusting its properties in menu on the right:

By default, each element is placed inside a Grid, which is based on Bootstrap Grid. By adjusting PARENT GRID properties of each element, you adjust element's layout in regards to all other elements.

Note! We do not recommend adding Common Fields to SharePoint forms unless you know what exactly you want to do with them. By default, only SharePoint Fields store data when Item is saved, Common Fields lose all the data. If you want, you can use Common fields to perform some calculations on the form or submit certain data to MS Flow using Plumsail Forms connector.

Mobile Layouts

You can customize layout for mobile devices by selecting device type in the Ribbon. Clicking red X under the layout will delete it:

Saving a form

Saving a form is easy - just click the Save button. Once the button is pressed, it gets grayed out and you'll see a message that says that the form is saving:

Please, wait until the process is complete. Meanwhile, you can continue working in the designer, but if you want to see the results in SharePoint, you need to wait until you see Layout has been successfully saved message:

Finally, you are also able to save multiple forms at once if you want them to share functionality. For example, if the form has no custom logic, it's often easier to save New, Edit and Display form at the same time. Just click the arrow symbol on the Save button and select which forms you want to replace with the current one:

Be extra careful when saving more than one form, it's easy to forget that two forms might have different JavaScript attached to them, for example. Because of that, and other potentially risky situations, we recommend backing up forms that are important to you, by using Export feature of the designer:

Advanced functionality

CSS and JavaScript

If you want to change the appearance of elements on the form, you can either edit Style property of the elements or apply custom styles with CSS editor. Don't forget that you can give each element a class and then use it in CSS editor to apply styles by class.

Another thing that you can alter on any form is JavaScript and with our rich JavaScript API there is a lot that can be done with it.

Please, make sure that you are familiar with the events present in JavaScript API as these events need to be used in order to get access to all forms elements. In this section you can check out the practical examples of using JavaScript API to make forms more dynamic.

Form Sets

You are not limited to three Forms per Content Type. In fact, you can create many Form Sets as necessary. Add a new one by clicking the + sign:

Сommon use for Form Sets is to provide unique forms for members of certain groups, that can be easily configured in the menu when you create a new Form Set:

But you are not limited to it. In fact, you can leave it empty and instead use Custom routing to redirect users to the appropriate form based on other conditions, such as field values on the form or user's properties:

Related Items/Documents

List or Library control allows you to show another SharePoint List or Library within the form. It also allows users to add new items, change or delete existing ones, directly from the current form.

What is even more impressive - it allows to create Parent/Child relationship between items in one list and items in another list very easily, without any code required. Find out how it's done in this article.

You also need to be aware that List or Library supports various means of filtering. For example, you can set Root Folder property either manually or with a script, and it will ensure that users can only see contents of this root folder and cannot see items higher in the hierarchy. CAML filtering is also supported and can also be used to filter shown items by their field values, and it can be done dynamically as well.