0

Sitecore version: 9.0.2 How can I create a dropdown in Sitecore 9.0.2 form and bind data from external data sources like SQL server?

1

2 Answers 2

1

You need to create a custom drop-down list for external data in Sitecore forms, to achieve this functionality please follow the below steps and you can customize it as per your requirement:

Create a Field Settings Manager

We will start by creating a class that extends from the interface Sitecore.ExperienceForms.FieldSettings.IFieldSettingsManager. This interface is found in the Sitecore.ExperienceForms assembly is responsible for populating the options in the dropdown list field.

IFieldSettingsManager contains two methods:

  • GetSettings – Here is where you are going to implement the logic to populate the options. You might want to call some service to read information from an external system (e.g. Salesforce) and convert them into a ListFieldItemCollection
  • SaveSettings – The OOTB dropdown list field uses this method to create the options as Sitecore items in the Content Tree when the static data source is selected. Below is the code:

https://github.com/netojoa/blog/blob/master/sitecore/forms/custom-elements/src/Feature/Forms/code/Managers/SalesforceSettingsManager.cs

Create a ViewModel class Next, we need to create a view model class for the custom dropdown list. This is a really simple class that basically derives from the Sitecore.ExperienceForms.Mvc.Models.Fields.DropDownListViewModel class and overwrites DataSourceSettingsManager property to reuse our own field settings manager class.

Below is the code: https://github.com/netojoa/blog/blob/master/sitecore/forms/custom-elements/src/Feature/Forms/code/Models/Fields/SalesforceDropdownListViewModel.cs

Tying everything together Now, in the Content Editor, navigate to /sitecore/system/Settings/Forms/Field Types/Lists and create a new field type (template: /sitecore/templates/System/Forms/Field Type). Give it the name “Salesforce Dropdown list”, and enter the following values:

  • View Path: FieldTemplates/DropDownList. We are reusing the same as the OOTB Dropdown list field
  • Model Type: Custom.Feature.Forms.Models.Fields.SalesforceDropdownListViewModel, Custom.Feature.Forms. Enter here the full qualified namespace to the view model we have just created.
  • Property Editor: Property Editor Settings/DropdownList. Let’s keep the same as the OOTB dropdown list field for the sake of simplicity. I have created a custom one, however. You can find it in my Github repository.
  • Field Template: Fields/Dropdown List. We are reusing the same as the OOTB Dropdown list field.
  • Icon: OfficeWhite/32×32/drop_down_list.png. Or any of your choice.
  • BackgroundColor: Grass. With all that done, you should have now a dropdown list getting data from external sources.

Create a List Data Source Provider We will start by creating a class that extends from the interface Sitecore.ExperienceForms.Mvc.DataSource.IListDataSourceProvider. This interface is found in the Sitecore.ExperienceForms.Mvc assembly and is responsible for populating the options in the dropdown list field in Sitecore 9.0.x.

https://github.com/netojoa/blog/blob/master/sitecore/forms/custom-elements/src/Feature/Forms/code/Providers/SalesforceListDataSourceProvider.cs

Create a View Model Class Next, we need to create a view model class for the custom dropdown list. This class derives from the Sitecore.ExperienceForms.Mvc.Models.Fields.DropDownListViewModel class and overwrites ListDataSourceProvider property to reuse our own List Data Source Provider class. https://github.com/netojoa/blog/blob/master/sitecore/forms/custom-elements/src/Feature/Forms/code/Models/Fields/SalesforceDropdownListViewModel.cs

Blog :https://joaoneto.blog/create-a-dropdown-list-with-external-data-in-sitecore-forms/

Github: https://github.com/netojoa/blog/tree/master/sitecore/forms/custom-elements

0

You can achieve this by creating a custom Sitecore Form field and creating a List Data Source Provider, that will be responsible to retrieve the data from an external provider.

I used this article to work with an External Data provider by creating a class that get inherits from IListDataSourceProvider

https://joaoneto.blog/create-a-dropdown-list-with-external-data-in-sitecore-forms/

For the custom field, you need to create a class that gets inherited from the OOTB class called DropDownListViewModel.

For the view side, you need to refer to the OOTB dropdown list and change a little bit of cshtml updates as per your needs.

Under that cshtml, you need to bind your Items property with your external data provider and then you bind the dropdown list values like this.

<select id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass universalcascadingselectlist-ddn" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)>
    @if (Model.ShowEmptyItem)
    {
        <option label=" "></option>
    }@foreach (var item in Model.Items)
    {
        <option value="@item.Value" selected="@item.Selected">@item.Text</option>
    }
</select>

Your Answer

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

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