In this video, we’ll learn how to navigate the Lightning Forms Design Experience. We cover at 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. In subsequent video’s, we go into much 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, 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.
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.
- 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.
- 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).
- Calculated – Returns the result of a calculation. e.g. [[SubTotal]]+[[Total]]
- Validation – Set a validation rule. A regular expression is a powerful addition ensuring for instance 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 if the Validation Rule returns 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.
