Category Archives: DFFS

Character or word count in multiline plain text field

June 18, 2020: Updated to fix a bug “countWords”: true.

June 22, 2020: Updated to fix a bug where some of the code was missing in the snippet.

I have updated this old solution to work with DFFS. Please note that it supports multiline PLAIN text fields only – no rich text / HTML.

Add this to your Custom JS:

function counterForMultiLinePlain(arg) {
    jQuery("#dffs_" + arg.fin).find('textarea').bind('keyup blur', function(e) {
        var thisLength = jQuery(this).val().length; // Characters
        var prefix = "";
        if (arg.countWords && thisLength > 0) { // Count words
            thisLength = jQuery(this).val().split(/[' '|\n]/).length;
        // Color code
        if (arg.colorCodeCounter) {
            if ((arg.max > 0 && thisLength >= arg.max) || thisLength < arg.min) {
                jQuery("#myCustomCounter_" + arg.fin).css({
                    'background-color': '#da2931',
                    'font-weight': 'bold',
                    'color': 'white'
            } else if (arg.max > 0 && thisLength > (arg.max - 10)) {
                jQuery("#myCustomCounter_" + arg.fin).css({
                    'background-color': '#FF6600',
                    'font-weight': 'bold',
                    'color': 'white'
            } else {
                jQuery("#myCustomCounter_" + arg.fin).css({
                    'background-color': 'transparent',
                    'font-weight': 'normal',
                    'color': 'black'
        // Min
        var belowMin = false;
        if (arg.min > 0 && thisLength < arg.min) {
            prefix = arg.minLimitLabel.split("{0}").join(arg.min - thisLength);
            belowMin = true;
        // Max
        if (!belowMin && arg.max > 0) {
            prefix = arg.maxLimitLabel;
            if (arg.countWords) { // Count words
                while (thisLength > arg.max) {
                    currVal = jQuery(this).val();
                    jQuery(this).val(currVal.substring(0, currVal.lastIndexOf(' ')));
            } else { // Count characters
                if (thisLength > arg.max) {
                    currVal = jQuery(this).val();
                    jQuery(this).val(currVal.substring(0, arg.max));
            prefix = arg.maxLimitLabel.split("{0}").join(arg.max - thisLength < 0 ? 0 : arg.max - thisLength);
        jQuery("#myCustomCounter_" + arg.fin).html(prefix);
    }).after("<div id='myCustomCounter_" + arg.fin + "' style='padding:2px 4px;margin-top:2px;'></div>").trigger("keyup");

// Call the function like this
    "fin": 'MultilinePlainText',
    "countWords": false,
    "min": 50,
    "max": 0,
    "colorCodeCounter": true,
    "minLimitLabel": "You must add {0} additional characters",
    "maxLimitLabel": "Remaining characters: {0}"

Look at the “Call the function like this” section and change the “fin” parameter and adjust the limits and labels – leave min and max as 0 to disable min or max check.

Let me know if you have any questions.


Leave Request System


This presentation seeks to show how easily you can setup a leave or vacation request system in DFFS. This presentation assumes that you already have SharePoint and DFFS already installed in your environment.

The development is based on an On premises SharePoint 2016 setup however the same concept applies to SharePoint 2019 or O365


  • SharePoint 2016
  • DFFS
  • SharePoint Designer 2013

Note: The way I have developed this system is not the only way of achieving this task. DFFS is so flexible That it allows you to do this in many ways. I just chose one the ways.

Scope and Features.

This system will manage the leave requests and leave days of employees of any organization. The leave days will be stored in another list where user can track the number of leave/vacation days taken and leave/vacation days to be taken.

When the requests are made the leave days will go through approval processes based on the employee´s position. For example, in some organization a Manager´s leave request will only be approved by the Managing Director i.e. one level approval process.

However, in most cases the approval process is far more complex than that they are case where you have factory employees who report to different Supervisors who in turn report to the different Managers. In such a case the approval process has to go through all these different approval processes. This system will address that as well.

System Features.

  • Submission of Leave Requests.
  • Submission of Justification Requests for absence (attachment of doctor’s report).

 The system will also have safety nets in that a requests can only be submitted if the request days do not exceed available days.

Now enough with the theory, let get into it!

  1. We need to create two custom lists named Leave Requests and Employees requests.

After creating the custom lists please go ahead and create the columns necessary. For the leave request I have created the columns as shown below.

For choice fields I have shown the option configured in the print screen below.

Please note that the Days taken column is a calculated column. You have to be careful when calculating Start Days and End Days not to include weekends so for that we use the formula

Below. In The Column validation of the calculated Column.

=IF(AND((WEEKDAY([[End Date]];2))<(WEEKDAY([Start Date];2));((WEEKDAY([Start Date];2))-(WEEKDAY([End Date];2)))>1);(((DATEDIF([Start Date];[End Date];”D”)+1))-(FLOOR((DATEDIF([Start Date];[End Date];”D”)+1)/7;1)*2)-2);(((DATEDIF([Start Date];[End Date];”D”)+1))-(FLOOR((DATEDIF([Start Date];[End Date];”D”)+1)/7;1)*2)))

After creating the two custom list, we need to install DFFS on these list in order to create and customize our forms. Please follow the step below to customize to install DFFS.

First identity in Site Contents a folder written SPJS and open it.

After opening the DFFS folder on the target list please select the name of the list in which you want to customize your forms. In my case it is the Leave Request list.

After selecting the list proceed to install DFFS by clicking theinstall DFFS buttonfor all the formtypes i.e. New Form, Display form and Edit form.

When we reopen our form when can now see that its Enhanced with DFFS meaning the install was successful. And now we can start customizing our form.I will not go deep in customization as this is already covered in the DFFS Manual however I will add a little colour to make this form look pleasant.

To do a bit of customization we are going to do the below configs to help the form look a bit more pleasant. Customization is a whole big topic on its own and like I mentioned earlier we will not be getting in more detail.

Add the columns to the form as shown below

tabs configuration


After few configurations shown above our form is already looking this. We need to include the attachments on the form to help when submitting the Doctors reports when justifying for absence due to medical reasons.

As our requests will pass through different approval stages will need to create the approvals Tabs in the Edit form. In our case the approvals will be done by Supervisors, Managers and HR Department. As a rule of thumb you need to create SharePoint Groups for each TAB for example.The edit tabs will have the approvals columns which are Supervisor Approval,

Manager Approval and HR Approval.Normally, this will have a date field to show the date when the approval was made.In our example we did not include a date for simplicity sake.

When creating the Edit Tabs, we need to specify which groups will be able to visualize that TAB in the example below the group Supervisors Caixa will visualize the Approval TAB for the Supervisors.

This is a good security measure to make sure the Approvals are done by the intended people.

Please note that we are not going to be installing DFFS on the Employees custom list because this basically used to track Employees Leave Days. What will happen is that someone from the HR Department with edit permissions will update the leave days of the employees normally at the beginning of the year.

Please note the leave available column is a calculated column which use the formula below

To calculate the number of days.

=IF (AND ([Total Leave] <[Leave Taken];NOT(ISBLANK([Total Leave]));NOT(ISBLANK([Leave Taken])));””;IF(AND([Total Leave]>=[Leave Taken];NOT(ISBLANK([Total Leave]));NOT(ISBLANK([Leave Taken])));[Total Leave]-[Leave Taken];””))

Now that the basic customizations are done we will jump to SharePoint Designer(SPD) to continue with our configs.

When opening SPD we need to specify the site that hosts our custom list.

In SDP open your Leave Request list as shown below.

Give your workflow a name and make sure it is a 2013 Workflow as highlighted below. Please note will not go into details on how to make workflows in SPD.That’s a whole big subject which has books written on it. I will just show the Configuration that will make your leave request work.However, from the configuration we are going to be making here there is a lot to be learnt.

Again, the way I will configure my workflow is not the only way please feel to configure in a way that best suits your environment.Our requests will follow the fluxogram shown below.

We can add a stage by clicking the Stage Option on the ribbon tab of the SDP as shown below.

To simplify things, for each approval stage we will create a Stage in SPD except for Supervisor Approval because this will be part of the variables stage. First we will create A stage to store all of our variables.This stage will be called variables.

To set a variable click in the Set workflow variable on the actions ribbon as shown below.

the option to create variables

To set values we click on condition right on the ribbon and select the option If value equals value. To make logic in SPD we need to associate conditions and actions.

IF Department equals IT, Department and IT being lookup values from our Custom list through SPD.

To kick start the workflow we need to make sure that the ID field should have a value.

After clicking the option double click, it and give name to the variable in our case It going to VSupervisor and we are setting that to user mstest. Basically what we are saying it is.

If a request is made and the Department is IT, make the Supervisor to be mstest. In other words, we are telling the workflow to route all IT request to the IT Supervisor who is mstest.

Will the follow the same procedure to setup for Variable for Managers as well.This request has to be sent by email so we are going to prepare that as well. Normally for HR you can just forward the e-mail to a Group.These are usually the HR employees who deal with vacations

After setting your variables then configure the send e-mail option and to do that follow the steps.

After adding the e-mail option double click it and configure as follows.

Select the VSupervisor variable as shown below.

  •  As we configured the email we will need an edit form link. This the link which will be used for the approval.
  • There are so many ways of getting this but I prefer to simply create a dummy request edit it and get the link from thereI my case I created the dummy request below

I will now edit it by clicking the 3 dots to obtain the edit link. Please make sure to copy the whole link we will need it later.

After getting the edit link paste it in the body of your e-mail.

Now we need to edit the edit link sorry for the pun so that it will be different on every request

If we do not edit it all the requests will come with one ID. To do so click on the 3 dots next to

Fx. Delete the ID number, in these case its 1, meaning request is number 1 on the list.

After deleting, the ID value lookup the ID field from the list. To do that click the add or change lookup value.

After the email is wait is sent to the Supervisor we need to put the wait function on this stage to do that the parallel block option in the ribbon. The whole idea here is we want the workflow to stop until the Supervisor approves the task. If we do not do that the workflow we just go through all the stages even if the conditions are not met. Basically the logic here will tell the workflow to stop until the Supervisor approves or rejects the request. This setup will be done also for the Manager and HR Stages.

After selecting the run in parallel block and 2 steps in that block by clicking the Step option in the ribbon.

In the first step we are going to configure the wait for approval option. First we need to create a variable for starting and ending our parallel block, it has to be a Boolean variable. In our case we will call it Supervisor Task Completed.

Right mouse click the parallel block and go to Advanced properties and then select the previouslycreated variable Supervisor Task Completed As shown by the prints below.

After completing your waiting steps configuration, it should look like below.

As I have already highlighted the waiting configuration should be done of for all the stages.

Our Basic Email Setup is done for the Supervisor.

For the Manager´s approval the setup is similar. The only difference is that the Manager should only receive the Leave Request if the Supervisor approves else an email of rejection is sent to

 to the requester. Your Manager Stage Setup should look like below.

And to reach HR the request will need the approval of the Supervisor and the Manager.

So the Setup should be like the on below.

After HR has approved a request the system should look into the Employees List and deduct the number of approved days from that Employees´ leave available days.

To do that I have included another stage for Calculation which will call Calculation Stage.

Basically we need to create Variables again for this, we need the store the Values from our employees list such as the Leave Taken & Leave available. So Basically our formula will be

 Leave taken + Days Requested =New Leave Taken then we update the in the Employees list and there since we the Leave available is a calculated field it will also be updated.

The result to the formula should not be negative because its means the Employee has requested leave days than has available. In a such we can put a condition that if that happens then the requested should be rejected.

Now that we have the idea he goes the configuration in SharePoint designer.

First let´s create a variable for our day taken. Please note when creating the variables at this Stage the type should be numbers since we are dealing with numbers.

It is important to note that the calculation should on be made if the reason for request is Annual leave to guarantee that we will put a condition that specifies it.

Please note when looking up the value for the Leave Taken valuable we need to change the Data source to the employees list.

To retrieve the Value, on the Field from Source field we should select the column Leave Taken because that’s where our field. The on the find list item we need matching values in both lists. In this we are matching by name.

After we retrieve these values the we need to do the calculation. In SharePoint Designer there is

an action called do calculation

When looking up for the fields we need for the calculation all we need to retrieve our previous

Set variables. Your formula should look like the print below.

After we have out NewLeaveTaken we need to updated the Employees list

Your setup should look like the print below.

After everything is done your Calculation Stage should like below.Please note the condition on annual leave.This to guarantee that the calculation can only be done when its a leave request.

Almost done, we just need to setup the rejection stage. Basically if the request is rejected on any of the stages then the request is rejected. And this is where the workflow ends.

Lastly we need to setup the Workflow to run automatically and to do that we click on Workflow settings

Now let’s test.

As you see the e-mail has been received by the supervisor.

After the Supervisor Approves yes the Request move to the Manager.

After the Managers Approval the Request goes to HR.

After the HR approves the request you the employees’ days are then updated in the Employees List automatically.

To make a justification request the user simply has to select the motive justification for absence in the motive column otherwise all the approvals stages are the same. The only difference is that when you make a justification for absence fase and after all the approvals you leave days’ balance will not be updated.

So this is basically a setup for a leave request System using DFFS enjoy.

DFFS v4.4.5.0 BETA with Mobile support

I have finally gotten around to address the missing Mobile support in DFFS. This new release adds support for mobile devices for all forms configured with DFFS on SharePoint 2013+.

Example form in emulated mobile browser in Chrome.

Because there are quite a few changes in this version I’m releasing it as a BETA and you should NOT use it in a production environment until it is released in a final production version.

Please post any comments or bugfixes in the comments below or in the forum.

Change log

Changed files in this release:

/DFFS/js/DFFS_frontend.min.js v4.4.5.0 BETA
/DFFS/js/DFFS_backend.min.js v4.4.5.0 BETA
/DFFS/plugins/SPJS-casc.js v3.7.40
/DFFS/plugins/SPJS-vLookup_frontend.js v2.2.153
/DFFS/plugins/SPJS-vLookup_backend.js v2.2.153
/DFFS/plugins/SPJS-utility.js v1.346
/DFFS/installer/DFFS_Installer_v2.html v2.0.0.13

DFFS v4.4.5.0

  • Added support for mobile devices by zooming in and focusing on the form when you use a mobile browser (or emulate a mobile device in Chrome).
  • On every tab you can now select target: both, desktop or mobile to only show the tab in the selected mode. All existing forms will work in a mobile browser without modifications, but these changes are made when opening any DFFS enabled form in a mobile device:
    • All fields are show in one column with field label above field body.
    • Side-by-side settings are bypassed / skipped.
    • The Enhanced with DFFS link is not shown.
    • If you have only one tab in a mobile form, the tab row is automatically hidden.
  • Added a new setting in the Misc tab to let you hide the form menu banner when opening a form in a mobile browser. Please note that if you use multiline rich text fields you must not hide it because you will loose the RTE controls.
  • Changed the style of radio buttons and checkboxes to match the style of the boolean slider.
  • Changed the icon to the left of the Attachment field used to add an attachment when the field is included in a tab from a + to a paperclip. Also made the label “Attachment” clickable so you don’t need to click the icon directly.
  • Added a new setting in the Misc tab to force attachments to open in a new tab.
  • Added a missing translation for LCID 2070 (Portuguese) in an internal function to support getting the value of a boolean field in DispForm as a boolean value.
  • Fixed a problem with getting the value from a boolean field in DispForm (for use with custom code or rules). This bug was introduced when the slider for boolean fields was introduced in DFFS v4.4.4.26.
  • Fixed an intermittent bug in a people picker field set as readonly on form load that caused the readonly label to show as empty even if the field was set. This happened because the field wasn’t always fully rendered when the rule triggered.
  • Fixed a bug in the automatic undo of the checkout of a form using the DFFS checkout functionality when a user opens EditForm, but hits cancel when the form was opened in a dialog. This is done by hiding the close dialog button to force the user to use cancel button to back out and cancel checkout. This cancel button has also been modified to ensure it checks the item back in before closing the dialog. Please note that if the user uses the navigation buttons in the outer / top web-page it will not automatically cancel the checkout of the item.
  • Added help text in the Cascading dropdown tab:
    If you are setting up multiple cascading dropdowns with the same datasource / list, you must include the “Comma separated list of fields in the lookup list” fields from ALL your cascading dropdowns in the first one you configure. This is because the first one will be the “master” and it needs to pull in the values for all fields in the datatable for use with the different instances.
  • Moved the Password up to the top of the Misc tab for better visibility.
  • Fixed an intermittent problem with getting the “Edit item” button text localized in DispForm.
  • Fixed an alignment problem with the tooltip and required star placeholder if the label is hidden in the sbs-settings.

vLookup v2.2.153

  • Fixed wrong tooltip in Edit item link visible in section in vLookup configuration.

Casc v3.7.40

  • Added back the warning if you had multiple instances of cascading dropdowns and not all fields were added to the first instance “Comma separated list of fields in the lookup list” section because this went missing a few revisions ago.
  • Fixed an alignment problem with the tooltip and required star placeholder if the first tab in your DFFS form used side-by-side settings with the cascading dropdowns.
  • Added automatic stripping of illegal linefeed characters from the source data that are added by an integration writing multiline data to a single line of text field.

SPJS-utility v1.346

  • Fixed an issue with getFieldValue on a boolean field in DispForm related to the boolean slider introduced in DFFS v4.4.4.26.


  • Added missing file DFFS_i18n.js to the DFFS_Loader_v2.html file created by the DFFS installer v2. This file is used for translations for spjs.dffs.formatDate. This file was by mistake left out of DFFS installer v2 form the beginning.

Download the BETA

Get the BETA here.