Oqtane Tutorials
Oqtane Tutorials

JavaScript API Tutorials

Tutorial Home › JavaScript
Add Parameters to Query from the Backend using JS
#4 Create data, update and delete using JS APIs
Create Metadata using JS APIs
Requirements
Resources
Related

Use the sxc data API to create/edit/delete data

This page uses the sxc data API to create data for the backend.


In this tutorial you'll learn how to:
  • Create data using the .create(...) method
  • Update data using the .update(...) method
  • Delete data using the .delete(...) method

Look at the content below to see the effect.
Name Birth date Poems Actions
SuperPoet 426 1/1/2021 15
SuperPoet 602 1/1/2021 23
SuperPoet 31 1/1/2021 97
SuperPoet 314 1/1/2021 150

Source Code of 300-edit.js

// This tutorial uses turnOn, see turnOn tutorials
// As soon as this variable exists, the page will start the code thanks to turnOn
window.editPoets = {
  poetsSvc: null,

  init: function({ moduleId }) {
    // Create a $2sxc object using the current Module Id
    const sxc = $2sxc(moduleId);

    // Get the data Service - type PoetsToEdit has public create/delete permissions
    poetsSvc = sxc.data('PoetsToEdit');
  },

  add: function() {
    const newPoet = {
      name: document.querySelector('#name').value,
      birthdate: document.querySelector('#birthdate').value,
      poems: document.querySelector('#poems').value
    };

    // Create data in the backend with .create(object) and reload page after
    poetsSvc.create(newPoet).then(() => { alert('created poet, will reload'); location.reload(); });
  },

  delete: function(id) {
    // Delete data in the backend with .delete()
    poetsSvc.delete(id).then(() => { alert('deleted poet, will reload'); location.reload(); });
  },


  updateCount: function(id) {
    // NOTE: Updated object doesn't need to contain all properties 
    const updatedPoet = {
      Poems: Math.floor(Math.random() * 100).toString()
    };

    // Update data in the backend with .update()
    poetsSvc.update(id, updatedPoet)
      // After backend update, show the new number which the backend returned
      .then(res => {
        document.querySelector(`[data-poet='${id}']`).innerText = res.Poems
      });
  }
}
 <table id="example-content" class="table">
   Name Birth date Poems Actions
   <tbody>
     @foreach (var poet in AsList(App.Data["PoetsToEdit"])) {
       <tr>
         <td>@poet.Name</td>
         <td>@poet.BirthDate.ToShortDateString()</td>
         <td data-poet="@poet.EntityId">@poet.Poems</td>
         <td>
           <button type="button" class="btn btn-primary" onclick="window.editPoets.updateCount(@poet.EntityId)">Update Poems</button>
           <button type="button" class="btn btn-primary" onclick="window.editPoets.delete(@poet.EntityId)">Delete Poet</button>
         </td>
       </tr>
     }
   </tbody>
 </table>

 <div class="row">
   <div class="col-md-3">
     <input id="name" class="form-control" placeholder="Name" value="@randomName">
   </div>
   <div class="col-md-3">
     <input type="date" id="birthdate" class="form-control" min="1938-01-01" max="1949-01-01" placeholder="Birthdate" value="2021-01-01">
   </div>
   <div class="col-md-3">
     <input type="number" id="poems" min="0" class="form-control" placeholder="Poems" value="@(new Random().Next(999))">
   </div>
   <button type="button" class="btn btn-primary" onclick="window.editPoets.add()" >Add poet</button>
 </div>

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


 <script src="@CmsContext.View.Path/300-edit.js"></script>
Add Parameters to Query from the Backend using JS
#4 Create data, update and delete using JS APIs
Create Metadata using JS APIs

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@using ToSic.Razor.Blade;
@inherits Custom.Hybrid.Razor14
@{
  // Tell the page that we need the 2sxc Js APIs
  Kit.Page.Activate("2sxc.JsCore"); 
  var randomName = "SuperPoet " + new Random().Next(1000);
}
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2>Use the sxc data API to create/edit/delete data</h2>
      <p>This page uses the sxc data API to create data for the backend.</p>
      <br>
      In this tutorial you'll learn how to:
      <ul>
        <li>Create data using the <code>.create(...)</code> method</li>
        <li>Update data using the <code>.update(...)</code> method</li>
        <li>Delete data using the <code>.delete(...)</code> method</li>
      </ul>
      <br>
      Look at the content below to see the effect.
    </div>
  </div>

  <table id="example-content" class="table">
    Name Birth date Poems Actions
    <tbody>
      @foreach (var poet in AsList(App.Data["PoetsToEdit"])) {
        <tr>
          <td>@poet.Name</td>
          <td>@poet.BirthDate.ToShortDateString()</td>
          <td data-poet="@poet.EntityId">@poet.Poems</td>
          <td>
            <button type="button" class="btn btn-primary" onclick="window.editPoets.updateCount(@poet.EntityId)">Update Poems</button>
            <button type="button" class="btn btn-primary" onclick="window.editPoets.delete(@poet.EntityId)">Delete Poet</button>
          </td>
        </tr>
      }
    </tbody>
  </table>

  <div class="row">
    <div class="col-md-3">
      <input id="name" class="form-control" placeholder="Name" value="@randomName">
    </div>
    <div class="col-md-3">
      <input type="date" id="birthdate" class="form-control" min="1938-01-01" max="1949-01-01" placeholder="Birthdate" value="2021-01-01">
    </div>
    <div class="col-md-3">
      <input type="number" id="poems" min="0" class="form-control" placeholder="Poems" value="@(new Random().Next(999))">
    </div>
    <button type="button" class="btn btn-primary" onclick="window.editPoets.add()" >Add poet</button>
  </div>

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


  <script src="@CmsContext.View.Path/300-edit.js"></script>



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })
An error has occurred. This application may no longer respond until reloaded. Reload 🗙