skybow Forms Designer introduction

The skybow Forms Designer is a contextual designer. To help you get started with the designer for SharePoint Forms, you can read here how the tool is structured. At the end of the article, you will know exactly where you can find which functions.

Command Bar

At the top of the Form Designer you will find the skybow Command Bar. This one is gray. Directly below it is another command bar. This command bar with "Set status", "Edit", "Close" belongs to the form that you are currently customizing. The two are therefore not to be confused. But first, let's look at the skybow command bar

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.
• Export/Import – Export your form with all the configurations or import form configurations from an existing SharePoint form.
• Version - Each time you save your form a new version is created. If you want to go back to a former version, just select it.
• Uncustomize form - reset the form completely.

Sections

Sections can be added to your SharePoint Form. With these sections you are able to change how many columns your section contains. Also, entire sections can be hidden or disabled with an expression. This makes your design experience faster than setting visibility properties on each column.

If you want to set visible expressions for your sections you need to click the row configurations (curly brackets {}):

Add controls and fields to your form

To add columns from the existing SharePoint list click the + icon within a row. This way you can also create a new column, or add other controls such as Rich Text, Tabs, Buttons, Data Lookup Columns:

Expression Builder

The Expression Builder can be called up for most controls on the skybow forms. When you hover over a column, row, tab, and so on. You can click "Configure Expressions" or sometimes "Configure Row Expressions" depending on the type of object. The curly brackets ({}) indicate "Configure expressions".

Clicking the Expression icon ({}) to the right of each property, will open the Expression Builder. The various properties available for a field/column are briefly described here:

• Visible - This allows you to determine when the element is visible to certain user groups. This is a true/false condition. To make the element visible, the condition must be True. Note that == is used for comparison to get True or False.
  An example is: [[@User.IsMemberOfGroup('Type existing group name')]]. This expression returns false if the current user is not a member of this group. This means that the field is not displayed for the user.
  Another example would be to make an equipment field visible if the user has selected the department of the new employee with "Production". In this case, you would set the visible property of the equipment field to [[Department]]=="Production". 
• Enabled – Specify an expression to activate or deactivate the element. This is a true/false condition. To activate the control, the condition must therefore be True.
  An example is [[Approved]]==No. If the "Approved" field is set to "No", an approval button could be deactivated.
• Initial – Set an initial value. This is useful for entering a value such as the user's email address in an email field. This makes filling in the form easier, faster and less error-prone. The expression [[@User.Email]] displays the email address of the current user.
• Calculated – Returns the result of a calculation. e.g. [[SubTotal]]+[[Total]]
• Validation – Define a validation rule. This ensures, for example, that a valid telephone number has been entered. This makes form entries significantly less prone to errors.
• Validation Text - The validation text is the message that appears for the user if the validation rule returns an incorrect value, e.g. "You have not entered a valid telephone number".

The Expression Builder helps you to create your expressions. You can create an expression with a template, an assignment or a function. We briefly describe all three options here:

• Template – Template is great for concatenations such as [[Firstname]] [[Lastname]]. You don’t need to use any operators such as [[Firstname]]+” “+[[Lastname]].
• Assignment – Are used to build calculations and store the result within the field.
• Function – Here you can create Javascript such as the phone number validation expression.

On the right of the Expression Builder, you are able to navigate the fields on the form. If you want to add them to your expression double click them. 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 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 or Manager.
• Web – Get information about the current SharePoint Site.

If your form contains sublists, you will also see sublist information within the Expression Builder.

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.