Filter Library Issue - Some documents are NOT visible after filtering

Hello all,

I've been trying to work out how to filter a Library control by a field only which in this case is Title field on Edit mode (Form). Before that, to put into context, I have created a List (for item creation) and a Library (for stored documents/files). When an item is created in List, it triggers the Automate to create its folder (by Title) based on Parent ID in the Library. Then, on Edit mode, I want to upload any document in any format and save it upon clicking Save button.

The issue now here, during Edit mode and at the initial state of Library, all created folders are visible and some additional files with different format (testing) are shown and visible as expected. When I try to search a specific folder item by Title via filtering in a Search function, it seems working as fine. But when the textfield (string) is EMPTY, it returns to the initial state but some documents are missing and not visible. Some uploaded files from existing folders are also not visible except files with .pptx format. This is what is confusing me. I'm not sure what I am missing in my code. I followed from the documentation and tweaked around a little bit. But it didn't produce the result that I wanted.

Here is a sample the code I used:

fd.spRendered(() => {
console.log('Rendered!');

// declare variable for library control.
var  dt = fd.control('SPDataTable1');

dt.ready().then(() => {
let  textValueOnReady02 = !fd.field('SearchFilter1').value;
console.log(textValueOnReady02);
dt.refresh();

// when Search field is empty, do nothing, else, filter item by Title.
if (textValueOnReady02) {
console.log("Search field [textValueOnReady] === empty");
} else {
console.log("Search field [textValueOnReady] === NOT empty");
filterDT();
}
});

// filter Shared Library with new value when Search field changes.
fd.field('SearchFilter1').$on('change', () => {
let  textValueOnChange02 = !fd.field('SearchFilter1').value;
console.log(textValueOnChange02);

if (textValueOnChange02) {
console.log("Search field [textValueOnChange] === empty");
dt.refresh();
} else {
console.log("Search field [textValueOnChange] === NOT empty");
filterDT();
}
});

const  filterDT = () => {
console.log("filterDT");
dt.filter = "<Contains><FieldRef Name='Title'/><Value Type='Text'>"
+ fd.field('SearchFilter1').value + "</Value></Contains>";
dt.refresh();
}
});

Attached screenshots are as follows:

  1. List

  2. Library (storing files)

  3. Item Test08 & its stored documents - before search/filter

  4. Item Test09 - before search/filter

  5. Item Test10 - before search/filter

  6. Library content before search/filter at initial state

  7. Library content changed after filtering

  8. Library content - some files not shown when textfield is empty but .pptx files

  9. Item Test08 - files not visible

  10. Item Test09 - files not visible

  11. Item Test10 - only 1 is visible for .pptx file

So, can anyone please help me how do I work this out? What did I actually miss here.

  • How can I filter content in Library by Title field via Search function and make sure all format of files are visible upon filtering?
  • In my code, there's a if else statement. How can I return the content in Library as before when Search field is empty then display all documents or else filter it as it is?

Appreciate your guidance. Thanks.

@mhm_alpha68,

Let me clarify something before I answer your questions.

Do you want to allow users to upload files only to the folder with the corresponding name? For instance, when the test08 item is opened, users should be able to view and upload files to the test08 folder. Is that correct?

If so, you can set the root folder dynamically using the code. Find more information and teh code snippet here.

1 Like

Hi @mnikitina ,

Thanks for your response. Appreciated.

Yes, you're correct. That's what I wanted. On Edit mode, initially on first render, users can view all created folders with the corresponding names (which are in this case, created items in List - previous post) in Library and also all existing files stored in those folders. Then, they can filter the Library by searching a target folder, for example Test08. Then, they can upload files to the specific folder that they want.

The issue now here is, initially all existing files are there and visible before the search/filter happens. But then, when I search a folder name and click on it, the files which were there previously are gone and not visible for some reason. It only displays nothing but files with .pptx (ms powerpoint) format. Doc or jpeg or other document is not visible when filtering happens. Even if I search any or random files, the query filter somehow could not identify it and returns blank. The filter can only work for certain folders and .pptx file. Any idea why?

You can have a look screenshots below.

  1. Document items in Library before filter.

  2. Files stored in Test08 folder before filter.

  3. Search and filter item for Test08 folder.
    sc003

  4. Files disappeared in Test08 folder after search and filter.
    sc004

You suggested me to use the snippet code how to display documents from specific folder. I did try using that code but it didn't seem working. Files still are not showing and visible in the folder when filtering the Library.

I'm really not sure how does set the root folder dynamically can solve this issue. Because in the documentation doesn't show any example diagram how the output would look like using this code. I don't actually understand what does it actually do. All I did was I changed it where the Search field value is empty, then set empty value as root folder to return all original folders and files in Library as before. But still not working.

Can you suggest why did this happen? Do you understand the issue that I'm facing now?

Appreciate your advice. Thanks.

Hello @mhm_alpha68,

You need to clear the filter when the Search field value is blank. Please try out the code below.

fd.spRendered(function(){
    // declare variable for library control.
    var  dt = fd.control('SPDataTable1');

    dt.ready().then(filterDT)

    // filter Shared Library with new value when Search field changes.
    fd.field('SearchFilter1').$on('change', filterDT)

    function  filterDT() {
        var search = fd.field('SearchFilter1').value;
        if(search){
            var filter = "<Contains><FieldRef Name='Title'/><Value Type='Text'>" + search + "</Value></Contains>";
        }
        else {
            var filter = '';
        }

        dt.filter = filter;
        dt.refresh();
    }
});