Shareflex Low code application development

Shareflex is particularly suitable as low code application development platform for SharePoint Modern applications. This blog describes in more detail the Shareflex low code functions.

Our starting point is that the following is already in place:

• Shareflex is installed in your SharePoint farm
• The Shareflex Online App and the Shareflex Forms Package are uploaded to the App Catalog
• The Shareflex Online App is registered.

Part 1/4 – Create Site Collection and Install Shareflex Online Add-in

First we’re going to create a new Site Collection with a SharePoint Modern Experience. On this Site Collection we will add the Shareflex Online Add-in.

a. Go to the SharePoint Admin Center, and then select ‘Active Sites’.

b. Click on ‘Create’. Note that the Team Site shown here is the SharePoint Classic version, not the SharePoint Modern version. To change this choose ‘Other options’.

This Team Site template does NOT create an Office 365 group since this is the SharePoint Modern Team Site Template.

In this example we call the Site Collection ‘TestNoCode’. For Shareflex to work, make sure that the Site Collection is NOT created at root level (eg. ../sites/).

c. Enter the Primary administrator and other settings. Then click on ‘Finish’.

Now the Site Collections is in place you add the Shareflex Online app by opening the TestNoCode url and go to Site Content.

d. Next select ‘New’, ‘App’ and then choose ‘Shareflex Online’.

f. After that select the ‘Trust it’ button

f. Refresh the site contents page and open the Shareflex|online (demo) app

g. Move to the ‘Setup Core web now’ button. This will install the core website for the Shareflex Online application. It may take about 5 minutes for the installation to complete.

Installation running…

h. When the installation is complete you can check the setup log by selecting the green button.

On file level, notice that the pscBAF directory structure is now visible

i. The ‘Prepare as Master Site’ button creates the pscBAF Administration Site. However, before clicking this button, please consider whether you want a centralized or decentralized administration of Site Collection resources and configurations. We explain the difference below. In this example, we choose a decentralized administration (each Site Collection is its own Master Site) and we click the ‘Prepare as Master Site’ button.

When the Master Site is ready you can again view the setup log by clicking the green button.

j. In the upper right corner there is a Core web and a Master Site button. When you select one of these you open the TestNoCode/pscBAF Site containing all configurations and resources for this Site.

Decentralized vs Centralized Master Site

As mentioned in this example we use a decentralized Master Site. This means that the configurations and resources managed by the Master Site apply to the TestNoCode Site Collection only. However, you could also choose to create a centralized Master Site that manages the configurations and resources for ALL Site Collections.

In this case, you need to create an additional Site Collection where you install SharePoint Online and then click the ‘Prepare as Master Site’ button only there. After that go to the ‘Site Pool’ List on that Master Site and add the ‘TestNoCode’ Site. As a result the ‘Master Site’ button in the upper-right corner of the ‘TestNoCode’ Site will then bring you to this centralized Master Site.

Part 2/4 – Prepare SharePoint lists and columns

Now that Shareflex Online is installed and configured let’s create some content to work with.

a. Go to the Site Settings of the ‘TestNoCode’ Site. Then open the Site Columns and create a Site Column called Contact_ID.

b. Then visit the Site Content and create a new List named ‘Contacts’.

c. In the List Settings we open the Advanced Settings and enable the ‘Allow management of content types’ option.

d. Add the existing ‘Contact’ content type to the List.

e. Thereafter, select the ‘Item’ Content Type and remove it from the List.

f. Also insert the ‘Contact_ID’ Site Column to this List.

g. Go back to Site Contents. Create a new Document library ‘ContactDocuments’ that we use as location to upload files to.

h. Then move to the library settings and add the Contact_ID column as we did with the Contacts list.

i. Create a view in this library, called ‘BFE’. Shareflex uses this view to display files on the Contact form that link to the Item.

The view should not show any folders. Therefore, we select the option ‘Show all items without folders’.

Part 3/4 – Configure Shareflex Forms

The SharePoint Modern List and Library are now in place. The next step is to configure the connection between Contacts List Items and files that you want to upload in the ContactDocuments library. The purpose is to display the Contact item and associated Contact Documents on one and the same page. Essentially is about creating easy SharePoint Forms.

a. Open the Shareflex Online App Via Site Contents. Subsequently. Then go to Tools/Manage List Forms.

b. Select the ‘TestNoCode’ website and click ‘Design Forms’

c. Choose the ‘Contacts’ list from the drop-down

On the left you find all the Contacts List Fields while on the right side you see the configuration of the Contacts Form.

You can change the configuration folder name to something different than ‘ROOT_Contacts’ if you want to. A common method is to use the abbreviation of the Site Collection, e.g. TNC_Contacts.

d. The Form tabs drop-down allows you to create 0 to 3 tabs on the Form. Choose 2 tabs.

Kindly note:

• The default number of table columns under a tab is 2. However, you can add or remove table columns on the Form at a later stage

• The extra History tab is automatically added. This tab shows information about the creation and modification of the item, as well as workflow information
• The Primary key field (that connects the Contacts list items with the files in the ContactDocuments library) is the Contact_ID field
• Values of the Contact_ID field are generated automatically. In this example we choose the generation of consecutive numbers

• The Secondary List (containing the associated files) is of course the ContactDocuments Library

• At ‘Rules’, leave all options selected. The prefix ‘CON-‘ for the Contact ID value is already good. Hence there is no need to change this

• Under ‘Advanced’ also leave all options selected

e. Then click ‘Enable Shareflex Forms’

Now you have a fully functioning Form with 3 tabs: Contact, Tab2 and History

Perhaps at this stage you’re not happy with the configuration. For instance you want a different key generation method or you want to add additional secondary views. If this is the case click the ‘Reset Standard Forms’ button. As a result it will bring you back to the start of the configuration.

Please be aware that this action only resets the configuration. It does not reset the field and form modifications described in part 4/4 of this post.

Part 4/4 – Adjust the Form layout

a. Firstly, adjust the caption for ‘Tab2’ to ‘Other’.

b. Then rename the xml file to Form_Tab_Other.xml so we know what this file relates to. Moreover, you can also rename the XML file of the Contact tab to Form_Tab_Contact.xml.

c. When you save an item it will automatically generate the Contact_ID value. Adjust the Contact_ID field by simply clicking the cell. Note that additional sections are displayed on the right side of the screen now. Subsequently, make the following changes in the Content section of the Contact_ID field:

• Enter a custom label ‘Contact ID’
• Adjust the ‘Text to display if field has no value’ to ‘Is generated automatically’.
• Set the field to Read-only

d. Move the Contact ID field to the Contact tab by clicking the button.

e. Then visit to the Contact tab. Subsequently, select the Contact ID field and use the arrows to move the field to the top of the Contact tab.

f. Likewise, change the caption for the Title field to ‘Last Name’. Then move all fields around over these 2 tab. This results in a well-arranged Contact Form.

At ‘Custom Texts’, you can specify a prefix and/or suffix that you want to add to the field value. Also you can specify a field input hint here.

g. On the ‘Other’ tab, click on the ‘Comments’ field and select ‘Show label on top of value’.

h. Then in the ‘Cell’ section, click the button to span this field over 2 columns

In the ‘Grid’ section you can adjust the table settings:

• Define the width of the table (fixed or flexible)
• Add columns; up to 16 columns in total.
• Insert a single row or cell at a time.

With the button in the upper left corner, you can revert your changes back to the point where you last saved the form.

i. The ‘Config folder’ section provides information about the configured tabs for this specific Form.

If you like you can change the tab order here.

The button ‘Open FormConfiguration Folder…’ takes you to the physical location where the configuration files (XML) are stored.

The UI.js contains the JavaScript code that is needed for the correct functioning of the form.

In Shareflex’ SharePoint Modern UI you can use JavaScript code on the Form.

By using the ‘Bottom Code’ button in the Form Designer you can access and modify the UI JavaScript file directly via the Script section.

With the Snippets dropdown you can insert and modify Shareflex SF-API code snippets in the JavaScript file.

You can create additional JavaScript files for the form by pressing the ‘(Add Script)’ button .

In the Scope field, select the content type (or ‘any’ content types) where you want the script to run.

You can also run different form scripts for each form modes, as displayed below (example ‘Edit’ mode).

The Execution Order navigator enables you to change the order in which the JavaScript files are executed.

All script files are stored in the ..\FormConfiguration\[FormTab]\ directory.

Satisfied with the result? You can save the form by clicking and then . If you skip the ‘Save Config’ button you will be asked to save the changes anyway.

The button in the upper right corner will immediately take you back to the Form designer.

j. Let’s now create a new item with the Contact Form. By default, fields are displayed in compact mode as configured with the Form Designer. However, via the menu you can choose a different display (in production as well as in the designer).

This is the Form in SharePoint Classic mode where fields are displayed in a vertical order. Note that the Contact ID is a read-only field. It displays the text that was specified when the field holds no value.

The ‘Comments’ column is a Rich Text column where you can store formatted text but cannot upload files. Uploading files is possible as soon as you save the item.

Select to save the item. Notice that the Contact ID value changes to ID-PENDING during the save.

When you open the item the Contact ID has changed to CON-00001.

Also, the ContactDocuments Library is now visible under this item.

k. You can use the button to upload files. However, you can also Drag&Drop files directly.

We add a Word document and a PDF to the ContactDocuments Library. Both files inherit the CON-00001 Contact ID from the main item. As a consequence they now link to this item.

If you click the Word or PDF icon the content of the file is displayed in the right frame. In case of a Word document you can directly edit and save the document from the same screen.

When you delete a Contact item from the list Shareflex takes care of the removal of the linked Library files.

Notice that open items display in layers on top of each other.

In conclusion you see how easy it is to develop structured and functional easy SharePoint Forms with the Shareflex Form designer; a true low code development function.

Summary

Shareflex is a unique low code application development platform for Modern SharePoint. This blog explains in detail the process from creation of the SharePoint Site Collection up to the development and adjustment of SharePoint Forms.

More specifically we discussed the:

• Creation of a Site Collection and Installation of the Shareflex Online Add-in
• Preparation of the SharePoint Lists and Columns
• Configuration and adjustment of the SharePoint Forms

Using the platform you can easily extend the standard SharePoint Modern capabilities and quickly create complex Modern SharePoint Applications. As a result you provide business users the business functions and processes they need to  respond more rapidly to changing market conditions.

To make it even easier Shareflex also offers ‘off the shelve’ SharePoint Modern applications for common business functions and processes such as; Contract – and Invoice Management, Quality Document Control; HR, etc.

In case you like to learn more on how Shareflex can help you, don’t hesitate to contact us.