Skip to main content
Home  › ... Razor

JavaScript Tutorial

Tutorial HomeJavaScript
The samples can differ based on your Razor base class or if you're running an old version.
Switch to Typed (2sxc 16+) Selected: Dynamic (Razor14 or below)

Use the 2sxc JS API to get Data

This page uses the sxc data API to get data from the backend and display it in a table with JavaScript.

In this tutorial you'll learn how to:

  • Create a $2sxc object using the current Module Id
  • Use the correct data source using .data()
  • Read data using the .getOne(id) query method
  • Read data using the .getAll() query method

Look at the content below to see the effect.

Name Birthdate Poems
@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

@* Make sure anonymous users have the 2sxc JS API *@
@Kit.Page.Activate("2sxc.JsCore")

<table id="example-content" class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Birthdate</th>
      <th>Poems</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

@* This tutorial uses turnOn, see turnOn tutorials *@
@Kit.Page.TurnOn("window.sxcDataTutorial200.init()", data: new {
  moduleId = CmsContext.Module.Id
})

<script src="@App.Path/tutorials/js-data/js/get-data.js" @Kit.Page.AssetAttributes()></script>

Source Code of get-data.js

// Use an IFFE to ensure the variables are not exposed globaly
// See https://developer.mozilla.org/en-US/docs/Glossary/IIFE
(() => {
  // This is a more modern JS feature to deconstruct parameters
  // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  function init({ moduleId }) {
    // Create a $2sxc object using the current Module Id
    const sxc = $2sxc(moduleId);

    // Get the data source using .data('xy')
    const poetsSvc = sxc.data('Poets');

    // Read data from the backend data source with the .getAll() query
    poetsSvc.getAll().then((poets) => {
      // pass poets to displayPoets
      displayPoets(poets);

      // Get data of first poet with .getOne(id) query and log it in the console
      poetsSvc.getOne(poets[0].Id).then((poet) => console.log(`Queried poet using .getOne(): ${poet}`));
    });
  }

  // Display example data in table
  function displayPoets(poets) {
    Array.prototype.forEach.call(poets.reverse(), (poet, poetIndex) => {
      // Make sure only 3 elements are shown
      if (poetIndex >= 3) return
      
      let tr = document.createElement('tr')
      
      addField(tr, poet.Name);
      addField(tr, new Date(poet.BirthDate).toLocaleDateString());
      addField(tr, poet.Poems);

      document.querySelector('#example-content > tbody').appendChild(tr)
    });
  }

  function addField(tr, text) {
    let td = document.createElement('td')
    td.innerText = text
    tr.appendChild(td)
  }

  // This tutorial uses turnOn, see turnOn tutorials
  const sDT = window.sxcDataTutorial200 = window.sxcDataTutorial200 || {};
  sDT.init = sDT.init || init;
})();

This page uses the sxc data API to get data from the backend and display it in a table with JavaScript.
In this tutorial you'll learn how to:

  • Create a $2sxc object using the current Module Id
  • Create a Query service using the .query(...).
  • Read data using getAll(), getStream(...) and getStreams(...)

Note that this sample will run the query RandomAuthorWithBooks. There are some things which you should know:

  1. The Query has permissions configured to allow viewers to use the query in JS.
  2. Each call returns a random author with his books, so sometimes the books-list may be empty

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

@* Make sure anonymous users have the 2sxc JS API *@
@Kit.Page.Activate("2sxc.JsCore")

<button id="[email protected]" type="button" class="btn btn-primary">Get entire Query</button>
<button id="[email protected]" type="button" class="btn btn-primary">Get Stream <code>Author</code></button>
<button id="[email protected]" type="button" class="btn btn-primary">Get Streams <code>Author</code> and <code>Books</code></button>

@* This tutorial uses turnOn, see turnOn tutorials *@
@Kit.Page.TurnOn("window.tutQuery.init()", data: new {
  moduleId = CmsContext.Module.Id
})

<script src="@App.Path/tutorials/js-data/js/query.js"></script>

Source Code of 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));
    });
  },
}

This page uses the sxc data API to query data from the backend using parameters and display it in a table with JavaScript.
In this tutorial you'll learn how to:

  • Create a $2sxc object using the current Module Id
  • Create a Query service using the .query(...).
  • Add Parameters to the .getAll(...), .getStream(...) and .getStreams(...) query methods through object or string

Note that this sample will run the query AuthorsWithBooks.

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade

@* Make sure anonymous users have the 2sxc JS API *@
@Kit.Page.Activate("2sxc.JsCore")
@{ var btnPrefix = "mod-" + CmsContext.Module.Id; }

<button id="@btnPrefix-object" type="button" class="btn btn-primary">
  Get Query with parameters (object)
</button>
<button id="@btnPrefix-string" type="button" class="btn btn-primary">
  Get Query with parameters (string)
</button>
<button id="@btnPrefix-stream-params" type="button" class="btn btn-primary">
  Get Query Stream with parameters
</button>
<button id="@btnPrefix-streams-params" type="button" class="btn btn-primary">
  Get Query Streams with parameters
</button>

@* This tutorial uses turnOn, see turnOn tutorials *@
@{
  var demoAuthorId = Data["RandomAuthor"].List.FirstOrDefault().EntityId;
  var data = new {
    moduleId = CmsContext.Module.Id,
    demoAuthorId = demoAuthorId,
  };
}

@Kit.Page.TurnOn("window.tutQueryParameters.init()", data: data)

<script src="@App.Path/tutorials/js-data/js/query-parameters.js"></script>

Source Code of query-parameters.js

window.tutQueryParameters = {
  querySvc: null,
  demoAuthorId: 0,
  init: function({ moduleId, demoAuthorId }) {
    // Create a $2sxc object using the current Module Id
    const sxc = $2sxc(moduleId);
    this.querySvc = sxc.query('AuthorsWithBooks');
    this.demoAuthorId = demoAuthorId;

    // Attach click-handlers to button
    document.getElementById(`mod-${moduleId}-object`).onclick = () => this.queryWithObjectParams();
    document.getElementById(`mod-${moduleId}-string`).onclick = () => this.queryWithStringParams();
    document.getElementById(`mod-${moduleId}-stream-params`).onclick = () => this.queryStreamWithParams();
    document.getElementById(`mod-${moduleId}-streams-params`).onclick = () => this.queryStreamsWithParams();
  },

  queryWithObjectParams: function() {
    const queryParameters = {
      authorId: this.demoAuthorId,
      authorPageResults: 2,
      currentAuthorPage: 1
    };

    this.querySvc.getAll(queryParameters).then(data => {
      console.log("Get query with passing url parameters as object", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  },

  queryWithStringParams: function() {
    // For passing parameters as a string it's important to use the default query string structure (key=value seperated by a &)
    // See: https://en.wikipedia.org/wiki/Query_string#Structure
    const stringWithParameters = `authorId=${this.demoAuthorId}&authorPageResults=2&currentAuthorPage=1`;

    this.querySvc.getAll(stringWithParameters).then(data => {
      console.log("Get query with passing url parameters as string", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  },

  queryStreamWithParams: function() {
    const queryParameters = {
      authorId: this.demoAuthorId
    };

    this.querySvc.getStream('Current', queryParameters).then(data => {
      console.log("Get Query stream with passing url parameter", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  },

  queryStreamsWithParams: function() {
    const queryParameters = {
      authorId: this.demoAuthorId,
      authorPageResults: 2,
      currentAuthorPage: 1
    };

    this.querySvc.getStreams('Current,AuthorsByPage', queryParameters).then(data => {
      console.log("Get query streams with passing url parameter", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  }
}

View Configuration

This is how this view would be configured for this sample.

  • Query: AuthorsWithBooks
Details for Query: AuthorsWithBooks