List Control Bug

Forms
1

This just started happening. I have a CAML filter and an applied template to a list contorl. I use the control.ready().... in order to apply both. Prior to this past weekend I had no issue but this morning this started happening.

Users now have to manually refresh for the entire list to come up. Both the template and the filter is correctly applied after refresh and I have no errors in the console.

2

Hello @cwalter2,

I couldn't reproduce the issue on my form.

Are you getting any errors in the browser console (F12)? Please share the screenshot.

3

image
image614×770 54.9 KB

Here is how I apply the filter and template:

`function applyFilter (dt) {
    var filter = "<Eq><FieldRef Name='Project_x0020_Status' /><Value Type='Text'>Active Project</Value></Eq>"
    dt.filter = filter;
    dt.refresh();
};`

`function applyTemplate (dt) {
    dt.templates = {
        Dashboard: function(ctx) {
            var value = ctx.row.Dashboard;
            if (!value) {
                return '';
            }
            var urlq = "'https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=39d02a64-ec32-467c-b396-61dd86087085&item=" + ctx.row.ID + "'";
            var urle = "'https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=24c7f034-142c-4d7d-a256-950e9e71d0a0&item=" + ctx.row.ID + "'";
            var urlp = "'https://myswite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?item=" + ctx.row.ID + "'";
            return '<a style="padding-right:8px;" href="#" onclick="window.open('+ urlq +')" ><i data-icon-name="Settings" class="ms-Icon ms-Icon--Settings" style="vertical-align: middle;"></i></a><a style="padding-right:8px;" href="#" onclick="window.open('+ urle +')" ><i data-icon-name="Commitments" class="ms-Icon ms-Icon--Commitments" style="vertical-align: middle;"></i></a><a style="padding-right:8px;" href="#" onclick="window.open('+ urlp +')" ><i data-icon-name="DeveloperTools" class="ms-Icon ms-Icon--DeveloperTools" style="vertical-align: middle;"></i></a>';
        }
    }
    dt.refresh();
};`

`fd.spRendered(function() {
    fd.control('ActiveProjects').ready().then(function(dt) {
        applyFilter(dt);
        applyTemplate(dt);
    });
})`

Also I use the height field in the control settings, I have not had issues with lists that do no define this:
image

4

Hello @cwalter2,

Is that a complete code you are using in the form?

What version of the app package(v1.0.8) and the designer(v1.8.7) are you using?

To check the app package version, open the console (F12) go to Sources >> Page >> forms.plumsal.com
image

If the app package version is outdated, please follow the steps from the instructions to get the latest version:
Update the app package for Plumsail Forms (SharePoint Online) — SharePoint forms

5

@mnikitina ,

App Package and designer are current. Here is complete code:

window.fd = fd;
window.pnp = pnp;
window.Web = Web;
window.Site = Site;
window.$ = $;

function applyFilter (dt) {
var filter = "<Eq><FieldRef Name='Project_x0020_Status' /><Value Type='Text'>Active Project</Value></Eq>"
dt.filter = filter;
dt.refresh();
};

function applyEstFilter (dt) {
var filter = "<Eq><FieldRef Name='Project_x0020_Status' /><Value Type='Text'>Estimating</Value></Eq>"
dt.filter = filter;
dt.refresh();
};

function applyQualFilter (dt) {
var filter = "<Eq><FieldRef Name='Project_x0020_Status' /><Value Type='Text'>Qualifying</Value></Eq>"
dt.filter = filter;
dt.refresh();
};

function applyTemplate (dt) {
dt.templates = {
    Dashboard: function(ctx) {
        var value = ctx.row.Dashboard;
        if (!value) {
            return '';
        }
        var urlq = "'https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=39d02a64-ec32-467c-b396-61dd86087085&item=" + ctx.row.ID + "'";
        var urle = "'https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=24c7f034-142c-4d7d-a256-950e9e71d0a0&item=" + ctx.row.ID + "'";
        var urlp = "'https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?item=" + ctx.row.ID + "'";
        return '<a style="padding-right:8px;" href="#" onclick="window.open('+ urlq +')" ><i data-icon-name="Settings" class="ms-Icon ms-Icon--Settings" style="vertical-align: middle;"></i></a><a style="padding-right:8px;" href="#" onclick="window.open('+ urle +')" ><i data-icon-name="Commitments" class="ms-Icon ms-Icon--Commitments" style="vertical-align: middle;"></i></a><a style="padding-right:8px;" href="#" onclick="window.open('+ urlp +')" ><i data-icon-name="DeveloperTools" class="ms-Icon ms-Icon--DeveloperTools" style="vertical-align: middle;"></i></a>';
    }
}
dt.refresh();
};

function applyEstTemplate (dt) {
dt.templates = {
    Dashboard: function(ctx) {
        var value = ctx.row.Dashboard;
        if (!value) {
            return '';
        }
        var urlq = "'https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=39d02a64-ec32-467c-b396-61dd86087085&item=" + ctx.row.ID + "'";
        var urle = "'https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=24c7f034-142c-4d7d-a256-950e9e71d0a0&item=" + ctx.row.ID + "'";
        return '<a style="padding-right:8px;" href="#" onclick="window.open('+ urlq +')" ><i data-icon-name="Settings" class="ms-Icon ms-Icon--Settings" style="vertical-align: middle;"></i></a><a style="padding-right:8px;" href="#" onclick="window.open('+ urle +')" ><i data-icon-name="Commitments" class="ms-Icon ms-Icon--Commitments" style="vertical-align: middle;"></i></a>';
    }
}
dt.refresh();
};

function applyQualTemplate (dt) {
dt.templates = {
    Dashboard: function(ctx) {
        var value = ctx.row.Dashboard;
        if (!value) {
            return '';
        }
        var urlq = "'https://mysite.sharepoint.com/sites/pwa/SitePages/PlumsailForms/Projects/Item/EditForm.aspx?FormID=39d02a64-ec32-467c-b396-61dd86087085&item=" + ctx.row.ID + "'";
        return '<a style="padding-right:8px;" href="#" onclick="window.open('+ urlq +')" ><i data-icon-name="Settings" class="ms-Icon ms-Icon--Settings" style="vertical-align: middle;"></i></a>';
    }
}
dt.refresh();
};

function POFiltering (value) {
if (!value || value == 'All Items') {
    $('.csPOAllItems').show()
    $('.csPOAccounting').hide()
    $('.csPOLateItems').hide()
    $('.csPOOpen').hide()
} else if (value == 'Accounting') {
    $('.csPOAllItems').hide()
    $('.csPOAccounting').show()
    $('.csPOLateItems').hide()
    $('.csPOOpen').hide() 
} else if (value == 'Open Items') {
    $('.csPOAllItems').hide()
    $('.csPOAccounting').hide()
    $('.csPOLateItems').hide()
    $('.csPOOpen').show()
} else if (value == 'Late Items') {
    $('.csPOAllItems').hide()
    $('.csPOAccounting').hide()
    $('.csPOLateItems').show()
    $('.csPOOpen').hide()
}
}

function POButtons (dt) {
dt.buttons.forEach(function(button){
    if(button.icon == "Add") {
        button.visible = false
    }
})
}

fd.spBeforeRender(function() {

/**********************
Getting Profile Info
**********************/
pnp.sp.profiles.myProperties.get().then(function(result) {

    var props = result.UserProfileProperties;
    
    for(var i = 0; i < props.length; i++){
        if(props[i].Key == "UserName"){
            fd.field('User').value = props[i].Value;
            //fd.field('CompanyEmail').value = props[i].Value;
            break;
        }
    }

});

});

fd.spRendered(function() {

var readyNumber = 0;
var getUser = fd.field('User').value;

//localStorage.clear();
fd.field('sourceCheck').value = '';
fd.control('POProjFilter').value = null;
fd.control('ROProjFilter').value = null;
fd.control('SCProjFilter').value = null;
var scrWidth = Number(window.innerWidth) * .75
var scrHeight = Number(window.innerHeight) * .75

var myVar = setInterval(function () {
    if (readyNumber == 16) {
        $('.csSplash').show();
        $('.csLoading').hide();
        fd.control('Text21').text = 'Getting Things Ready.'
        clearInterval(myVar);
        fd.field('ROView').value = 'All';
        fd.field('POView').value = 'All Items';
        POFiltering(fd.field('POView').value);
    } else {
        fd.control('Text21').text += '.';
    }}, 1)    

fd.control('ActiveProjects').ready().then(function(dt) {
    applyFilter(dt);
    applyTemplate(dt);
    readyNumber += 1;
});

fd.control('Estimating').ready().then(function(dt) {
    applyEstFilter(dt);
    applyEstTemplate(dt);
    readyNumber += 1;
});

fd.control('Qualifying').ready().then(function(dt) {
    applyQualFilter(dt);
    applyQualTemplate(dt);
    readyNumber += 1;
});

fd.control('Vendor').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    if (getUser == 'alawrence@mysite.com') {
        fd.field('UserCheck').value = false
    } else if (getUser == 'cwalter2@mysite.com') {
        fd.field('UserCheck').value = false
    } else if (getUser == 'rnapier@mysite.com') {
        fd.field('UserCheck').value = false
    } else if (getUser == 'rmiloszewski@mysite.com') {
        fd.field('UserCheck').value = false
    } else if (getUser == 'jwireman@mysite.com') {
        fd.field('UserCheck').value = false
    } else {
        fd.field('UserCheck').value = true;
    }
    fd.field('FilterVendor').$on('change', function(value) {
        if (value) {
            var newValue = value.replace(/&/g, "&amp;").replace(/</g,"&lt;").replace(/>/g, "&gt;").replace(/'/g,"&#039;").replace(/"/g, "&quot;");
            var vApplyFilter = "<Contains><FieldRef Name='Title' /><Value Type='Text'>" + newValue + "</Value></Contains>";
            dt.filter = vApplyFilter;
            dt.refresh();
        } else {
            dt.filter = '';
            dt.refresh();
        }
    });
    readyNumber += 1;
});
fd.field('UserCheck').$on('change', function(value) {
    if (value) {
        fd.control('Vendor').buttons.forEach(function(button){
            if(button.icon == "Add") {
                button.visible = false
            }
        });
    }
});
fd.control('POProjFilter').ready().then(function(control) {
    var tmp = '#: data.LookupValue + " - " + data.Title #';
    control.widgetOptions = {
        template: tmp,
        valueTemplate: tmp
    }
});
fd.field('POView').$on('change', function(value) {
    POFiltering(value)
});
fd.control('POAllItems').ready().then(function(dt) {
    POButtons(dt);
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    fd.control('POProjFilter').$on('change', function(value) {
        if (value) {
            var filter = "<Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
            dt.filter = filter;
            dt.refresh();
        } else {
            dt.filter = '';
            dt.refresh();
        }
    });
    readyNumber += 1;
});
fd.control('POAccounting').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    POButtons(dt);
    fd.control('POProjFilter').$on('change', function(value) {
        if (value) {
            var filter = "<Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
            dt.filter = filter;
            dt.refresh();
        } else {
            dt.filter = '';
            dt.refresh();
        }
    });
    readyNumber += 1;
});
fd.control('POLateItems').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    POButtons(dt);
    fd.control('POProjFilter').$on('change', function(value) {
        if (value) {
            var filter = "<Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
            dt.filter = filter;
            dt.refresh();
        } else {
            dt.filter = '';
            dt.refresh();
        }
    });
    readyNumber += 1;
});
fd.control('POOpen').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    POButtons(dt);
    fd.control('POProjFilter').$on('change', function(value) {
        if (value) {
            var filter = "<Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
            dt.filter = filter;
            dt.refresh();
        } else {
            dt.filter = '';
            dt.refresh();
        }
    });
    readyNumber += 1;
});
fd.control('SCProjFilter').ready().then(function(control) {
    var tmp = '#: data.LookupValue + " - " + data.Title #';
    control.widgetOptions = {
        template: tmp,
        valueTemplate: tmp
    }
});
fd.control('Subcontracts').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    POButtons(dt);
    var baseFilter = "<IsNotNull><FieldRef Name='Project_x0020_Number'></FieldRef></IsNotNull>"
    dt.filter = baseFilter;
    dt.refresh();
    fd.control('SCProjFilter').$on('change', function(value) {
        if (value) {
            var expandFilter = "<And>";
            expandFilter += baseFilter;
            expandFilter += "<Eq><FieldRef Name='Project_x0020_Number' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq></And>";
            dt.filter = expandFilter
            dt.refresh();
        } else {
            dt.filter = baseFilter;
            dt.refresh();
        }
    })
    readyNumber += 1;
})
fd.control('ROProjFilter').ready().then(function(control) {
    var tmp = '#: data.LookupValue + " - " + data.Title #';
    control.widgetOptions = {
        template: tmp,
        valueTemplate: tmp
    }
});
fd.control('Rentals').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    POButtons(dt);
    fd.control('ROProjFilter').$on('change', function(value) {
        if (value) {
            if (fd.field('ROView').value == 'All' || fd.field('ROView').value == '') {
                var filter = "<Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
                dt.filter = filter
                dt.refresh();
            } else {
                var filter = "<And><Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
                filter += "<Eq><FieldRef Name='OffRent' /><Value Type='Boolean'>0</Value></Eq></And>";
                dt.filter = filter
                dt.refresh();
            }
        } else {
            if (fd.field('ROView').value == 'All' || fd.field('ROView').value == '') {
                var filter = '';
                dt.filter = filter
                dt.refresh();
            } else {
                var filter = "<Eq><FieldRef Name='OffRent' /><Value Type='Boolean'>0</Value></Eq>";
                dt.filter = filter
                dt.refresh();
            }
        }
    })
    fd.field('ROView').$on('change', function(lValue) {
        var value = fd.control('ROProjFilter').value;
        if (value) {
            if (lValue == 'All' || lValue == '') {
                var filter = "<Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
                dt.filter = filter
                dt.refresh();
            } else {
                var filter = "<And><Eq><FieldRef Name='Project_x0020__x0023_' LookupId='TRUE' /><Value Type='Lookup'>" + value.ID + "</Value></Eq>";
                filter += "<Eq><FieldRef Name='OffRent' /><Value Type='Boolean'>0</Value></Eq></And>";
                dt.filter = filter
                dt.refresh();
            }
        } else {
            if (lValue == 'All' || lValue == '') {
                var filter = '';
                dt.filter = filter
                dt.refresh();
            } else {
                var filter = "<Eq><FieldRef Name='OffRent' /><Value Type='Boolean'>0</Value></Eq>";
                dt.filter = filter
                dt.refresh();
            }
        }
    })
    readyNumber += 1;
})
fd.control('UnionLocals').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    POButtons(dt);
    readyNumber += 1;
});
fd.control('perDiem').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    readyNumber += 1;
});
fd.control('manpower').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    readyNumber += 1;
});
fd.control('Termination').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    readyNumber += 1;
});
fd.control('Burden').ready().then(function(dt) {
    dt.dialogOptions = {
        width: scrWidth, 
        height: scrHeight
    }
    POButtons(dt);
    readyNumber += 1;
})
fd.control('PLA').ready().then(function(dt) {
    readyNumber += 1;
});

});
6

Hello @cwalter2,

You have multiple List ir Library controls on the form, are you facing the same issue with them? Or just with ActiveProjects control?

Also, how do you open the page with the List or Library control? Are you routing to a different form set or are you hiding/showing elements on button click?

Please try creating a form with just the List or Library control and test if the filter is applied properly on form load.

7

@mnikitina,

It does happen to the other list controls. I use a button to hide/show the other lists.

8

I created another form with just one list control. I worked my way from just applying the filters to hiding and showing on ready to hiding and showing once the user clicks a button. The last step is the issue. I have added a refresh to the click and the remaining list items show up. Not sure what changed with the latest update as it was working previously.