Form Development Shareflex Modern

Introduction

There is a big difference between the SharePoint Online Classic and the Modern user interface. See this post for Classic versus Modern user interface presented to users.

The Modern UI is not only about the way SharePoint modern pages in Online is presented to the users. Microsoft improved the modern SharePoint online backend as well when introducing the Modern UI. The SharePoint modern UI unleashes a whole new spectrum of great possibilities for Shareflex. This post explains the great new stuff possible with Shareflex for SharePoint online Modern.

Modern SharePoint examples are listed below where a Shareflex Contract Management form is displayed in the Modern UI, please note the great form overlay.

 

Shareflex Forms Wizard/Designer – Modern UI

(Same up to BFE Forms Wizard, then…)

BFE Forms Wizard

With the Modern UI Forms Designer, you first lets create the Shareflex form with tabs, rules, and all related code. In an additional step you add the fields under the tabs.

From the Shareflex Web Deployment app, open the Shareflex Forms Wizard (‘Manage List Forms’) to edit the SharePoint form. Choose the website, and click the ‘Design Forms’ button on the right.

Then select a list where you want to create a form:

On the left, the form fields are displayed, on the right you configure the Tabs, Secondary lists and the ID field. This is almost identical with the Forms Wizard in the Classic SharePoint UI. However, there are a few small differences.

  • Specify the configuration folder (identical to Classic UI)
  • Generate tabs 0, 1, 2 or 3 tabs with(out) extra History tab (different in Modern UI)
  • Key Prefix for primary items (default flexible new in Modern UI)
  • Settings (identical to Classic UI)
  • Form Mode (new in Modern UI)

Click the ‘Enable Shareflex forms’ to create the form

After the form is created, it is opened for design. Just like in the Classic UI, you  can change the tab names, positions, reposition the fields, etc.

Additionally, you can choose the file names for the tabs, decide the scope, and even edit the raw HTML directly from this screen.

As you can see now, the modern Form Designer is a classic Forms Wizard + Forms Designer in one, but much more flexible.

When selecting the table under the tab, you can adjust the total width (default 800), and add up to 16 columns.

When selecting a single field, you make the field read-only and required. You can display a custom message when the field is empty. You can display the label above the field instead of on the left, change the label, move the field to another cell, even on another tab.

You can also span columns and rows, delete and empty cells

You can display the fields in a classic or modern format, and have them displayed in a compact or large table, or in vertical order.

You can use these options on ready-made forms as well, on the fly.

And note in the upper right corner: you can undo/redo all your changes.

From the ‘Config folder’ section, you can click the button to automatically open the FormConfiguration folder.

Instead of WebPart_Bottom.js files (Classic UI), the Modern UI JavaScript code is stored in a UI.js file.

You can open this UI.js also directly from the Form Designer, with the ‘Bottom Code’ button displayed at the bottom of the form, and then the ‘Edit Code’ button in the red section.

You can also add new scripts, and use script snippets that utilize the Shareflex API. This API is new to the Modern Form Designer. As Shareflex Forms Classic UI utilized the psLib library, Shareflex Forms Modern UI uses the Shareflex API in a UI.js file. This API provides all necessary functionality for the Shareflex Forms Modern UI.

Save the form with the ‘Save Config’ button

 

Although the FormConfiguration files have undergone some changes in the Modern experience, the ListEventsConfiguration files have not changed.

The picture below shows the Shareflex form I put together in this example, with not too many clicks. It doesn’t take too much effort to create a functional form list that includes a secondary library for files. From this point, you can continue modifying the form (for instance add some code) by opening the form in Form Designer via the Design button in the upper right corner, implement the changes, previewing, save the configuration, and click on ‘Done’. This will bring you back to the open item.

Thanks you for your interest in Modern Sites SharePoint online blog.

Leave a Reply