CamlQuery Retrieve Folder and files from specific folder - sharepoint-2013

Question

Hi I'm working with sharepoint designer 2013 and I have this structure for document library webpart:
Folder1
SubFolder1
SubFile1.txt SubFile2.txt
File1.txt
I managed to target the Folder1, but it displays everything, SubFolder1, Subfile1.txt, Subfile2.txt and File1.txt at the same level. But what I want is SubFolder1 and File1.txt. And then if we click on SubFolder1 we have the files inside.
Something like this
what I did :
<Query><Where><Contains><FieldRef Name="FileDirRef"/><Value Type="Text">pathOfFolder1</Value></Contains></Where></Query>
I set the scope to recursiveAll, and I tried also "All" but it didn't work.

Answer 1

The example below for your reference:
<style>
input[type=button] {
background: #ccc;
border: 0 none;
cursor: pointer;
-webkit-border-radius: 0px;
border-radius: 0px;
margin-left: 0px !important;
font-size: small;
font-weight: bold;
}
.dupHier img {
padding-right: 10px;
}
.dupHier a {
position: relative;
top: -2px;
}
.dupHier {
padding-top: 5px;
padding-bottom: 5px;
}
</style>
<!--To Populate Libraries-->
<select id="drpSelectSourceLibrary"></select>
<!--To Populate Levels on click-->
<input class="getLevels" name="getLevels" type="button" value="Get Levels" onclick="return false;" />
<!--To Populate Hidden Levels-->
<div class="genHier"></div>
<hr />
<!--To Populate Hierarchy Visible on page-->
<div class="dupHenHier"></div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
//Site Context URL
var spctx = _spPageContextInfo.siteAbsoluteUrl;
//Array to Store all the objects
var hm = [];
//Object involving File/Folder name, path, level in hierarchy, whether it is file or folder
function hierMaker(name, path, level, isFile) {
this.name = name;
this.path = path;
this.level = level;
this.isFile = isFile;
}
var virtualLevel = 0;
var boolVirtual = true;
var maxLevel = 0;
function getLevels() {
//Reset global variables
hm.length = 0;
virtualLevel = 0;
boolVirtual = true;
maxLevel = 0;
tctr = 1;
$('.genHier').html("");
$('.dupHenHier').html("");
//Main code below
var appWebUrl = spctx;
var listName = $("#drpSelectSourceLibrary option:selected").text();
var certURL = appWebUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$expand=Folder,File&$select=ID,Title,FileLeafRef,Folder/ServerRelativeUrl,File/ServerRelativeUrl";
$.ajax({
url: certURL,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
getFolderSchema(data.d.results);
},
error: function (data) {
alert(JSON.stringify(data));
}
});
function getFolderSchema(data) {
maxLevel = 0;
dLength = data.length;
if (dLength >= 0) {
for (var i = 0; i < dLength; i++) {
if (boolVirtual) {
if (data[i].Folder.ServerRelativeUrl) {
virtualLevel = data[i].Folder.ServerRelativeUrl.split('/').length;
boolVirtual = false;
}
else {
virtualLevel = data[i].File.ServerRelativeUrl.split('/').length;
boolVirtual = false;
}
}
var isFile = false;
var path = "";
var level = 0;
if (data[i].Folder.ServerRelativeUrl) {
//It is folder
isFile = false;
path = data[i].Folder.ServerRelativeUrl;
level = data[i].Folder.ServerRelativeUrl.split('/').length - virtualLevel;
}
else {
//It is file
isFile = true;
path = data[i].File.ServerRelativeUrl;
level = data[i].File.ServerRelativeUrl.split('/').length - virtualLevel;
}
var tmpDiv = "<div class='subHier' isFile='" + isFile + "' level='" + level + "' path='" + path + "'><a href='" + path + "' target='_blank'>" + data[i].FileLeafRef + "</a></div>";
$(".genHier").append(tmpDiv);
maxLevel++;
var hmsc = new hierMaker(data[i].FileLeafRef, path, level, isFile);
hm.push(hmsc);
}
providePaddding();
}
}
}
var d = 1;
function providePaddding() {
var kickCtr = 0;
var hmlength = hm.length;
for (var j = 0; j < hmlength; j++) {
//Creation of level 0 elements
if (hm[j].level == 0) {
var tmpDiv = "";
if (hm[j].isFile) {
tmpDiv = "<div class='dupHier' isFile='" + hm[j].isFile + "' level='" + hm[j].level + "' path='" + hm[j].path + "'><img src='" + file + "' /><a href='" + hm[j].path + "' target='_blank'>" + hm[j].name + "</a></div>";
}
else {
tmpDiv = "<div class='dupHier' isFile='" + hm[j].isFile + "' level='" + hm[j].level + "' path='" + hm[j].path + "'><img src='" + folder + "' /><a href='" + hm[j].path + "' target='_blank'>" + hm[j].name + "</a></div>";
}
kickCtr++;
$('.dupHenHier').append(tmpDiv);
}
}
call();
}
var tctr = 1;
var folder = spctx + "/Style Library/folder.JPG";
var file = spctx + "/Style Library/file.JPG";
function call() {
$('.dupHier').each(function () {
if ($(this).attr('isDone')) {
//continue;
}
else {
for (var j = 0; j < hm.length; j++) {
if (hm[j].level == tctr) {
var str = hm[j].path + "";
var ts = $(this).attr('path');
var tmpDiv = "";
if (str.indexOf(ts) > -1) {
if (hm[j].isFile) {
tmpDiv = "<div class='dupHier' isFile='" + hm[j].isFile + "' level='" + hm[j].level + "' path='" + hm[j].path + "'><img src='" + file + "'/><a href='" + hm[j].path + "' target='_blank'>" + hm[j].name + "</a></div>";
}
else {
tmpDiv = "<div class='dupHier' isFile='" + hm[j].isFile + "' level='" + hm[j].level + "' path='" + hm[j].path + "'><img src='" + folder + "'/><a href='" + hm[j].path + "' target='_blank'>" + hm[j].name + "</a></div>";
}
$(this).append(tmpDiv);
}
}
}
}
$(this).attr('isDone', true);
});
tctr++;
if (tctr < 10)
call();
//Provide padding as per level, level * 10px
$('.dupHier').each(function () {
var tmpPad = $(this).attr('level') * 10 + "px";
$(this).css({ "padding-left": tmpPad });
});
}
$(document).ready(function () {
$('.getLevels').click(function () {
getLevels();
});
$('.genHier').hide();
});
//Population of libraries
ExecuteOrDelayUntilScriptLoaded(loadDocLibraries, "SP.js");
function loadDocLibraries() {
var clientContext = new SP.ClientContext.get_current();
web = clientContext.get_web();
clientContext.load(web);
listColl = web.get_lists();
clientContext.load(listColl);
clientContext.executeQueryAsync(onLibSuccess, onLibfail);
}
function onLibSuccess() {
var listEnumerator = listColl.getEnumerator();
var Lib = "";
$('#drpSelectSourceLibrary').empty();
$("#drpSelectSourceLibrary").prepend('<option value="Select" selected="selected">Select Documents Library</option>');
while (listEnumerator.moveNext()) {
var list = listEnumerator.get_current();
var value = list.get_hidden();
//console.log(value);
if (list.get_baseTemplate() == '101') {
if (value == false) {
var x = document.getElementById("drpSelectSourceLibrary");
var option = document.createElement("option");
var filename = list.get_title();
option.text = filename;
x.add(option);
}
}
}
}
function onLibfail() {
console.log(arguments[1].get_message());
}
</script>
Refer to: http://www.sharepointjunkies.com/unlimited-files-folders-hierarchy-sharepoint-online-using-rest-api/