Show value labels of SelectBoxEditor

[jjuliannnnnnnn (Julian Koch)]

Hi,

I’m currently building a template for newspages and I want to give them categories from a selectbox.

    NewsCategories:
      type: array
      ui:
        label: 'Categories'
        reloadIfChanged: true
        inspector:
          group: 'news'
          position: 20
          editor: 'Neos.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            allowEmpty: true
            placeholder: 'i18n'
            values:
              news:
                label: 'i18n'
              event:
                label: 'i18n'
              fair:
                label: 'i18n'
              interview:
                label: 'i18n'
              pressRelease:
                label: 'i18n'

Now I want to display the categories in the frontend using a loop like this:

<Neos.Fusion:Loop items={props.NewsCategories} itemName="categories">
    <span class="news-category">
        {categories}
    </span>
</Neos.Fusion:Loop>

This works fine, except that it only shows the values and I can’t get the labels.

Here’s what the array I’m working with looks like. The labels are not even in the array.

 'NewsCategories' (14) => array(3)
   integer 0 => 'event' (5)
   integer 1 => 'news' (4)
   integer 2 => 'interview' (9)

I found this answer to a similar question, but I have no experience with the “EEL translate helper”. Maybe someone can help me.

Label from SelectBoxEditor in main nodeType-label

So with your approach you would get “one” as label if that was selected, right? And you want “Name ONE” rather? If you used translation files (xliff) for the select labels you should be able to use the EEL translate helper in the NodeType label expression to fetch the appropriate translated label for the property value.

Or is there an easy way to get the labels?

[sebobo (Sebastian Helzle)]

You have to use the translation helper described here I18N: Translating Text in Fusion/Fluid - Rendering - Guide - Neos Docs

[jjuliannnnnnnn (Julian Koch)]

Thank you Sebastian,

I used the value for the ID of the trans-unit. Now I get the right labels.

#NewsFields.fusion
<Neos.Fusion:Loop items={props.NewsCategories} itemName="categories">
    <span class="news-category">
        {I18n.translate('translation.categorie.' + categories, categories, [], 'NodeTypes.Document.NewsPage', 'WG.BaseSite')}
    </span>
</Neos.Fusion:Loop>

#NewsPage.xlf
<trans-unit id="translation.categorie.news">
    <source>News</source>
</trans-unit>
<trans-unit id="translation.categorie.event">
    <source>Event</source>
</trans-unit>
<trans-unit id="translation.categorie.fair">
    <source>Fair</source>
</trans-unit>
<trans-unit id="translation.categorie.interview">
    <source>Interview</source>
</trans-unit>
<trans-unit id="translation.categorie.pressRelease">
    <source>Press Release</source>
</trans-unit>