Skip to main content
Home  › ... Razor

JavaScript API Tutorials

Tutorial Home › JavaScript
Create data, update and delete using JS APIs
#5 Create Metadata using JS APIs
Execute JavaScript with turnOn
Requirements
Resources
Related

Use the sxc data API to create metadata

This page uses the sxc data API to create metadata in the backend.


In this tutorial you'll learn how to:
  • Create metadata for other entities using the javascript .create(..., ...) method
  • Delete existing items (so the demo doesn't grow uncontrollably) using the .delete(...) method

Look at the content below to see the effect.
Name Memberships
Gale Hansen 225969 delete
Gerard Pitts 7892345 delete
Todd Anderson
Richard Cameron 7922348 delete
Daniel

Source Code of 310-create-metadata.js

// Use an IFFE to ensure the variables are not exposed globaly
// See https://developer.mozilla.org/en-US/docs/Glossary/IIFE
(() => {
  let deadPoetMembersSvc;

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

    // Create the Service for the DeadPoetSocietyMembership Data
    deadPoetMembersSvc = sxc.data('DeadPoetSocietyMembership');
  }

  function add(poetGuid) {
    // Create a random membership number
    const randomMemberId = Math.floor(Math.random() * 999999).toString();

    // Create data in the backend with .create(object, target) and reload page after
    deadPoetMembersSvc.create({ MembershipNumber: randomMemberId }, poetGuid)
      .then(() => {
        alert('Just created new metadata for ' + poetGuid + `. We pretend he's member ${randomMemberId}. Will reload the page now.`);
        location.reload();
      });
  }

  function del(id) {
    if (confirm("Delete this membership?"))
      deadPoetMembersSvc.delete(id).then(() => {
        alert(`Just deleted ${id}. Will reload page now.`);
        location.reload();
      });
  }

  // This tutorial uses turnOn, see turnOn tutorials
  const sDT = window.sxcDataTutorial240 = window.sxcDataTutorial240 || {};
  sDT.init = sDT.init || init;
  sDT.add = sDT.add || add;
  sDT.del = sDT.del || del;
})();
 <table id="example-content" class="table">
   <thead>
     <tr>
       <th>Name</th>
       <th>Memberships</th>
       <th></th>
     </tr>
   </thead>
   <tbody>
     @foreach (var poet in AsList(App.Data["Poets"])) {
       var membershipMd = AsList(poet.Metadata.OfType("DeadPoetSocietyMembership") as object);
       <tr>
         <td>@poet.Name</td>
         <td>
           @if (membershipMd.Any()) {
             foreach (var membership in membershipMd) {
               <span>
                 @membership.MembershipNumber
                 <a href="#" onclick="window.sxcDataTutorial240.del(@membership.EntityId)">delete</a>
               </span>
             }
           } else {
             <button type="button" class="btn btn-primary" onclick='window.sxcDataTutorial240.add("@poet.EntityGuid")'>
               add membership (metadata)
             </button>
           }
         </td>
       </tr>
     }
   </tbody>
 </table>

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


 <script src="@CmsContext.View.Path/310-create-metadata.js" @Kit.Page.AssetAttributes()></script>
Create data, update and delete using JS APIs
#5 Create Metadata using JS APIs
Execute JavaScript with turnOn

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;
@using System.Linq;
@{
  // 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 data API to create metadata</h2>
      <p>This page uses the sxc data API to create metadata in the backend.</p>
      <br>
      In this tutorial you'll learn how to:
      <ul>
        <li>
          Create metadata for other entities using the javascript <code>.create(..., ...)</code> method
        </li>
        <li>
          Delete existing items (so the demo doesn't grow uncontrollably) 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">
    <thead>
      <tr>
        <th>Name</th>
        <th>Memberships</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      @foreach (var poet in AsList(App.Data["Poets"])) {
        var membershipMd = AsList(poet.Metadata.OfType("DeadPoetSocietyMembership") as object);
        <tr>
          <td>@poet.Name</td>
          <td>
            @if (membershipMd.Any()) {
              foreach (var membership in membershipMd) {
                <span>
                  @membership.MembershipNumber
                  <a href="#" onclick="window.sxcDataTutorial240.del(@membership.EntityId)">delete</a>
                </span>
              }
            } else {
              <button type="button" class="btn btn-primary" onclick='window.sxcDataTutorial240.add("@poet.EntityGuid")'>
                add membership (metadata)
              </button>
            }
          </td>
        </tr>
      }
    </tbody>
  </table>

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


  <script src="@CmsContext.View.Path/310-create-metadata.js" @Kit.Page.AssetAttributes()></script>



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })