Skip to main content
Home  › ... 2sxc Apps › 2sxc Tutorial

JavaScript API Tutorials

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

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.
Requirements
Resources
Related
Name Birth date Poems Actions
Daniel 1/1/1949 74
SuperPoet 814 1/1/2021 90
SuperPoet 426 1/1/2021 979
SuperPoet 602 1/1/2021 38
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 

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
@{
  // Tell the page that we need the 2sxc Js APIs
  Kit.Page.Activate("2sxc.JsCore"); 
}
<!-- unimportant stuff, hidden -->
Use the sxc data API to create/edit... <!-- unimportant stuff, hidden -->

<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 https://app-dev.2sxc.org/tutorial-razor/en-bs4/Home/turn-on/home *@
@{ Kit.Page.Activate("turnOn"); }
<turnOn turn-on='{ "run": "window.editPoets.init()", "data": { "moduleId": "@CmsContext.Module.Id" } }'></turnOn>
<script src="@App.Path/js/_300-edit.js"></script>

<!-- unimportant stuff, hidden -->

Source Code of _300-edit.js

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 

// This tutorial uses turnOn, see https://app-dev.2sxc.org/tutorial-razor/en-bs4/Home/turn-on/home
// 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
      });
  }
}