To Droplist or to Droplink in Sitecore XM Cloud, that is the Question

Using Droplist and Droplink to Form a Content Relationship

Sitecore offers a variety of field types for content relationship management. Droplist and Droplink are two sorts of fields that are frequently utilized. Despite their apparent similarities, they have distinct benefits and drawbacks and are used for diverse purposes.

Let’s examine both, reviewing pros, cons as well as appropriate use cases of each. First, let’s look at the Droplink field.

What is a Droplink Field?

A Droplink field creates a reference to another Sitecore item. The selected value is stored as an item ID rather than plain text, allowing for relationships between content items.

What are the Pros of a Droplink Field?

• Preserves relationships: Consistency is guaranteed since the chosen value is connected to a real Sitecore object. Thus even if you change and then publish the datasource of a referenced item, the item is updated.
• Supports multilingual content: Language versions are automatically handled because it refers to an item.
• Improved scalability: You can easily make new items without changing templates if you need to add more options.
• Update consistency: Since all references depend on the item's ID, they stay intact even if the name of an item changes.

What are the Cons of a Droplink Field?

• Setup is a little more complicated because selectable values must be stored in different items.
• Possible performance degradation: When dealing with a Droplink on the front-end, more work might need to be done to deal with the information provided.
• Presently there are no DroplinkField types. And likely won’t be, given the information provided within the reference data depends on the template of said item.
• Difficulties with content migration: Links may break if items that are referenced are absent in another environment.

Publishing Concern When Using a Droplink Field

While it is not a concern you should drop what you’re doing and rush to your XM Cloud instance right away, it is something to be thinking of when you’re building your taxonomy. Droplinks, like Multilist and other fields that, when a page published in XM Cloud generates its layout JSON, traverses the content tree. If by chance, in that traversal, a relationship points back to the page published it can create an circular generation. Thankfully XM Cloud has methods of detecting this, but if you have cases where pages are used in datasources, you need to run tests to ensure it’s not going to cause issues.

What are Some Use Cases for a Droplink Field?

There are obviously certain circumstances where Droplinks are extremely valuable. Here are a few.

• When you want to attach a product to a category item, for example, and you require a dynamic list of possibilities that may vary over time.
• When it is necessary to have multilingual support (e.g., choosing a country from a list that requires localized names).
• Where maintaining data integrity is essential (e.g., tying author names to article entries to guarantee that changes are reflected across the site).

Code Example of a Droplink Field

Let’s look at what may be required to utilize a Droplink field in a Next.js component. Since the field could contain any additional fields as part of the object reference, we have to manually create it.

import Link from 'next/link';

interface CategoryLinkProps {
  fields: {
    category?: {
      value?: {
        id: string;
        name: string;
        url?: string;
      };
    };
  };
}

export const CategoryLink = ({ fields }: CategoryLinkProps): JSX.Element => {
  const category = fields.category?.value;

  if (!category) return <span className="text-gray-400">No Category Selected</span>;

  return (
    <Link href={category.url || '#'} className="category-link">
      {category.name}
    </Link>
  );
};

What is a Droplist Field?

A Droplist is a simple field in Sitecore where the user chooses a predetermined value from a list. The chosen value is saved in plain text format.

What are the Pros of a Droplist Field?

• Performance & Simplicity: Direct Value Access: No extra Next.js API requests are needed because the chosen value is saved as plain text.
• No Additional API Calls: GraphQL lookups are not required because the field is part of the Sitecore JSON API response by default.
• Fast Rendering: The value can be shown right away because no object resolution is required.
• Absence of Reliance on Related Items: A Droplist value is independent of the availability or publication of another Sitecore item, in contrast to a Droplink.

What are the Cons of a Droplist Field?

• No Link Tracking: Sitecore does not keep track of which content items are utilizing the displayed values if they need to be modified across several items.
• Droplist values are not supported across languages: A Droplist holds raw text and necessitates separate fields or logic for translations, in contrast to a Droplink, which references an item with several language variants.

What are some Use Cases of a Droplist Field?

So what are some use cases where utilizing a Droplist field would be appropriate. Let’s have a look.

• The "Priority" column on a blog post template allows content writers to choose between "High," "Medium," and "Low”.
• A banner’s theme selection allowing content authors to select between “Light” and “Dark”.
• A contact form that includes a dropdown for users to select an inquiry type (e.g., "Support," "Sales," "Feedback").

Ultimately it comes down to the fact if the values you are using are static, predefined, you don’t require additional information as part of the relationship and if you are largely using the values for things like labels, changes in UI, or styling.

Code Example of a Droplist Field

Now let’s look into what a front-end component might look like if it uses a Droplist field.

interface PriorityLabelProps {
  fields: {
    priority?: {
      value: string;
    };
  };
}

export const PriorityLabel = ({ fields }: PriorityLabelProps): JSX.Element => {
  const priority = fields.priority?.value || 'Not Set';

  return (
    <span className={`priority-label priority-${priority.toLowerCase().replace(/\s/g, '-')}`}>
      {priority}
    </span>
  );
};

Comparing Droplist to Droplink

Proper usage is key to ensuring your front-end application performs as best as possible. Reducing the size of the layout JSON, which could contain all fields within a Droplink’s reference, may be overkill, and you could be impacting the performance of your site so it’s good to understand if it maybe better served as a Droplist field instead.