SharePoint Online Classic and Modern

Shareflex is about building (business) apps for SharePoint Online. Microsoft now offers a brand new SharePoint Online Modern User Interface as a future replacement of the older SharePoint Online Classic User Interface.

Although Shareflex supports both environments, SharePoint Online Classic and Modern, there is a big difference between the two. This post covers Shareflex Form Development on Classic SharePoint. We will eplain and show the SharePoint Classic experience.

In case you are looking for (low code) development for Modern UI we recommend the following post about the SharePoint Online Modern interface.

BFE Forms Wizard for Classic UI

Probably the easiest and fastest way to build a new SharePoint Classic UI application with Shareflex is to use an existing Shareflex deployment package. Simply 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 of this approach can sometimes be disappointing. For example when the new Microsoft SharePoint app works slightly different when you compare it with 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 app from scratch by using the BFE Forms Wizard. It is very helpful in generating the basic Form and functions like creating the tabs, placing the selected fields under each tab and displaying secondary views on the page in a visual manner. Additionally, this Wizard lets you easily produce the necessary code to generate unique ID’s used to link the list items to related files that are uploaded in a separate Document Library.

Preparations

Before you can use the BFE Forms Wizard, you need a SharePoint Site, a List, a Document Library (when you want to allow files in your application) and Fields. In this article we will use the Site Collection ‘formsdesignertest’, a List called ‘Test List’ and a Document Library called ‘Test List Documents’.

The steps are:

• Create the 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 you create a single-line text column for the unique ID, in this example: fld_ID
• Create a Document Library where attachments are to be stored (‘TestListDocuments’). Then 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 possible logical structure is:
  • Display: Edit, Type, Name, fld_ID, possible others
  • Sort on fld_ID
  • Show items inside folder (default)

• 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

How to use the BFE Forms Wizard

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

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’.

You see that the History tab is already in place. Just add a Main Tab and move it up 1 level.

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

You can also add ‘Other Fields’ (like Content Type) and new fields to the Form. However, a new field is not stored in the SharePoint List.

As a next step save the tabs.

Subsequently, 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. Hence nothing has changed yet.

Before generating the Form Pages, please select the secondary Library and the View that you want to display at the bottom of the Form. In this example I select one Document Library. However, you can add multiple Libraries and Lists here as per your need. Note that I select ‘column fld_ID’ as the key to filter on.

Now you specify other settings and features. For instance:

• When you create a new List item it will re-open after saving automatically,
• Document preview, etc

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

Now you 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 open in edit mode. The secondary list will display at the bottom. Also note that the fld_ID value generates 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. Such as the JavaScript files which 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 is 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. These rules manage the related items between the List and the Document Library. For instance, if you delete an item 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 as per your need by using the Forms Designer tool. Use this tool to visually manage the Form_Tab.xml file in the pscBAF FormConfiguration Library (the one you generated with the BFE Forms Wizard). You do this by opening 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 for example:

• 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 make and open the Form_Tab.xml directly.

When you hover over to the right corner of each cell you see the information about that particular 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 located in the ..\pscBAF\FormConfiguration\ directory. For each List or Library in the application, an individual folder is created containing the Form files. This individual folder is the Form Configuration folder that you specify when you use the Forms Wizard. As per the example in this blog, this is folder ‘FDT_TestList’.

In another application, we have a site ‘AA’ with a list ‘Audits’. For this application we created a simple Shareflex Form for the Document Library ‘AuditDocuments’. More specifically the ‘AA_AuditDocuments’ folder. Also a LegalEntities List is present in this application.

Below you see 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’)
• You can use the CSS file for the Form layout

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

These XML files trigger:

• Calculation and assignment of an ID to a new item
• Reservation of a secondary List folder when you save the primary item
• Displaying on the Form of Secundary Lists with related files
• Updating the display of the secondary List when you add, update or delete files
• Deletion of Library files when you delete the related List item

To underline the importance of the Shareflex tooling once again; the BFE Forms Wizard initially creates everything that you see in the FormsConfiguration and ListEventsConfiguration folders. 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 are generated with the Forms Wizard. The file contains 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.).

This blog is all about creating Forms on classic SharePoint and the classic SharePoint experience. However, if you want to learn more about forms development on SharePoint Modern UI kindly read the following post SharePoint Online Modern interface.