How do you show a widget content of a piece in a page's index?

Question

I'm struggling with showing some content on Apsotrophe CMS.

I am using apostrophe-pieces to create a description field:

{
  name: 'description',
  label: 'Description',
  type: 'singleton',
  widgetType: 'apostrophe-rich-text',
  options: {
    toolbar: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
  }
}

I would like it to show up in the index.html view of a custom page.

However, using {{ apos.singleton(data.piece, 'description', 'apostrophe-rich-text') }} brings up an error and it's unable to render the page. It only works in show.html

In /lib/modules/basics-pages/views/index.html, my code is:

{% extends "apostrophe-pages:outerLayoutBase.html" %}

{% block content %}
  <div class="basics-grid">
    {% for piece in data.pieces %}
      <article>
        <h4>{{ piece.title }}</h4>
        {% set image = apos.images.first(piece.icon) %}
        {% if image %}
          <img src="{{ apos.attachments.url(image, { size: 'one-sixth' }) }}" />
        {% endif %}
        <div class="desc">
        {{ apos.singleton(data.piece, 'description', 'apostrophe-rich-text') }}
        </div>
      </article>
    {% endfor %}
  </div>
{% endblock %}

Could someone help me with the correct code to use to show the contents of the singleton widget?

Answer 1

As you may know I'm the lead developer of Apostrophe at P'unk Avenue.

This code:

{% for piece in data.pieces %}

Indicates you have a loop variable called piece. That's what you want.

This code:

{{ apos.singleton(data.piece, 'description', 'apostrophe-rich-text') }}

Looks for piece as a property of data and ignores your loop variable.

Remove the data. and you should be good to go.

You'll want to add:

{{ apos.singleton(piece, 'description', 'apostrophe-rich-text', { edit: false }) }}

To avoid inline editing on the index page which would be more confusing than useful.