How to hide column within list and library control?

[aliyunrobot]

Hi Plumsail,

I am now working on embed a list and library control in my form. But I want to hide some columns from the child list and only show some ones I need. I am now embedding a document library to my list and I want to hide the 'New Folder' button to avoid users to create too many folders in the target document library. For the document library, I have Document Name, Description, Remarks, Ref.ID columns. Ref.ID columns lookup to my form list ID. Now in my form, I only want to show Document Name and Description column in the list and library control.

How to hide the other columns and the new folder button within list and library control? I am quite new to Forms. Thanks for guidance.

[mnikitina]

Hello @aliyunrobot,

You can hide New folder button in List or Library control using this code:

fd.spRendered(function() {
    fd.control('SPDataTable0').ready().then(function(dt) {
        fd.control('SPDataTable0').buttons[1].visible = false
    });
});

And you can craete any list view with columns you want and display it in the form. For this in Data Source settings of the control select the desired view.

[aliyunrobot]

Hi Mnikitina,

Thanks for reply. That works. By the way, can you list all button ID for the list and library control so I could customize show/hide further? Thanks!

[mnikitina]

Hello @aliyunrobot,

You can find all buttons in buttons property that holds them as an array of objects. To interact with the button, specify its index in the array.
Note, that the index count starts from 0.

For instance, if the source of the control is the Document library, control will have these buttons with the following indexes.

So, the Upload button index equals 0, and you need to use this code to hide it:

fd.control('SPDataTable1').buttons[0].visible = false;

[aliyunrobot]

Hello @mnikitina,

Thanks. Really helpful.

[stormanh]

Hi @mnikitina.

I looked at the documentation and don't see any mention of the ability to dynamically change the list/library control View shown in your screencapture in the Data Source Editor in Forms Designer. There's the ability to change the root folder of the list/library control and was wondering if there's such a thing to change the View dynamically as well?

Thanks,
stormanh

[mnikitina]

Hello @stormanh,

Unfortunately, it is not possible to change the view dynamically.

Why do you need to change the view of List or Library control? Could you please describe the use case, maybe I can suggest something else. For instance, Form Sets that allows designing individual forms for users.

[stormanh]

Hi @mnikitina.

Use cases would be when there are many fields in a list and you want to provide different views for reporting purposes to show only certain fields based on what is needed to be seen.

Thanks,
stormanh

[mnikitina]

Hello @stormanh,

In this case, you can either create a separate From Set for reporting purposes or add multiple List or Library controls with different views to the form and show/hide them dynamically.

[Ramiz]

Hi,
I am trying to hide these two buttons. I have added the following code but the buttons are not getting hide.

fd.control('SPDataTable1').ready().then(function(dt)
{
fd.control('SPDataTable1').buttons[1].visible = false;
fd.control('SPDataTable1').buttons[2].visible = false;
});

[mnikitina]

Hello @Ramiz,

You can't hide Edit and Delete buttons, you need to remove them from the ribbon using the code:

fd.control('SPDataTable1').ready().then(function(dt){
    var bts = dt.buttons.filter(word => (word.icon != 'Delete' && word.icon != 'Edit'));
    dt.buttons = bts
});

[Dario_Chiga]

Can this be applied for the Refresh button as well so that only the column names are displayed and the white ribbon dissappears completely?

[Nikita_Kurguzov]

Dear @Dario_Chiga,
You can just hide the toolbar, like this:

fd.control('SPDataTable1').ready().then(function(dt){
    $(dt.$el).find('.fd-sp-datatable-toolbar').hide();
});

[Dario_Chiga]

Back to this Topic. Maybe a little late but there's a new Problem that i encountered.

Now it shows me 2 buttons, which do exactly the Same. The upper one creates the same Document with the Same Template, just with one extra click.

Also i would like to hide the "new" and "upload" button so that only 1 "new" button is there.

i can't seem to get it to work with:

fd.control('SPDataTable1').ready().then(function(dt) {
    fd.control('SPDataTable1').buttons[2].visible = false
});

as mentioned above in some posts.

[Nikita_Kurguzov]

Dear @Dario_Chiga,
Please, share all the code that you have on the form and what exactly you want to achieve.

[Dario_Chiga]

This is the whole code i have in this form:

fd.spRendered(function() {

   fd.control('SPDataTable1').ready().then(function(dt){
        $(dt.$el).find('.btn dropdown-toggle btn-primary').hide();
        $(dt.$el).find('.btn btn-primary').hide();
        $(dt.$el).find('.btn btn-secondary').hide();
    });
}

and the result i want to have is, that these buttons do not appear anymore:

[Nikita_Kurguzov]

Dear @Dario_Chiga,
You can try it like this:

fd.spRendered(function() {
   fd.control('SPDataTable1').ready().then(function(dt){
        $(dt.$el).find('.btn.dropdown-toggle.btn-primary').hide();
        $(dt.$el).find('.btn.btn-primary').hide();
        $(dt.$el).find('.btn.btn-secondary').hide();
    });
});

[Dario_Chiga]

Okay i see where the error was. But now another Problem.

All the Buttons have disappeared.
When checking the code with F12 i see that both "New" buttons do have the same name. how can i work around this?

[Nikita_Kurguzov]

Dear @Dario_Chiga,
You can target specific buttons by index:

$($(dt.$el).find('.btn.btn-primary')[0]).hide();

[Dario_Chiga]

Perfect thank you very much. it worked.