Form Development Shareflex Classic

Introduction

This post is applicable to Shareflex form development with SharePoint Online Classic UI.
Please view this post about the SharePoint Online Modern UI.

Probably the easiest and fasted way to build a new SharePoint form application with Shareflex is to use an existing Shareflex deployment package, adjust the SharePoint custom forms deployment script to match the requirements for the new SharePoint application, and update the xml and JavaScript files within the deployment directory.

However, the result can sometimes be disappointing when the new ms SharePoint app is working slightly different compared to the existing application, or you forgot to update just one small piece of code in one of the files.

Therefore in many cases it is better to start building the SharePoint form Shareflex application from scratch. This can be achieved relatively easily by using the BFE Forms Wizard. This tool is very helpful in generating the basic form and functions, like creating the tabs, placing the selected fields under each tab, and display secondary views on the page in a visual manner. Additionally, this wizard lets you easily produce the necessary code to generate unique ID’s that are used to link the list items to related files that are uploaded in a separate document library.

Before using the BFE Forms Wizard to create a form in SharePoint Shareflex forms from scratch

Before you can use the BFE Forms Wizard, you need SharePoint site, a list, a document library (when you want to allow files in your application) and fields. I will use site collection ‘formsdesignertest’, a list called ‘Test List’ and a document library called ‘Test List Documents’

  • Create a site (formdesignertest)
  • You may want to remove standard libraries and lists if you don’t need them (like Documents and Site Assets)
  • Create a list (TestList) and some list columns. Make sure to create a single-line text column for the unique ID, in this example: fld_ID
  • Create a document library where attachments should be stored (TestListDocuments) and create a single-line text column for the unique ID that corresponds to the TestList, in this example: fld_ID
  • Unless you are going to use the special ‘BFE’ view for displaying secondary list items (see next bullet point), you need to modify the AllItems view in the TestListDocuments document library as described in the next bullet point. Otherwise there are no prescriptions for the Allitems view. A logical structure could be:
    • Display: Edit, Type, Name, fld_ID, possible others
    • Sort on fld_ID
    • Show items inside folder (default)

SharePoint form 1

  • Create a new view in the document library, called BFE (which will be used to display secondary files to the item)
    • Display: Edit, Type, Name
    • Sort on Title
    • Show all items without folders

SharePoint form 2

 

BFE Forms Wizard

From the Shareflex Web Deployment app, open the Shareflex Forms Wizard (‘Manage List Forms’) to edit the SharePoint form.

SharePoint form 3

Note: you can also open the BFE Forms Designer by opening a SharePoint form from another Shareflex application. From there, just click the ‘Open Wizard’ button that you’ll find under the ‘Design’ tab. Then navigate to the list where you want to create a form.

Select the website, list, and then click the red + to add the Configuration folder (eg. Abbreviated site_List), in this example FDT_TestList

The History tab is already in place. Add a Main tab and move it up 1 level.

Add some of the fields to SharePoint form on the Main tab. Then add another tab (Details) and add the RichText field below this tab, for instance.

You can also add ‘Other Fields’ (like Content Type) and new fields to the form. A new field is not stored in the SharePoint list however.

Then save the tabs:

The 3 ‘Form_Tab’ XML files are created.

The Form_TabMain.xml file looks like this:

In SharePoint, you will still see the standard forms, nothing has changed yet.

Before generating the Form Pages, select the secondary library and view that you want to display at the bottom of the form. In this case I selected 1 document library, you can however add many libraries and lists here. Note that I selected column fld_ID as the key to filter on.

Then specify other settings and features, for instance that when a new list item is created, it is will re-open after save automatically, and other features (document preview for instance).

When the settings are correct, click the ‘Generate now’ button.

Now create a new item in the list, you will notice that the tabs are in place.

When you save the new item, it will automatically be opened in edit mode, and the secondary list is displayed at the bottom. Also note that the fld_ID value is generated automatically (you should set this field to read-only by updating the Form_TabMain.xml line <td bfeId=”fld_ID” bfeType=”field” bfeReadOnly=”true” bfeWith=”250″ class=”ms-formbody”></td>).

In the pscBAF\FormConfiguration you will see that the FDT_TestList folder now contains more files, including the JavaScript files that execute form events and maintain the counter for the generation of a unique ID that is used to filter related files from the secondary library.

The folder pcsBAF\ListEventsConfiguration\FDT_TestList has been created with XML files for each list, containing CAML queries that keep the items from the secondary libraries connected with the related item from the primary list.

If you open the Event Receivers configuration from the Shareflex Web Deployment app (‘Configure Event Receivers’), you will see the just created rules that manage the related items between the list and the document library. For instance if an item is deleted from the list, a rule makes sure that related items in the document library are deleted as well.

BFE Forms Designer

Now that the tabs, fields, secondary views and rules are in place, you can adjust the design of the form a bit. The Forms designer can be used to visually manage the Form_Tab.xml file in the pscBAF FormConfiguration library (that you generated with the Forms wizard). Open an item from the list, and click the Design tab to access the BFE Form Designer (Edit Form button).

With the Forms designer, you can create/edit/remove tabs, add tables, insert fields and labels, format the table layout, and more. You can use the Autoformat tool to assign standard sizes to field controls, and standard widths and styles to cells. From here you can preview the form changes you made and open the Form_Tab.xml directly.

Hovering over the right corner of each cell, gives information about the cell.

Design storage location

The Shareflex forms and other design elements are stored in subfolders on the pscBAF (Portal Systems Business Application Framework [Shareflex]) site collection.

Forms are stored in the ..\pscBAF\FormConfiguration\ directory. For each list or library in the application, a individual folder is created where the form files are stored. This individual folder is the Form Configuration folder that you specified when you used the Forms Wizard. According to the example in this blog, this is folder ‘FDT_TestList’.

In another application, we have a site ‘AA’ with a list called ‘Audits’. For this application, we also created a simple Shareflex form for the document library ‘AuditDocuments’, hence the ‘AA_AuditDocuments’ folder. Also a LegalEntities list is being used in this application.

Below are the building blocks that make up the form of the TestList list.

  • The combined XML files are the actual HTML form, where each XML file represents a single tab.
  • Variables.js contain the Globally Unique Identifiers of the application (lists, forms, etc.)
  • WebPart_Top.js includes the core libraries for JQuery, psLib and Shareflex Workflow
  • The WebPart_Bottom.js is a JavaScript file that contains custom code for custom elements on the form (buttons etc.). This is where the magic takes place (see paragraph ‘Customizing Forms’)
  • The CSS file can be used for form layout

Events-triggered code is stored as XML files in a subdirectory of the ..\pscBAF\ListEventsConfiguration\ directory. The subfolder created for these xml files is named after the primary list.

These XML files make sure that

  • an ID is calculated and assigned to a new item and a secondary list folder is reserved when the primary item is saved
  • secundary lists with related files are displayed on the form
  • the display of the secondary list is updated when files are added, updated or deleted
  • library files are deleted when the related list item is deleted

To underline the importance of the Shareflex tooling once again: everything that you see in the FormsConfiguration and ListEventsConfiguration folders is initially created with the BFE Forms Wizard. The Forms Designer tool only adjusts the xml files in the FormsConfiguration directory.

Customizing Forms

As mentioned above, the WebPart_Bottom.js is the file where the magic takes place. Below is a screenshot of this file after forms were generated with the Forms Wizard. Note how this generated a file containing JavaScript, CAML and Shareflex-own psLib functions all together. This is the place where you customize your forms (add buttons, apply conditional hide-when functions, manipulate events, etc.).

 

Leave a Reply