How to provide a select list in the web application

Question

I have a headless rendering based on this template: Heading: Single-line Text Description: Single-Line Text Background: Droplist (source: is an enum folder)

I have a sample item:

The droplist works fine here, but when it comes to rendering this in the tsx component, I am unsure how.

Here is the interface definitions:

interface Fields {
    Heading: Field<string>;
    Description: Field<string>;
    Background: any;
}

type MyProps = {
    params: { [key: string]: string };
    fields: Fields;
}

I brought set up the props for the background field to be any, to try and see what it would come in as, and it looks like it is coming in as a Field type. I put in a console.log to inspect it:

As can be seen, the value that is coming in is just the selected value that was select in 1, not the list of possible choices. I am unable to build a select/option mapping (which from my understanding is how it is done with sitecore-jss-nextjs).

I've been struggling to find examples of rendering a droplist in xm-cloud or headless (though I am very new to Sitecore, so could just be not knowing the right keywords to search), so hoping someone may be able to assist, even if it is just a link to some sample code I can peruse.

Answer 1

When you create a data template with a droplist field, you are saying that the list should be available to editors to select from. When rendering, you would only render the value selected by the content editor in the head application.

If you want to build a select list that users of the web application would select from you would not use a droplist field in your data template.

You can achieve this by using a multilist or treelist field in your data template and pointing the source property to a list of items that you want to make available for the end users.

A content author would then select which items should be available for the website user. You would have to build your component to read in those values and display that to the user. There is not a way to do this with OOTB components.

Answer 2

If you want get the details of your dropdown(multilist , treelist etc) please use type as Sitecore.Override.ItemEx[]; instead of any.

If Droplink use type as Sitecore.Override.ItemEx ,

if Droplist use type as Field<string>

I hope this will resolve your issue.