In this video, we’ll learn how to navigate the Lightning Forms Design Experience. We cover at a high level where to change form settings, add command buttons, form load actions, styling, create sections, move fields, set expressions for fields, and add other controls. Subsequent videos go into more depth.
Navigating the Designer
The Lightning Forms designer is a contextual designer. In this video, we explore where to find each of the features within the design experience. Please also find them below:
Command Bar
Within the Form Designer, you will find at the top a command bar. The command bar (shown below in grey) is the Lightning Forms command bar. This is not to be confused with the command bar immediately below it which can be seen with a Save, Cancel, and Submit button which is the command bar belonging to the form that you are customizing.
On the command bar, you will find the following:
- Form Settings – Control the size of the form, and other form properties affecting the details pane.
- Actions – Create Action Buttons for the Forms command bar, or Form Load Actions.
- Styling – Add styling and conditional formatting to the form.
- Save – Saves your design changes to the form.
- Save & Close – Save and close your design of your form.
- Get Started – Learn about Lightning Forms contextually
- Export/Import – Export or Import your form design.
-
Uncustomize Form – Remove all design changes and resetting the form to it’s original design.
Sections
Sections can be added to your form which allow you to change how many columns your section contains for side by side columns. Also, entire sections can be hidden or disabled with an expression which makes your design experience faster than setting visibility properties on each columns.
Clicking the Row Configuration within a section allows for Visible and Enabled expressions to be set:
To set an Expression, the Expression Builder can be used which is covered here.
Adding Controls and Fields
To add columns from the existing SharePoint list, or to create a new column, or add other controls such as Rich Text, Tabs, Buttons, Data Lookup Columns, Process Steps, Divider, Spacer, etc., click the + icon within a row as shown below:
Expression Builder
The Expression Builder can be accessed against most controls within Lightning Forms. As you hover each column, row, tab etc. You will be able to click the ‘configure expressions’ or sometimes ‘configure row expressions’ depending on the type of object. The {} indicate the configure expressions section.
Upon clicking the {} icon, you will see the ‘Expression configuration’ panel. Again, depending on the type of object that you selected, you may see different properties that you can set expressions for. Below is a screenshot showing the Expressions configuration panel for a field.
Clicking the Expression icon ({}) to the right of each property, will open the Expression Builder. Note the different properties available for a field/column.
-
Visible – Set an expression to make the control visible or not. This is a True/False condition. So, to make the control Visible, the condition will result in True. An example is: [[@User.IsMemberOfGroup(‘Type existing group name’)]]. This expression will return false if the current user is not a member of a specified group which will result in the field not displaying for the user. Another example might be to make a Commission field visible if the user selected Sales as the Department. In that case, on the Visible property of the Commission field, you would set it to [[Department]]==”Sales”. Note that == is used for comparison to result in True or False.
[[@user.IsMemberOfGroup(‘Approvers’)]] – This example will only show the Approvers Tab for users who are members of the Approvers SharePoint group
-
Enabled – Set an expression to make the control enabled or not. This is a True/False condition. So, to make the control Enabled, the condition will result in True. An example is [[Approved]]==No. If the Approved field is set to ‘No’, an approve button could be disabled.
[[Approved]]==1 – This example will only enable the ApprovedBy field if Approved is set to Yes (1).
-
Initial – Set an initial value. This is useful to enter a value such as the user’s email address in an Email field based on the user’s profile. The Expression [[@User.Email]] will display the current user’s email address. This property is also useful on a Sublist New Form to refer to a value from the Parent list (i.e. ParentLookup.SomeField).
[[@User.Mail]] – This example will set the default value of the Email field to the Email address of the current user. Setting it as an initial value will still allow the user to change the value to an alternative email address.
-
Calculated – Returns the result of a calculation. e.g. [[SubTotal]]+[[Total]]
[[Firstname]] [[Title]] – This will concatenate the Firstname and Lastname fields. Note that the programmatic name for the LastName field is the Title column. Also note that there was no need to include the operators to concatenate if Template rather than Assignment is used in the Expression Builder. If you use the Assignment tab, you would need to concatenate like so: [[FirstName]]+” “+[[Title]].
-
Required - Setting the Required property to =1 will ensure that the field is set to required. If the field is left null, then upon saving, an inline red message will display “You can’t leave this blank”.
Setting the required property can be conditional by using an If statement. For example, If you select ‘Other’ in a drop down list of choices, a ‘Description’ field may become required. Therefore, you could create an expression to evaluate to 1 or 0 depending on the condition.
An alternative is to use conditional formatting. Conditional formatting can highlight required fields in colours such as Red to demonstrate to the user that the field is required. However, the form save will still work, unlike with the Required property. This is sometimes better if you need to complete part of the form before finally submitting it. Below, you can see how to set the Required to =1.
-
Validation – The Validation property provides the benefit of checking that the entered value into a field is an appropriate value. For instance, validation can be used to confirm that a valid email address has been entered. The below example can be added as Function Code in the expression builder:
if([[Email]]!==""){ var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/; return mailformat.test([[Email]]); } else return true;
-
Validation Text – The Validation Text is the message that will be displayed should the Validation rule return false. e.g. “You did not enter a valid email address”.
The Expression Builder helps you to create your expressions. You can build an Expression against Template, Assignment, or Function which are described below:
- Template – Template is great for concatenations such as [[Firstname]] [[Lastname]]. You don’t need to use any operators such as [[Firstname]]+” “+[[Lastname]].
- Assignment – Will be used most regularly to build calculations and store the result of the calculation within the field.
-
Function – Where you will create Javascript such as with the Email validation expression above.
On the far right of the Expression Builder, you will be able to navigate the fields on the form, and double click them to add them to your expression. You can combine with it operators which are at the bottom of the dialog. Under Context Objects you will find placeholders for Contextual Objects which are described below:
- Form – Useful placeholders testing the current form such as IsDisplayForm. If the current form is a display form, it will return True. This is ideal for hiding certain controls based on the type of form.
- Page – Useful for testing the current page in the browser. You can obtain values such as Query String Key’s, Language, or URL.
- Site – Get information from the current site collection e.g. ServerRelativeURL
- User – Get information about the current user such as Email, Login Name, Manager, and Location.
- Web – Get information about the current SharePoint Site.
If your form contains sublists, you will also see sublist information within the Expression Builder. We will explain those expressions in the Sublist section.
Action Builder
The Action Builder can be used for building Action Buttons on the command bar, Action Buttons on the form itself, or for Form Load Actions.
Once the Action Builder has loaded, you can define a series of Actions by double clicking them from the Available Actions Section. Each Action is explained in the Actions section.
