JavaScript API Tutorials

// 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>