I'd like to define a field in a component that would display a set of values that my contributors could choose when using my component. Let's say that my field is a ratio, I want the users to be able to choose between 1/3, 2/3 or 1/2.

Could I get help on what to do, so far my code is working with a CommonFieldTypes.SingleLineText but I'd like to know how to add my different values in the Sitecore interface. Here is my definition in the component for the field :

    { name: 'ratio', type: CommonFieldTypes.ContentList, source: `dataSource=/sitecore/content/${
      }/Selectors/RatioSelector` }

I've set in my data yml file the value :

            - id: Ratio-1-3

I've created a template

// eslint-disable-next-line no-unused-vars
import { CommonFieldTypes, Manifest } from '@sitecore-jss/sitecore-jss-manifest';

 * This is the data template for an individual _item_ in the Tag's Content List field demo.
 * @param {Manifest} manifest Manifest instance to add components to
export default function(manifest) {
    name: 'KeyValue-Template',
    displayName: 'Key Value',
    fields: [{ name: 'KeyValue', type: CommonFieldTypes.SingleLineText }],

and 3 files in my data like this one :

id: Ratio-1-3
displayName: Tag
# Template defines the available fields. See /sitecore/definitions/templates/KeyValue-Template.sitecore.js
template: KeyValue-Template
  KeyValue: 1/3

Even with all of this if I want to display the value of ratio with this :

<Text field={fields.ratio} />

it is always empty.

If I put a value that is not in the defined items like Ratio-Unknown instead of Ratio-1-3 then it fails so I'm pretty sure that the list is almost working but I dont get any value.

1 Answer 1


Figured the answer myself by adding a console.log to the field.ratio : the result is not the one I expected. Instead of getting the selected item I get a list containing the selected item (I guess this is for handling multiselect cases). So I'll have to iterate through the results to get the selected item instead of having it directly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.