Tagged: Custom

Sitecore 9 Forms: Custom Grouped dropdown

I came across a requirement from a client that they wanted to show Country and it’s states grouped in a dropownlist. I created a custom grouped dropdown to fit into the scenario. Since this is an extension of dropdownlist, no speak knowledge required. 

Let’s get started

Step 1: Create custom dropdown list

Create a custom dropdownlist under
/sitecore/system/Settings/Forms/Field Types/Lists based on Field Type(/sitecore/templates/System/Forms/Field Type) template like below

Step 2: Create a code behind class and razor view

create a code behind class like this in VS project

using System.Collections.Generic;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.ExperienceForms.Mvc.Models.Fields;

namespace Sitecore.Project.Example.Views.StateDropdown
{
	public class StateDropdown : DropDownListViewModel
	{
		protected override void InitItemProperties(Item item)
		{
			Assert.ArgumentNotNull(item, nameof(item));
			base.InitItemProperties(item);
		}

		protected override void UpdateItemFields(Item item)
		{
			Assert.ArgumentNotNull(item, nameof(item));
			base.UpdateItemFields(item);
		}

		public Dictionary<string, Dictionary<string, string>> Regions()
		{
			if(string.IsNullOrEmpty(DataSource)) return new Dictionary<string, Dictionary<string, string>>();
			Dictionary<string, Dictionary<string, string>> counrtyCollection = new Dictionary<string, Dictionary<string, string>>();
			Item item = Context.Database.GetItem(DataSource);
			var children = item.GetChildren();
			foreach (Item child in children)
			{
				counrtyCollection.Add(child.Fields["Name"].Value, new Dictionary<string, string>());
				foreach (Item desc in child.Children)
				{
					counrtyCollection[child.Fields["Name"].Value].Add(desc.Fields["Name"].Value, desc.Fields["Code"].Value);
				}
			}
			return counrtyCollection;
		} 
	}
}

Create a razor view like this and build project

@using Sitecore.ExperienceForms.Mvc.Html
@model Sitecore.Project.Example.Views.StateDropdown.StateDropdown
@{
	var regions = Model.Regions();
}
<label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
<select id="@Html.IdFor(m => Model.Value)" data-trigger name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" placeholder="Select Your Work Location" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)>
	<option placeholder>Select Your Work Location</option>
	@foreach (var region in regions)
	{
		<optGroup data-id="@region.Value" label="@region.Key">
			@foreach (var state in region.Value)
			{
				<option value="@state.Value">@state.Key</option>
			}
		</optGroup>
	}
</select>
@Html.ValidationMessageFor(m => Model.Value)

Step 3: Fill out the fields

Fill out the View Path, Model Type and Property Editor(should be Property Editor Settings/DropDown List).  

you are now all set to utilize the custom dropdown list in Forms Designer. Don’t forget to publish the field!

Hope this is helpful. Any questions, please leave a comment.

Happy Sitecoring.

0

Sitecore 9 Forms: Custom Regex Validation

I came across a scenario where i implemented a custom validation on Sitecore 9 Forms. Sharing my knowledge here. You can achieve this in three simple steps.

Step 1: Create custom validator

Create a custom validator under
/sitecore/system/settings/forms/validation based on Validation(sitecore/templates/System/Forms/Validation) template like below

Step 2: Fill out the fields

Fill out your own regex and error message. You can copy the Type value from other validator.

Step 3: Assign the custom validator

You can now add the new custom validator to any Form fields(
/sitecore/system/Settings/Forms/Field Types). All set and no code required!

Hope you found this blog helpful. Any questions, please leave a comment.

Happy Sitecoring!

0

Sitecore 9 Forms: Custom Submit Action

One of most common scenario I came across in Sitecore 9 Form is to create your custom submit action. You can achieve this in three simple steps.

Step 1: Create submit action button in Sitecore

Create the custom action button under /sitecore/system/Settings/Forms/Submit Actions.

Step 2: Create code behind class

Create a class that inherits SubmitActionBase class and override the Execute method.

public class CustomSubmitAction : SubmitActionBase<string>
{
public CustomSubmitAction(ISubmitActionData submitActionData) : base(submitActionData)
{
}

public override void ExecuteAction(FormSubmitContext formSubmitContext, string parameters)
{
Assert.ArgumentNotNull((object)formSubmitContext, nameof(formSubmitContext));

if (this.TryParse(parameters, out string target))
{
try
{
if (this.Execute(target, formSubmitContext))
return;
}
catch (ArgumentNullException ex)
{
}
}
formSubmitContext.Errors.Add(new FormActionError()
{
ErrorMessage = this.SubmitActionData.ErrorMessage
});
}

protected override bool Execute(string data, FormSubmitContext formSubmitContext)
{
Assert.ArgumentNotNull(data, nameof(data));
Assert.ArgumentNotNull(formSubmitContext, nameof(formSubmitContext));

//Prepare model here
var model = new EmailModel()
{
Email = GetValue(formSubmitContext.Fields.FirstOrDefault(f => f.Name.Equals("EmailAddress")))
};

// Call any API service call

return true;
}

private static string GetValue(object field)
{
return field?.GetType().GetProperty("Value")?.GetValue(field, null)?.ToString() ?? string.Empty;
}

protected override bool TryParse(string value, out string target)
{
target = string.Empty;
return true;
}

Step 3: Set the custom submit action fields

Update the ModelType and Error Message on the button shown below.

Bind the custom submit action to Submit button like below.

Publish the button. The submit button on form should now trigger the custom save action! Any questions, let me know.

Happy sitecoring.

0