skybow Rich Forms User Guide

Document created by RosarioM on Jul 29, 2016Last modified by RosarioM on Oct 11, 2016
Version 8Show Document
  • View in full screen mode

Table of Content

Getting Started

Overview

 

skybow Rich Forms is an app for SharePoint that provides an easy to use, yet powerful editor to customize list forms.

Building forms in SharePoint and Office 365 that look great and fulfill all the different purposes of your forms.

 

 

Note: This SharePoint Add-In works only SharePoint 2013 or higher.

 

 

Deploy easily

Rich Forms is a SharePoint app that extends SharePoint's content editor. No need to use any seperate tools or go to an external site. All form editing can be done seemlessly in your browser on your SharePoint site. Just get it from the Office Store and try it in your Office 365 or app-enabled SharePoint installation.

 

Place form fields freely

Place your fields anywhere on the form using easy drag-and-drop or ribbon interface. Start out with the form layout as provided by SharePoint and then reposition fields, align field labels or change the label text where needed.

 

Group vertically, horizontally or in tabs

Easily group fields and other elements in vertical/horizontal groups or tabs. Flexibly combine different group types to create the layout you want. You can even embed groups inside other groups, allowing for even the most complex layouts.

 

Rich text editing

Use all the powerful features of SharePoint's content editor web part to add freely formated text, tables, images, embedded scripts and media using the familiar Office ribbon-interface. And if the user-friendly editor is not enough for you, you can always resort to editing the HTML source to make almost anything a browser can handle possible.

 

Edit sub items in a grid

Place a sub list on your form for any related SharePoint list. Thus users can fill out multiple entries quickly with SharePoint's familiar editable grid view. Rich Forms will ensure that the items are saved with the form's other data. And it works even on new forms, so your users can fillout forms quickly even if multiple sub items need to be entered.

 

Handle complex business logic

Implement even complex business logic using Rich Forms' flexibly configurable, expression-based behaviours. Make a field or form section dynamically show or hide or become enabled or disabled depending on other inputs. Set default values and even recalculate them while the user is entering data in the form. (Only Rich Forms Pro)

 

Act on data

There is more to data then editing and storing. Users want more than just viewing data they entered. Rich Forms let's users act on data, making data do more. Build completely new functionality using the freely configurable actions provided in Rich Forms. Sending mail, adding or changing other list items, redirecting to a web page and much more can easily be done and can even be based on form data using highly flexible expressions. (Only Rich Forms Pro)

 

Define complex validation rules easily

Use expression-based validation rules to specify required form input. These can even handle changes to entered data. For example: Make the entry of a reason required depending on the status selected. (Only Rich Forms Pro)

 

Embed any web part on your form

Using Rich Forms you can embed any web part inside your form. For example display all related lists and libraries right inside your display form.

 

Revert to older versions

Whenever you need to go back to an older version of your form, rest assured Rich Forms editor will automatically keep old versions and let you restore them easily. (Only Rich Forms Pro)

 

See the result while designing

Being able to see what the result will look like makes creating beautiful forms easy. No need to configure where you want your fields in an abstract editor. Immediately get feedback on how things look using the powerful drag-and-drop and ribbon interface provided by Rich Forms WYSWYG editor.

 

Seamlessly integrated in SharePoint

Because Rich Forms only extends SharePoint's list forms and uses all out-of-the-box functionalities, the forms work and act as part of SharePoint and users are immediately familiar with them.

 

 

 

NOTES ON LICENSING:

  • All features are fully available during the trial.

  • After the trial only the users who use the editor to customize forms using features not marked as free need a paid license.

  • Users who only need to use the customized forms will never need a license.

 

Support

For any questions or technical issues, you can contact us. Here are our contact details.

skybow Support

Rich Forms Documentation

 

 

skybow Foundation

The functionalities of Add-Ins require a higher level of privileges on Office 365 since the Add-Ins that are offered in Microsoft store have some restrictions placed upon them. Therefore, the manually installed Add-Ins are permitted to execute the advanced actions.

The skybow Foundation Add-In is one such manually installed Add-In with some functional capabilities that are otherwise not allowed to be executed by us in MS store. This Add-In provides services for all the skybow Add-Ins to work efficiently as well as enhance their feature set. Essentially, instead of implementing the same set of capabilities in each of our Add-Ins, this utility is loaded with shared functionalities that can hence serve all our skybow Add-Ins.

 

Installing skybow Rich Forms

 

Pre-requisites

To be able to add this Add-In, you need to have site collection administrator privileges. Also, the scripting capabilities should be turned on in tenant-wide settings. The App Catalog must be modified accordingly to accommodate Rich Forms which works on-premise with SharePoint 2013 or higher.

1. From your SharePoint environment go to Setting, Site Contents and then Add an App

 

SiteContents.PNG

 

 

 

2. Then on your left site click on SharePoint Store



 

 

 

3. And search for the skybow products

 

 

 

 

 

4. Select skybow Rich Forms Add-In from the list.

    The Office Store for skybow Rich Forms will be displayed.

    Click on Add It



RichFormsAPP.PNG

 

 

 

5. In skybow Rich Forms app click on Request License.

    You will receive the License per e-mail.


 

 

 

6. After receive the License per e-mail, make the Upload.

 

 

 

 

7. The skybow Rich Forms app will appear on Lists, Libraries, and other Apps - Site Contents page.

    Click on skybow Rich Forms app.

8. The Skybow Rich Forms App Homepage is shown

 

richformshomepage.PNG

 

 

 

 

 

Adding Rich Forms App Add-In to your SharePoint Online/On-Premises Site

 

1. From any page where you are, go to Settings, Add an app. Will be displayed the Apps that you can add.

 

 

or

 

1. you can searching through the Filter.

 

 

2. And make Trust it

 

richformstrusit.PNG

 

 

 

 

Request License

 

 

1. On Site Contents - Lists, Libraries, and other Apps click on skybow Rich Forms app.

    The Skybow Rich Forms App will be displayed

 

RichFormsnovalidlicense.PNG

 

2. Select Request License

 

 

 

3. Fulfill the skybow License Request

 

 

RichFormslicensing.PNG

 

 

 

4. And you will see the below message

 

richformslicensingrequest.PNG

 

 

5. You will receive your License per E-mail

 

 

 

Upload license

1. Go to skybow Rich Forms.

    One way it's, through the Site Contents - Lists, Libraries, and other click on skybow Rich Forms app.

 

 

RichFormsnovalidlicense.PNG

 

 

2. On skybow Rich Forms page click on Upload License

 

 

 

3. Choose the License File to upload

 

RichFormsfileuploud.png

 

 

4. The Rich Forms app will be displayed

 

 

Configuring skybow Rich Forms

 

 

skybow Rich Forms App Page Overview

 

After adding the skybow Rich Forms app, the app it will appear on the Site Contents page. You can go to the app by clicking on it in the Site Contents Page, which will take you to the skybow Rich Forms app page.

 

The App page has the following sections:

   1. Instructions & Support - In this section, you can view introduction video, check out documentation or contact support for any queries.

   2. Configure Rich Forms - In the list overview you can directly customize a form by selecting the appropriate form's icon under the New, Display and Edit headings.

   3. About This App – In this section, you can view version details and rate this Add-In.

   4. Other Accelerators from skybow – In this section, you can access other SharePoint accelerators from skybow, such as skybow List View Search, skybow Tabbed Pages, skybow Action Links and skybow Theme Designer.

 

 

 

Ways to Add Rich Forms App Part

 

 

You can start customizing a form by opening it in design mode process in 3 ways:

 

1. From the skybow Rich Forms App page

Specify a list and select the form you want to customize.

 

ConfigureRichForms.png

 

 

 

 

2. From the List View Page

Select the Customize Rich Forms option on the List View ribbon.

 

 

 

 

3. From the Form Page

Click Edit Page action in the Settings menu of the form page.

Note: This will only allow further customizing the form using Rich Forms features if the form has previously been customized by one of the other above ways.

 

 

edit page.PNG

 

 

 

After you perform one of the above actions, the form is opened in design mode and you can start customization using the Rich Forms Editor features:

 

richformseditmode.PNG

 

 

 

 

Adding to Form from Add-In Homepage

 

On the Rich Forms app page, specify where to add Forms and select further options depending on the form you select.

  • Select the required options, you have Recent, All, Lists and Libraries.
  • Select the required form from the Lists
  • Select the web part from the Form.
  • Click Customize Form.

 

 

richformslists.PNG

 

 

 

 

 

Adding to Page from Ribbon Option

 

The Use View Search option on the List ribbon allows you to add app part.

  1. Navigate to any desired page.
  2. Click Settings button and select Edit Page.
  3. Select List > Customize Rich Forms.

 

 

 

  The Part section will be displayed.

 

 

 

 

Adding to Page from Web Parts Collection

 

The App Part can be placed on every possible List View, as well as on any Page or List or View with a Rich Forms web part on it.

  1. Navigate to any desired page.
  2. Click Settings button and select Edit Page.
  3. On the page, you click Add a Web Part link.

 

 


 

 

or

 

1. Click Settings button and select Edit Page.

2. Select Insert > Web Part.

 

   The Part section will be displayed.

 

 

 

  1. Select the web part you want to add from the list.
  2. Click Add.

       The web part will be added.

 

 

 

Configuring in Design Mode

Design Mode Configuration Overview

An administrator of a SharePoint environment can also configure or change the configuration of the Rich Forms app part. This happens directly on the ASPX page where the skybow Rich Forms web part is placed on Edit mode of the page.

The main form editor features are organized into a series of tabs on the editor ribbon. Once you open your form in design mode, 2 additional tabs will appear after standard SharePoint tabs.

 

  • Controls for adding, editing, and customizing content are prominently displayed on Rich Forms tab.
  • Expression-based behaviours for configuring complex business logic are available on Behavior tab.

 

 

 

Drag and Drop

The Form Editor uses a drag and drop interface. Items can be dragged and dropped to reposition them. When dragging an item, move it over the edge of an existing item. A border line will appear indicating the position where it will be inserted. You can drag and drop  one item, as well as a group with multiple items in it.

 

 

draganddrop.PNG

 

Move your mouse over an item on your form. When the item becomes highlighted, press your left mouse button and drag the place holder over an existing form item. Position the item, so that, border line appear to indicate that the position is valid. Release the mouse button.

For already selected items there is a Move selected element icon at the left side. When you click on it the cursor changes to the drop one until you release the left mouse button.

 

 

Grippers

Grippers are those small icons that appear when you select an element inside the Rich Forms Editor.

 

 

grippers.PNG

 

 

 

1. Move selected element

Is used to move items: items can be dragged and dropped to reposition them. When you click on it the cursor changes to the drop one until you release the left mouse button.

 

2. Select surrounding group

Opens context menu with surrounding groups and allows to select the needed element without using a Select Element button on the Rich Forms ribbon.

 

 

editor.PNG

 

 

3. Revert to default label

Gripper that becomes available when label is selected. If some changes were performed on the label, clicking on it will revert to the default label state.

 

 

 

Edit Form Structure and Design

 

Rich Forms tab contains controls for adding, editing, and customizing content of the form.

Once you open your form in design mode, it will appear after standard SharePoint tabs.

 

 

Adding Fields

 

Field is a custom action in the ribbon toolbar to add fields into the content editor web part. It allows to add any field available for the current form.

It also provides an ability to add new fields directly from the current page: clicking Add New button initiates opening of Create Column dialog. New field is immediately added to the form.

 

 

addfield.PNG

 

and

 

 

columndialog.PNG

 

 

 

Adding Groups

 

Group is a custom action in the ribbon toolbar to add groups into the content editor web part.

Since positioning of fields is essential for designing your forms to match the structure of the data represented, Rich Forms provides Groups functionality that allows to manipulate form field positions, flexibly combine different group types to create the layout you want. You can even embed groups inside other groups, allowing for even the most complex layouts.

There are 3 available group types: vertical, horizontal and group with header.

 

 

Vertical group allows to place form fields in vertical stack one below another.

 

 

verticalgroup.PNG

 

 

Horizontal group allows to place form fields in horizontal stack one after another.

 

richformseditor.PNG

 

 

 

Group with header allows to place form fields in vertical stack one below another and to display a header for it. Group with header follows the layout rules of vertical group.

There is a setting on the ribbon to define if it will be collapsable: Collapsable checkbox allows to specify if an icon should appear to collapse/expand the content of this group.

 

richformscontacts1.PNG

 

 

 

 

Adding Rich Text Content

 

Rich Text Box is a custom action in the ribbon toolbar to add rich text box into the form.

Rich Text Box is generally used for displaying, entering and manipulating text with formatting. Now your form can be extended with the freely editable text, hyperlinks, tables or media. Fields are moved to the editable area by simple drag & dropping.

 

 

Addawebpart.PNG

 

 

 

Tabs is a custom action in the ribbon toolbar to add tabs into the content editor web part.

Tabs are styled by default to fit well for forms in SharePoint 2013 look, therefore they appear natural in your forms design. This group is very handy to use: tabs can be easily reordered, fields are moved to the tabs by simple drag & dropping. Each tab follows the layout rules of vertical group.

 

 

RichFormsEditor1.PNG

 

 

Lock Contents

skybow Rich Forms editor provides ability to lock / unlock form contents. This can be done by clicking one of the options under Lock Contents section.

Lock action locks the selected element content: disables editing ability.

Field row is a horizontal group of field label and vertical group of field input and field description. Field row unlocking allows to manage its elements (field label, field input, field description) independently.

 

 

LockContents.PNG

 

 

 

Toolbar is a custom action in the ribbon toolbar to add toolbar into the content editor web part.

You can manage buttons separately in ungrouped toolbar.

 

 

RichFormsEditor2.PNG

 

 

 

Insert sub lists & libraries

 

Using a sublist allows providing a grid view of a related list anywhere inside your form. Related lists are lists that contain a lookup column to the list or library the current form is for. The sublist is editable and can be used on new, edit and display forms.

Available sublists are displayed as the options of Insert sublist custom action in the ribbon toolbar. Only lists or libraries are displayed with a lookup to the form's list.

The lookup to the form's list is not shown in the grid.

 

 

Sublists.PNG

 

 

 

The view of the inserted sublist can be edited in the same way as an out-of-the-box list view web part (to change things like query, fields, etc.):

  • Select the row on the list view
  • Click Modify View on the List tab of the ribbon.

 

ModifyView.PNG

 

Note:If tabular view is turned off on a list view used in a sub list, editing items in sub lists is disabled.

 

 

The grid view behaves at run-time just like the out-of-the-box grid, except for filtering, sorting and adding columns functionalities.

 

Grid.PNG

On new and edit forms the data edited in the sublist is only stored when the whole form is saved.

 

 

 

  • Sublist Column Calculation

Rich Forms supports calculated and enabled expressions for column cells in a sublist grid. They can be configured on Behaviour tab in Sublist Column section when a column is selected in the form editor and can be used on all available form types.

Unlike the value and validation expressions for form fields, calculated and enabled expressions for sublist columns are available on Display forms too, since the grid is editable.

 

 

richformsexpense.PNG

 

 

    • Calculated

Calculated expression provides a flexible way to dynamically recalculate the value in the column while the user is entering data in the form or other columns of the sublist. Whenever the value of a field referenced in the calculated expression is changed the expression is recalculated and the dependent field's value updated with the result.

The calculation can be based on form field values, as well as on values of other cells in the current row. To reference other cells in the current row SubListCurrentRow placeholders are available under the Context Objects.

 

It is possible to set initial value for sublist column using calculated expression relied on main list field (New form).

 

expressionbilder.PNG

 

 

    • Enabled

Enabled expression allows to enable or disable any cell in the sublist at run-time based on some condition.

For example, you can disable cells that are not allowed to be edited depending on other cell values in the current row or form values.

 

 

    • Aggregation over Sublists

There is often a need to perform some operations over all values of a sublist column. Using aggregation functions in expressions sums, counts, mins, maxs, averages or custom logic can be calculated over all values in a column of a sublist. These expressions can be used as field values or to set fields visible or enabled depending on values in the sublists.

 

Example: Total value in the Expense Report

 

expensesbilder1.PNG

 

 

  • Insert Sublibrary

Using a sublibrary allows providing a document library view with folders and drag and drop functionality anywhere inside your form. Rich Forms will automatically organize all documents in a folder per parent item generated on the document library.

All available libraries are displayed to be inserted using the Insert Sublibrary custom action of the ribbon toolbar.

 

richformseditortasks.PNG

 

 

The view of the inserted sublibrary can be edited in the same way as an out-of-the-box list view web part (to change things like query, fields, etc.):

  • Select some document
  • Click Modify View on the List tab of the ribbon.

 

The view behaves at run-time just like the out-of-the-box view, including filtering, sorting and adding columns functionalities.

The items are saved without saving the form.

 

sublibrary.PNG

 

 

    •   Folder structure

Folders per list item in the sublibraries are created automatically when the corresponding item's form is opened. All related files are saved inside this folder.
The folders are named using the list's name and item's ID.

 

folder.PNG

 

 

 

Edit Form Behaviors

 

Behaviour tab contains controls for configuring complex business logic. Once you open your form in design mode, it will appear after standard SharePoint tabs and the Rich Forms tab.

Flexibly configurable, expression-based behaviours provide an easy way to make a field or form section dynamically show or hide or become enabled or disabled depending on other inputs, set default values and even recalculate them while the user is entering data in the form.

 

 

behaviour.PNG

 

 

  • Disable a control

 

Enabled expression allows to enable or disable any selectable controls at run-time based on some condition.

For example, you can disable controls that are not allowed to be edited depending on other field values or disable a button to prevent the user from clicking it depending on his group memberships.

This option is available on all form types: New, Edit, Display.

 

  • Hide a control

Visible expression allows to change the visibility of any selectable controls at run-time based on some condition.

For example, you can hide or show form controls based on conditions. As an example, a field can be shown only when the field 'Status' is set to 'Active': =[[Status]]=='Active'

This option is available on all form types: New, Edit, Display.

 

  • Setting a field default value

Initial value expression allows to assign a default value to a field. This can be a constant or a calculated expression.

For example, you can set current date as a default value: '= new Date()'

This option is available only on New forms.

 

  • Calculated a field value

Calculated expression provides a flexible way to dynamically recalculate the value while the user is entering data in the form. Whenever the value of a form field referenced in the calculated expression is changed the expression is recalculated and the dependent field's value set with the result.

For example, you can use it to perform a mathematical calculation - multiplying the values contained in two fields in order to produce a Total Amount in the current field: '=[[Price]]*[[Count]]'

This option is available only on New and Edit forms.

 

  • Setting a field dynamically required

Required expression is used to specify the condition when a field's value must be set before the form can be submitted.

For example, you can specify that users must fill in an "Explanation" field when the leave requests "Reason" field is "Other": = [[Reason]] == "Other"

This option is available only on New and Edit forms.

 

  • Defining a field validation

Validation expression provides an easy way to define a validation rule. Using expressions even complex rules can be defined to specify required form input. These can depend on the entered data. When the validation expression evaluates to false the form can not be saved and the message evaluated using Validation Text (see below) is shown.

For example, when the "Reason" field is "Compensation" the "Duration" field can not be higher than 3 days: = ([[Reason]] != "Compensation") || ([[Duration]] <= 3)

This option is available only on New and Edit forms.

 

Validation Text expression is used to specify the text that is shown when the Validation expression (see above) fails (t.i. returns false).

 

  • Change button actions

 

Actions can be defined on buttons or links to specify what should happen when these are clicked.

The Actions Builder allows you to edit which actions in which order and under which conditions should be executed.

The following action types are available:

  • Actions Builder
    • Add List Item
    • Delete List Item
    • Execute Script
    • HTTP Request
    • Open List Form
    • Open Web Page
    • Redirect to URL
    • Reload Page
    • Save Form
    • Send Mail
    • Show Massage
    • Start Workflow
    • Update List Item

 

Most actions require some parameters which can be configured in the Actions Builder. In most cases this configuration can depend on form data or contextual information using expressions. Thus even complicated data-dependent logic or navigation can easily be implemented without any programming knowledge.

 

  • Adding load form actions

 

It is also possible to define actions that are executed when the form is loading. All previously described action types are available.

 

  • Adding a lookup filter (e.g. cascaded lookup)

 

Filter criteria can be set when some lookup field is selected.

CAML Query Editor is accessible when Edit Query button is clicked.

 

  • Using the expression builder

Rich Forms supports calculated and enabled expressions for column cells in a sublist grid. They can be configured when a column is selected in the form editor and can be used on all available form types.

 

 

Run Mode

This chapter contains video tutorials for the following cases:

  • Two Column Layout
  • Rich Text Box Editing
  • Label Editing

 

Two Column Layout

To add two column layout, perform the following steps:

 

    1. Open form in design mode.

 

    2. Insert horizontal group.

 

    Click the Groups button in the Rich Forms ribbon tab.

    Click Horizontal.

    Resize horizontal group: make it bigger enough to contain all fields.

 

    3. Insert 3 vertical groups.

    Click the Groups button in the Rich Forms ribbon tab.

    Click Vertical for 3 times.

    Resize 2 vertical groups.

    The middle one serves for separating 2 others and don't have to be resized.

 

    4. Drag and drop fields into the vertical groups.

 

    5. Save the form.

 

Video tutorial:

Two Column Layout - Tutorial

 

 

 

Rich Text Box Editing

Rich Text Box is generally used for displaying, entering and manipulating text with formatting. Now your form can be extended with the freely editable text, hyperlinks, tables or media. Fields are moved to the editable area by simple drag & dropping.

 

Steps performed in the video tutorial:

 

    1. Insert Rich Text Box.

    Click Rich Text Box button on the Rich Forms tab of the ribbon.

 

    2. Type some text in the box.

    You can change the styles, size and fonts of the text.

 

    3. Add an image into the Rich Text Box.

    Click Picture button on the Insert tab of the ribbon.

 

    4. Add table into the Rich Text Box

    Click Table button on the Insert tab of the ribbon.

 

    5. Insert file into the Rich Text Box table.

    Click Upload file button on the Insert tab of the ribbon.

 

    6. You can use any Rich Forms functionality in the Rich Text Box.

    e.g. add new field to the form and move it into the Rich Text Box.

 

Video tutorial:

Rich Text Box Editing

 

Label Editing

In addition to simple editing of field label text and label resizing, labels also can be placed in different positions:

 

To the left / to the right of the field, at the top / at the bottom of the field.

Setting Align Default specifies alignment of the field label according to the context of the field row:

Horizontal / Vertical group: align setting applied to the horizontal group determines alignment of nested elements (field rows, groups, tabs).

Note: By default, horizontal group is top aligned and vertical - left aligned.

Any non-default alignment setting overrides the default one.

 

Steps performed in the video tutorial:

 

    1. Apply label alignment for all fields.

    Select Main frame.

    Click Label button on the Rich Forms tab of the ribbon.

    Select option from the dropdown: Align Top.

 

    2. Use styles to make your labels more expressive.

    Click on the label.

    Select the style from Format Text tab of the ribbon.

 

    3. Add icons for better visuality.

    Click on the label.

    Click Picture button on the Insert tab of the ribbon.

    Select an image.

 

    4. Rezise labels where it is needed.

    Click Lock Contents button on the Rich Forms tab of the ribbon.

    Select Unlock Contents option. Unlocking field contents enables label resizing.

 

    5. Save the form.

 

 

Video tutorial:

Label Editing

Attachments

    Outcomes