Tabrez Blog

For doing this the code is little tricky...

Let's see this in Action:

First Open SharePoint Designer 2013, Open your Site --> enter credentials

Choose All Files from the Left Tab, Then Open SiteAssets Folder, after that Choose a HTML file.

Give rename to your File: 

Enter Following Code in it:

<div>
<p id="message">
initializing...
</p>
</div>

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
(function () {

jQuery(function () {
ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");
});

function initializePage() {
var call = jQuery.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Webs?$select=Id,Title&$filter=(Title eq 'SharePointApp1')",                // Give name of your App to get it's resources
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data, textStatus, jqXHR) {
if (data.d.results.length > 0) {
var webInfo = data.d.results[0];

var context = SP.ClientContext.get_current();
var site = context.get_site();
var web = site.openWebById(webInfo.Id);
context.load(web);
context.executeQueryAsync(success, fail);

function success() {
var rootFolder = web.get_rootFolder();
var folders = rootFolder.get_folders();
var myFolders = context.loadQuery(folders, "Include(Name, Files)");
context.executeQueryAsync(success2, fail);

function success2() {
var message = jQuery("#message");
message.text("");
jQuery.each(myFolders, function (index, value) {
showFiles(message, value);
});
}
}

function fail(sender, args) {
alert("Call failed. Error: " +
args.get_message());
}
}
});
call.fail(failHandler);
}

function showFiles(message, folder) {
var fenum = folder.get_files().getEnumerator();
var i = 0;
while (fenum.moveNext()) {
i += 1;
if (i == 1) {
message.append(folder.get_name() + ":");
}

var name = fenum.get_current().get_name();
message.append("<div style='padding-left:10px'>" + name + "</div>");
}
if (i > 0) {
message.append("<br/>");
}
}

})();

</script>

Download this code: AppWebFromHostWeb.html (2.45 kb)

$filter=(Title eq 'SharePointApp1')", this filter is very important because it returns all the child sites so filter by the Name of the App...

Now create a Web Part page named: Test in Site Pages folder:

Open this WebPart page:

Put the page in Edit Mode and Add a Content Editor Web part in this page:

Edit Content Editor Web Part: Give the link for your HTML file:

Save the Page and you will see the output as shown below:

Voila! Enjoy SharePoint......