apostrophe cms - how to add/display an array in widget.html

Question

i'm new in apostophy cms and i got stuck on an array in the widget.html It's in the div with the class c-podcast__footer-streaming.

This is my widget (index.js):

module.exports = {
extend: 'apostrophe-widgets',
label: 'Musicstream',
addFields: [
    {
        name: 'preheadline',
        type: 'string',
        label: 'Preheadline',
        required: true
    },
    {
        name: 'title',
        type: 'string',
        label: 'Title',
        required: true
    },
    {
        name: 'cover',
        type: 'singleton',
        label: 'Cover',
        widgetType: 'apostrophe-images',
        required: true
    },
    {
        name: 'button',
        type: 'string',
        label: 'Button',
        def: 'Abonnieren'
    },
    {
        name: 'buttonlink',
        type: 'string',
        label: 'Button Link',
        def: 'https://www.handelsblatt.com'
    },
    {
        name: 'more',
        type: 'string',
        label: 'More',
        def: 'https://www.handelsblatt.com/audio/'
    },
    {
        name: 'streamingsource',
        label: 'Streaming Dienst',
        type: 'array',
        schema: [
            {
                name: 'name',
                type: 'string',
                label: 'Name'
            },
            {
                name: 'icon',
                type: 'singleton',
                label: 'Icon',
                widgetType: 'apostrophe-images',
                required: true
            },
            {
                name: 'streamlink',
                type: 'string',
                label: 'Stream Link',
                required: true
            }
        ]
    }
]

};

and this is how i tried to include it in my wiget template views/widget.html:

<div class="c-podcast">
<div class="c-podcast__header clearfix">
    <button class="c-podcast__header-play"></button>
    <div class="c-podcast__header-text">
        <span>{{ data.widget.preheadline }}</span>
        <h2>{{ data.widget.title }}</h2>
    </div>
    {{ apos.singleton (data.widget, 'cover', 'apostrophe-images') }}
</div>
<div class="c-podcast__player">
    <div class="c-podcast__player-scrollbar"></div>
    <span class="c-podcast__player-position"></span>
    <span class="c-podcast__player-time">-04:38</span>
</div>
<div class="c-podcast__footer clearfix">
    <button class="c-podcast__footer-cta" type="button">{{ data.widget.button }}</button>
    <div class="c-podcast__footer-streaming">
    {{ apos.area (data.widget, 'apostrophe-schemas', { 

        streamingsource: { 

            name: {},
            icon: {},
            streamlink: {}
         }
         })
     }}
    </div>
    <a class="c-podcast__footer-more" href="{{ data.widget.more }}">Alle Episoden ›</a> 
</div>

But the only thing i get is an empty div: <div class="apos-area" data-apos-area="" data-doc-id=""></div>

Could someone help me please? :) thanks a lot, magvector

Stuart Romanek · Answer 1 · 2019-03-10T21:49:16.793

1

[Edit for the clarified question]

Instead of trying to display the array data through the singleton function, just iterate over the array and output what you want into the template.

In views/widget.html

{% for icon in data.widget.streamingsource %}
  The icon name: {{ icon.name }}
  The image: {{ apos.singleton(icon, 'icon', 'apostrophe-images') }}
  streamlink: {{ icon.streamlink }}
{% endfor %}

edited Mar 10 '19 at 21:49

answered Mar 10 '19 at 13:30

Stuart Romanek

2,157
1
7
9

hi! thank you for your answer. But i think, we speak both about two different things. I have created a widget, wich has some fields: strings and singletons. One of the fields should be an array wich is putting out icons with links. This array does work in the apostrophe cms backend but it does not provide data in the browser view of the site. – magvector Mar 10 '19 at 15:50
Thank you very much! This is it! :) – magvector Mar 11 '19 at 15:56
Great! If you could mark this question as answered that'd be swell – Stuart Romanek Mar 12 '19 at 01:54

apostrophe cms - how to add/display an array in widget.html

1 Answers1