examples/template.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>CKAN Embed template test</title>

    <!-- Load the widget bundle -->
    <script src="../dist/ckan-embed.bundle.js"></script>

    <!-- Some example styles -->
    <link rel="stylesheet" href="style.css">

    <style type="text/css">
    table.ckan-embed thead td { text-align: center; font-weight: bold; font-style: italic; }
    table.ckan-embed thead td, tr.ckan-dataset th, tr.ckan-dataset td { border-bottom: 1px dashed #aaa; padding:5px 0px; vertical-align: top; }
    </style>

  </head>
  <body>
    <h1>CKAN Embed template test</h1>
    <p>
      For more information visit the
      <a href="https://handbook.opendata.swiss/de/content/glossar/bibliothek/embed.html">Handbook documentation</a> and
      <a href="https://github.com/opendata-swiss/ckan-embed">GitHub project</a>.
    </p>
    <p>&lt; Back to <a href="index.html">basic tests</a>.</p>

    <h2>Search datasets from the National Library</h2>

    <h3>5 results with table template</h3>
    <hr>

    <table class="ckan-embed opendata-swiss">
      <thead><tr>
        <td>Name</td>
        <td>Description</td>
        <td>Formats</td>
      </tr></thead>
      <tbody id="example-1"></tbody>
    </table>

    <script>
    CKANembed.search('#example-1', 'https://opendata.swiss/', {
      fq:       'organization:schweizerische-nationalbibliothek-nb',
      rows:     5,
      noresult: 'Sorry, nothing found',
      template:
        '<tr class="ckan-dataset"><th>' +
        '<a href="<%= ds.url %>">' +
        '<h4><%= ds.title %></h4>' +
        '</a></th>' +
        '<td class="dsc"><%= CKANembed.truncate(ds.description, 250) %></td>' +
        '<td class="fmt"><%= ds.formats.toUpperCase() %></td>' +
        //'<small><%= ds.modified %></small>' +
        '</tr>'
    });
    </script>

    <h3>3 results with a custom template</h3>
    <hr>

    <div class="ckan-embed opendata-swiss" id="example-2"></div>

    <script>
    CKANembed.search('#example-2', 'https://opendata.swiss/', {
      fq:       'organization:schweizerische-nationalbibliothek-nb',
      rows:     3,
      noresult: 'Sorry, nothing found',
      template:
        '<div class="ckan-dataset">' +
        '<a href="<%= ds.url %>">' +
        '<h4><%= ds.title %></h4>' +
        '</a>' +
        '<p><%= CKANembed.truncate(ds.description, 250) %></p>' +
        '<em>Formats:</em> <small><%= ds.formats.toUpperCase() %></small>' +
        //'<small><%= ds.modified %></small>' +
        '</div>'
    });
    </script>
  </body>
</html>