Making column readonly in list or library

Forms SharePoint 2019
1

Hello there,

I am trying to set a few columns in my list or library control to readonly. I read in the community to make calculated column but i have 4-5 columns and already a lot of columns and content types in my SP list so I would like to avoid this. I tried using the template but that also does not seems to work.

My scenario is that I start the form with a readonly list library control. I have a few steps that the user needs to take and one scenario where they would need to edit one column in the control. At this step I would like to leave the rest of the columns readonly/disabled except the one "Comments" column (inline edit).

I would like something like this

fd.field('Status_NietAkkoord').$on('change', function (value) {
    if (value.includes('Foutief data')) {
        $('.optie2').show();
        fd.control('LesopdrachtTable').readonly = false;
        //something like this but for multiple columns
        fd.control('LesopdrachtTable').columns[2].readonly = true;
    } else {
        $('.optie2').hide();
        fd.control('LesopdrachtTable').readonly = true
    }
})

I also found the on edit post but this does not do anything like mentioned in the original post

Any help would be appreciated. Thanks in advance.

2

Dear @asmita_adh,
Here's the code you can use to make columns non-editable:

fd.spRendered(() => {
    const listControl = fd.control('SPDataTable1');
    listControl.ready(() => {
        const columns = listControl.widget.options.columns;
        columns[4].editable = () => false;
        listControl.widget.setOptions({
            columns
        });
    });
});
2 Likes
3

Perfect, thank you :slight_smile:

1 Like
4

Hi @Nikita_Kurguzov,

The above works perfectly when I start my form with the readonly control and then with my condition make it editable.
I have however not been able to get the list and library control columns in a standard inline edit mode to not editable. I even created a test list and it has nothing in the JS except the above code.

image
image1700×753 154 KB

I thought maybe it was an timeout issue and I tried with timeout but to no avail..
On top of this, I also wanted to set row background to specific rows, I get the following to work via console but not via the code..

const listControl = fd.control('SPDataTable1');
    listControl.ready().then(function (dt) {
        let value = dt.widget.dataItems();
        let row = $(dt.$el).find('tr');
        if (value) value.forEach((item, index) => { if (item.ADReview === "Yes") $(row[index + 1]).css("background-color", "#cff1ed") });
    });

Could you please have a look at these problems and point me in the right direction?
Thanks a lot in advance.

5

Dear @asmita_adh,
Are you sure about the control being editable? Check browser's consoel for errors, it should appear like this in the Inline editing mode:
image

The only code I've used is this, without any delays:
image

Make sure you have the latest version of the app catalog installed - Installation of Plumsail Forms for SP Online (Microsoft 365) — SharePoint forms