Use cases

Here is the code that is being used on the https://ogd.tg.ch/datenkatalog.html/6965 website. You can see several features here like a custom template and advanced search options, which are a good example for using the widget to create a mini portal with navigation and detailed information from the API.

<div data-group="geography" class="opendata-swiss" id="ckanEmbed">Wird geladen ...</div>


<!-- START -- CKAN Embed code -- For information see https://github.com/opendata-swiss/ckan-embed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" integrity="sha256-G7A4JrJjJlFqP0yamznwPjAApIKPkadeHfyIwiaa9e0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckan/0.2.3/ckan.min.js" integrity="sha256-BKyJi3KcJSyBja7wahblrkQybuB0p6WjoXqOUaR2Ftc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/opendata-swiss/[email protected]/dist/ckan-embed.min.js"></script>
<script>
function embedGroup(group) {
  ck.datasets('#ckanEmbed', 'https://opendata.swiss/de/', {
    fq:       'organization:kanton-thurgau groups:' + group,
    rows:     20,
    sort:     'title_string_de asc',
    noresult: 'Keine Daten gefunden',
    template: _.template(
      '<div class="ckan-dataset">' +
      '<a href="<%= ds.url %>" target="_blank">' +
      '<h4><%= ds.title %></h4>' +
      '</a>' +
      '<p><%= ck.truncate(ds.description, 250) %></p>' +
      '<small class="ckan-fmt"><%= ds.formats.toUpperCase() %></small><br>' +
      '<small class="ckan-fmt-nm"><%= ds.zeitliche_abdeckung %></small> ' +
      '</div>'
    )
  });
}
$('#ckanEmbed').each(function(e) { embedGroup($(this).attr('data-group')) });
</script>
<style>
  ul { list-style-type: none; margin-bottom: 0px; padding-bottom: 0px; }
  #groupSelector li::before { display: none; }
  #groupSelector li { font-weight: normal; list-style-type: none; display: inline-block; }
  #groupSelector li.active { font-weight: bold; list-style-type: none; }
  #ckanEmbed a::after { display: none; }
  #ckanEmbed {
    min-height: 200px;
    margin-top: 0px;
  }
  .ckan-dataset { margin-bottom: 1.0em; }
  .ckan-dataset h4 { border-bottom: 1px solid #C2D7C1; }
  .ckan-dataset small { color: #777; }
  .ckan-dataset p, .ckan-dataset h4 { margin-bottom: 0px; }
</style>
<!-- /END ckan-embed code -->