Output
<button id="mod-@CmsContext.Module.Id-load-all" type="button" class="btn btn-primary">Get entire Query</button>
<button id="mod-@CmsContext.Module.Id-author" type="button" class="btn btn-primary">Get Stream <code>Author</code></button>
<button id="mod-@CmsContext.Module.Id-streams" type="button" class="btn btn-primary">Get Streams <code>Author</code> and <code>Books</code></button>
@* This tutorial uses turnOn, see turnOn tutorials *@
@{
var data = new {
moduleId = CmsContext.Module.Id
};
}
@Kit.Page.TurnOn("window.tutQuery.init()", data: data)
<script src="@CmsContext.View.Path/220-query.js"></script>
Source Code of 220-query.js
window.tutQuery = {
querySvc: null,
init: function({ moduleId }) {
// Create a $2sxc object using the current Module Id
const sxc = $2sxc(moduleId);
this.querySvc = sxc.query('RandomAuthorWithBooks');
// Attach click-handlers to button
document.getElementById(`mod-${moduleId}-load-all`).onclick = () => this.getAll();
document.getElementById(`mod-${moduleId}-author`).onclick = () => this.getAuthor();
document.getElementById(`mod-${moduleId}-streams`).onclick = () => this.getStreams();
},
getAll: function() {
this.querySvc.getAll().then(data => {
console.log("Get All", data);
alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
});
},
getAuthor: function() {
this.querySvc.getStream('Author').then(data => {
console.log("Get Stream 'Author' only", data);
alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
});
},
getStreams: function() {
this.querySvc.getStreams('Author,Books').then(data => {
console.log("Get Streams 'Author' and 'Books'", data);
alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
});
},
}
@using ToSic.Razor.Blade;
@inherits Custom.Hybrid.Razor14
@{
// Tell the page that we need the 2sxc Js APIs
Kit.Page.Activate("2sxc.JsCore");
}
<!-- unimportant stuff, hidden -->
<div @Sys.PageParts.InfoWrapper()>
@Html.Partial("../shared/DefaultInfoSection.cshtml")
<div @Sys.PageParts.InfoIntro()>
<h2>Use the sxc <code>query(...)</code> API to get Queries in JS</h2>
<p>
This page uses the sxc data API to get data from the backend and display it in a table with JavaScript.
<br>
In this tutorial you'll learn how to:
</p>
<ul>
<li>
Create a $2sxc object using the current Module Id
</li>
<li>
Create a Query service using the <code>.query(...)</code>.
</li>
<li>
Read data using <code>getAll()</code>, <code>getStream(...)</code> and <code>getStreams(...)</code>
</li>
</ul>
<p>
Note that this sample will run the query <code>RandomAuthorWithBooks</code>. There are some things which you should know:
</p>
<ol>
<li>The Query has permissions configured to allow viewers to use the query in JS. </li>
<li>Each call returns a random author with his books, so sometimes the books-list may be empty</li>
</ol>
</div>
</div>
<button id="mod-@CmsContext.Module.Id-load-all" type="button" class="btn btn-primary">Get entire Query</button>
<button id="mod-@CmsContext.Module.Id-author" type="button" class="btn btn-primary">Get Stream <code>Author</code></button>
<button id="mod-@CmsContext.Module.Id-streams" type="button" class="btn btn-primary">Get Streams <code>Author</code> and <code>Books</code></button>
@* This tutorial uses turnOn, see turnOn tutorials *@
@{
var data = new {
moduleId = CmsContext.Module.Id
};
}
@Kit.Page.TurnOn("window.tutQuery.init()", data: data)
<script src="@CmsContext.View.Path/220-query.js"></script>
@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })