Dropdown with more than 2 fields

Question

Sitecore: 9.3

What I am trying to do: In Sitecore Forms, I was trying to add a new data type under List section. In the present implementation, we have a data type DropDownList, where we can map key and values for the dropdown.

I am trying to add 2 more drop-downs, so I can have 4 fields selected from the item on the front end.

But I am unable to get the same in UI.

I saw the way DropDownList is implemented in Sitecore. In the Core DB, under the section List items I am not able to add new drop-downs. Even I added another copy of DropDownList only one set got displayed.

I did saw the view rendering 'Datasource' applied to it. But sorry, I couldn't achieve anything.

Please help me to achieve the same.

Answer 1

This is the decompiled ListFieldItem

using System;

namespace Sitecore.ExperienceForms.Mvc.Models
{
  [Serializable]
  public class ListFieldItem
  {
    public string ItemId { get; set; }

    public bool Selected { get; set; }

    public string Text { get; set; }

    public string Value { get; set; }
  }
}

The ItemId is the referenced Item being used. Therefore, you could have multiple fields on your item's template and then you could get to use them pretty easily. Here is a little snippet on how I used a CssClass field on an item template and use it within RadioButtonList.cshtml

@using Sitecore.ExperienceForms.Mvc.Html
@using Sitecore.Data;

@model Sitecore.ExperienceForms.Mvc.Models.Fields.ListViewModel


<label class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
@foreach (var item in Model.Items)
{
    <label class="@Model.CssClass">
        <input class="@Sitecore.Context.Database.GetItem(new ID(item.ItemId)).Fields["CssClass"]" type="radio" name="@Html.NameFor(m => Model.Value)" @if (item.Selected) { <text> checked</text>} value="@item.Value" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value) />@item.Text
    </label>
}
@Html.ValidationMessageFor(m => Model.Value)

Depending on your needs, I think this could do the trick. You would end up having your 2 dropdowns from your Datasource Item's fields...

@{
  var contextItem = Sitecore.Context.Database.GetItem(new ID(item.ItemId));
  
  if(contextItem != null)
  {
    var dropdownA = contextItem.Fields["dropdownA"];
    var dropdownB = contextItem.Fields["dropdownB"];
  }
}