Low code application platform Shareflex

Video transcript

In this video I explain how to build a working application with Shareflex in short time.
We’ll create a new site collection, where we’ll add the Shareflex Online Add-in.
Then we create a contact list and a library to store linked files.
After that we’ll use Shareflex Forms to configure the relation between these files and the items from the contact list.
And then we adjust the layout of the form with the designer.
In this video I assume that Shareflex already has been installed, that at least the Shareflex Online App and the Shareflex Forms Package have already been uploaded to the App Catalog and that the Shareflex Online App already has been registered.
We start by making a new site collection with a Modern Experience.
For this, we go to the SharePoint Admin Center, and then we go to Active Sites.
We click on ‘Create’.
The team site shown here is the classic version.
The modern version is not connected to an Office 365 group.
That’s why we click on ‘Other Options’ and there we find the Team site template without Office 365 group.
We call the site collection ‘TestModern’.
And we make sure that this site collection is not created at root level.
That is essential for a good functioning of Shareflex.
And then we click on ‘Finish’.
We open the new site collection and go to Site Content to add the Shareflex Online app to the site collection.
We click ‘New’, ‘App’ and then choose ‘Shareflex Online’.
Then we open the app.
First, we install the core website for the Shareflex Online application.
This can take about 5 minutes.
You can check the setup log by clicking the green button.
Then we click ‘Prepare Master Site’.
This will create the pscBAF administration site.
Because we create this within the TestModern site collection, this master site only manages the resources and configurations of this specific site collection.
You could also opt for an exclusive central Master Site for all Site Collections, but to keep it clear and simple I am now creating a decentralized master site.
You can also view the setup log here.
If you then click on the ‘Master Site’ or the ‘Core web’ button, the TestModern/pscBAF list is opened,
where we can find all configurations and resources for this site.
Now we are going to focus on the SharePoint content.
First we go back to the SharePoint TestModern site.
We are going to create a contact list and a related contact documents library.
First we go to the site settings.
At the site level we create a column called ‘Contact_ID’.
Then we make a new list, we name it ‘Contacts’.
In the List Settings we open the Advanced Settings.
At ‘Allow management of content types’ we select ‘Yes’.
Next we add the existing ‘Contact’ content type to the list.
Then we remove the ‘Item’ content type from the list.
And finally we add the ‘Contact_ID’ column.
Now we’ll create a new library that is used to upload files to.
In the library settings we also add the Contact_ID column.
We also create a new view, called BFE.
Shareflex uses this view to display files on the contact form that are linked to the item.
The view should not show any folders, so we select this option.
Now we go back to the Shareflex Online App.
We click ‘Tools’, ‘Manage List Forms’.
We choose the Website, this is correct.
Then we click on ‘Design Forms’, and choose the list ‘Contacts’.
On the left you see all fields, on the right you see the configuration of the form.
We leave the name of the configuration folder as it is.
We want a form with 2 tabs and 2 columns.
That is a default value, you can add columns later.
Note that the History Tab is added automatically.
Then we choose the Primary Key field, that is Contact_ID.
The field that connects the items in the contact list and the files in the document library.
Here we specify the how the Contact ID is generated.
We choose consecutive numbering.
Then the Secondary View.
Here we choose the file library that is linked to the Contact item, this is ContactDocuments.
At ‘Rules’ we leave all options selected.
We could change the prefix for the Contact ID, but that is not necessary.
Under ‘Advanced’ we also leave all options selected.
And then we click ‘Enable Shareflex Forms’.
Here we see the form with 3 tabs: Contact, Tab2 and History.
First we will adjust the Contact_ID column.
We change the label to ‘Contact ID’.
We adjust ‘Default text to display’ to ‘Is generated automatically’.
And we make this column Read-only.
We move the Contact ID column to the Contact tab and slide it up.
We change the text from Tab 2 to ‘Other’.
For clarity, we also change the name of the XML file to ‘Form_Tab_Other’.
We do the same with the XML file name for Contact.
There a few more display options here: larger view, vertical, classic instead of modern.
These options are also available when you use the form in production.
Then we click on ‘Save Config’ and then ‘Done’.
This is what the form looks like.
If we’re not satisfied with the result, with only one click on the Design button, we’re back in the form designer.
The button ‘Open FormConfiguration Folder’ opens the location of the form tab XML files.
There is also the UI.js, the file that stores all JavaScript code needed for the correct functioning of the form.
There are some additional options to manipulate the display of the table columns, rows and cells.
In addition to the Input Hint we’ve already seen, there the option to assign a prefix or suffix to a field value.
With the ‘Bottom Code’ button you can directly access and modify the UI JavaScript file.
You can also add extra JavaScript files to the form.
You can apply code snippets.
We also adjust the Title field.
This is a mandatory field, we change the label to ‘Last Name’.
And shift the fields in a logical order.
Here we could add a column to the form table.
But this doesn’t make sense.
With the ‘Undo’ button we can reverse all changes since the last Save.
If you then click on ‘Done’ instead of ‘Save Config’, naturally, you’ll be asked to save the changes.
Now we create an item with the new form.
The ‘Comments’ column is a Rich Text column where you can store formatted text, but cannot upload files.
We only upload files after we saved the item.
We click on ‘Create’.
Notice that the Contact ID is generated automatically.
When we open the item, we see the ContactDocuments library under the item.
We add some files to the item.
We upload a Word document and we drag a PDF file to the library.
If you click on the icon, you will see the content.
We do the same for the Word document.
We click in the Word document, then you can edit and save the document directly from this screen.
Both files show the correct Contact ID, and in the ContactDocuments library, notice that a Contact ID folder has been created in which the files are located.
It’s that easy to develop a structured and functional form with the Shareflex Form designer.





Leave a Reply