Create the editor view

Custom personalization criteria Tutorial

After you create the evaluater class, you create the editor view that you use to enter the criterion value when editing a user segment in Sitefinity’s CMS backend. This view consists of a dropdown field and client side validation. To create the view:

1. In Visual Studio, open the context menu of the DayOfWeekPersonalization project and click Add » Class
2. Name the class file DayOfWeekEditor.ascx and click Add.
3. From the context menu of the file, select Properties.
4. Set the Build Action to Embedded Resource.
5. Open the newly created file and clear its contents.
6. Paste the following code:
   

   	<label for="day" class="sfTxtLbl">{$CustomPersonalizationResources, Day$}</label>
   	<select id="day">
   	<option value="1">{$CustomPersonalizationResources, Monday$}</option>
   	<option value="2">{$CustomPersonalizationResources, Tuesday$}</option>
   	<option value="3">{$CustomPersonalizationResources, Wednesday$}</option>
   	<option value="4">{$CustomPersonalizationResources, Thursday$}</option>
   	<option value="5">{$CustomPersonalizationResources, Friday$}</option>
   	<option value="6">{$CustomPersonalizationResources, Saturday$}</option>
   	<option value="0">{$CustomPersonalizationResources, Sunday$}</option>
   	</select>
   	<script type="text/javascript">
   	function CriterionEditor() {
   	}
   	CriterionEditor.prototype = {
   	//Used as a label for the criterion when viewing the user segment
   	getCriterionTitle: function () {
   	return "{$CustomPersonalizationResources, Day$}";
   	},
   	//The descriptive value for the criterion
   	getCriterionDisplayValue: function () {
   	return $("#day option:selected").text();
   	},
   	//Persists the input from the user as a value for the criterion
   	getCriterionValue: function () {
   	return $("#day").val();
   	},
   	//When the editor opens, sets the previously persisted value
   	//as initial value for the criterion
   	setCriterionValue: function (val) {
   	$("#day").val(val);
   	},
   	errorMessage: "",
   	isValid: function () {
   	var day = $("#day").val();
   	if (day.length === 0) {
   	this.errorMessage = "{$CustomPersonalizationResources, DayError$}";
   	return false;
   	}
   	return true;
   	}
   	};
   	</script>

   view raw DayOfWeekEditor.ascx hosted with ❤ by GitHub

   In the code above, you create a dropdown field that is used to configure the value for the criteria of your custom personalization. The script tag contains logic that is used to persist the value to and from the client side, as well as for input validation. The curly brackets dollar notation is used the retrieve resources from the CustomPersonalizationResources class.