Add classes to the project
You can derive a control from the NintexFormControl class and the NintexFormControlProperties class to represent the control.
You can use a second derived class to hold the control properties. You must inherit from NintexFormControl class and the NintexFormControlProperties class in order to create a bindable control. This means that the control will be bound to the data in your SharePoint list. You can associate a bindable list field, properties, functions, and events from the Nintex Forms designer.
Note: You will have to manually register the control with the Nintex Forms Manager, see Register the custom control with the Nintex Forms manager.
In this section, add the following derived classes to your project:
Code
You can download the code used in this example from the following location:
2013_ONPREM_NF_CustomControl.zip
Note: You need to configure the code for the example before you can build and run it. See Prepare the Visual Studio project for instructions on how to configure the code for the example.
Add MyCustomSliderControl.cs
Create the derived class of named MyCustomSliderControl that inherits from the NintexFormControl. You will override the specific methods and define the specific control type that you will use to create your custom control. This example uses the TextBox control. You can refer to the code comments in the sample code for more details.
To add the MyCustomSliderControl Class
- Right-click the name of your class in the solution file in the Solution Explorer in Visual Studio, click Add, and select Class.
- Name the class, MyCustomSliderControl.cs, and add the sample code.
namespace Nintex.Forms.Sdk.Sample
{
using System;
using System.Collections.Generic;
using System.IO;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using FormControls;
public class MyCustomSliderControl : NintexFormControl
{
/// Contains a 32 character guide for the control.
public override Guid FormControlTypeUniqueId => new Guid("3fcdb588-6fdc-4131-828f-e66be3d3e104");
/// Gets and sets the input HTML for the control (this the user facing HTML)
private HtmlGenericControl SliderComponent { get; set; }
/// Gets and sets a DIV that contains the HTML for the user facing HTML control.
private HtmlGenericControl SliderWrapperComponent { get; set; }
/// Sets the labels displays attributes method
private Label DisplayValueComponent { get; set; }
/// creates an instance of the control properties defined in the MyCustomSliderControlProperties class.
public MyCustomSliderControlProperties SliderProperties => (MyCustomSliderControlProperties)FormControlProperties;
/// On the prerender event loads the control JS script referenced with a URL and control CSS referenced with a URL.
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
RegisterSliderPackage();
}
/// Return the HMTL that is inserted in the form filler (the GetCanvasDesignTimeHTML method).
public override string GetCanvasDesignTimeHtml(FormControlProperties properties)
{
return "<input type='text' value='a slider control'></input>";
}
/// Executes the methods that generate the input HTML, wrapped in a DIV.
protected override void CreateFormControls()
{
SliderComponent = CreateSliderComponent();
SliderWrapperComponent = CreateSliderWrapperComponent(SliderComponent);
DisplayValueComponent = CreateDisplayValueComponent();
Controls.Add(SliderWrapperComponent);
Controls.Add(DisplayValueComponent);
/// Set name attribute after adding it to the control hierarchy so we have the finalised client id
SliderComponent.Attributes.Add("name", SliderComponent.ClientID);
}
protected override FormControlProperties GetDefaultFormPropertiesProtected()
{
return new MyCustomSliderControlProperties();
}
///Sets the values for the custom control used in the Nintex Designer toolbox such as the name the control, description, group, and behavior in the context of Nintex Forms.
protected override void Initialise()
{
DisplayName = "My Custom Slider";
Description = "This is a custom slider control";
GroupName = "Custom Controls";
DefaultCanResizeAtRuntime = true;
SupportedFormControlTypes = new List<FormControlType> { FormControlType.Number };
}
// Retrieves the value from the HTML form control and converts to an integer.
protected override void OnFormControlDataBinding(object sender, EventArgs e)
{
EnsureChildControls();
var value = GetValue();
int sliderValue;
if (int.TryParse(value.ToString(), out sliderValue))
{
SliderComponent.Attributes["value"] = value.ToString();
}
}
// Retrieves the value from the TextBox control.
protected override object GetUpdatedValue()
{
int value;
int.TryParse(Page.Request.Form[SliderComponent.ClientID], out value);
return value;
}
// Back-side code that creates the control HTML.
private HtmlGenericControl CreateSliderComponent()
{
var slider = new HtmlGenericControl("input");
slider.Attributes.Add("type", "range");
slider.Attributes.Add("min", SliderProperties.Min.ToString());
slider.Attributes.Add("max", SliderProperties.Max.ToString());
slider.Attributes.Add("step", SliderProperties.Step.ToString());
slider.Attributes.Add("value", SliderProperties.StartValue.ToString());
slider.Attributes.Add("data-orientation", SliderProperties.IsHorizontal ? "horizontal" : "vertical");
if (ReadOnly)
{
slider.Attributes.Add("disabled", "disabled");
}
return slider;
}
// Back-side code that creates the a DIV to wrap the control HTML.
private HtmlGenericControl CreateSliderWrapperComponent(HtmlGenericControl sliderComponent)
{
var wrapper = new HtmlGenericControl("div");
wrapper.Attributes.Add("id", Path.GetRandomFileName().Replace(".", ""));
wrapper.Attributes.Add("style", "width:80%;");
wrapper.Controls.Add(sliderComponent);
return wrapper;
}
// Creates the control inline style label CSS.
private Label CreateDisplayValueComponent()
{
var displayValue = new Label();
displayValue.Attributes.Add("style", "float:right; width:20%; position:relative; left: 5px; top:-20px;");
return displayValue;
}
// Fired to load the style and scripts.
private void RegisterSliderPackage()
{
AddSliderScripts();
AddSliderStyles();
}
// Contains the absolute URLs to the libraries used by the control, and the JQUERY JS used to handle the HTML code.
private void AddSliderScripts()
{
Page.ClientScript.RegisterClientScriptInclude(GetType(), "jquery", "https://code.jquery.com/jquery-2.2.0.min.js");
Page.ClientScript.RegisterClientScriptInclude(GetType(), "slider", "https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.1.1/rangeslider.min.js");
var startupScript = @"
$(document).ready(function(){
var $slider = $('#" + SliderComponent.ClientID + @"');
var $label = $('#" + DisplayValueComponent.ClientID + @"');
$slider.rangeslider({
polyfill: false,
rangeClass: 'rangeslider',
disabledClass: 'rangeslider--disabled',
horizontalClass: 'rangeslider--horizontal',
verticalClass: 'rangeslider--vertical',
fillClass: 'rangeslider__fill',
handleClass: 'rangeslider__handle',
onInit: function(){
$label.text($slider.val());
},
onSlide: function(position, value){
$label.text(value);
},
onSlideEnd: function(position, value){
$slider.attr(""value"", value);
}
});
});";
Page.ClientScript.RegisterClientScriptBlock(GetType(), $"sliderStartup_{SliderComponent.ClientID}", startupScript, true);
}
// Contains the absolute URL for the control styling and inline JS used to dynamically adjust the style of the control.
private void AddSliderStyles()
{
var link = new HtmlLink
{
Href = "https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.1.1/rangeslider.min.css"
};
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("type", "text/css");
Page.Header.Controls.Add(link);
if (!string.IsNullOrWhiteSpace(SliderProperties.FillColour))
{
var fillColourScript = @"
$(document).ready(function(){
$('#" + SliderWrapperComponent.Attributes["id"] + "').find('.rangeslider__fill').css('background','" + SliderProperties.FillColour + @"');
});";
Page.ClientScript.RegisterClientScriptBlock(GetType(), $"fillColour_{SliderComponent.ClientID}", fillColourScript, true);
}
}
}
}
Add MyCustomSliderControlProperties.cs
The control properties contains the control properties and are presented and editable through the Nintex Forms Designer. You can refer to the code comments in the sample code for more details.
To add the MyCustomSliderControlPropertiesClass
- Right-click the name of your class in the solution file in the Solution Explorer in Visual Studio click Add, and select Class.
- Name the class, MyCustomSliderControlProperties.cs, and add the sample code.
namespace Nintex.Forms.Sdk.Sample
{
using System;
using System.Runtime.Serialization;
[Serializable]
[DataContract]
public class MyCustomSliderControlProperties : NintexFormControlProperties
/// This class defined the control properties which are created by the constructor when the object is called.
/// The constructor defined the properties which map to the attributes of the control.
{
public MyCustomSliderControlProperties()
{
Min = 1;
Max = 100;
Step = 1;
StartValue = 30;
IsHorizontal = true;
}
[DataMember]
[ControlPropertyInfo(
DisplayName = "Minimum Value",
Description = "...",
ChangeAction = ControlPropertyChangeActionType.RefreshFromServer,
GroupName = NfConstants.CommonResourceStringNames.ControlPropertyGroupGeneral,
DisplayOrder = 90001)]
public int Min { get; set; }
[DataMember]
[ControlPropertyInfo(
DisplayName = "Maximum Value",
Description = "...",
ChangeAction = ControlPropertyChangeActionType.RefreshFromServer,
GroupName = NfConstants.CommonResourceStringNames.ControlPropertyGroupGeneral,
DisplayOrder = 90002)]
public int Max { get; set; }
[DataMember]
[ControlPropertyInfo(
DisplayName = "Increment",
Description = "...",
ChangeAction = ControlPropertyChangeActionType.RefreshFromServer,
GroupName = NfConstants.CommonResourceStringNames.ControlPropertyGroupGeneral,
DisplayOrder = 90003)]
public int Step { get; set; }
[DataMember]
[ControlPropertyInfo(
DisplayName = "Start Value",
Description = "...",
ChangeAction = ControlPropertyChangeActionType.RefreshFromServer,
GroupName = NfConstants.CommonResourceStringNames.ControlPropertyGroupGeneral,
DisplayOrder = 90004)]
public int StartValue { get; set; }
[DataMember]
[ControlPropertyInfo(
DisplayName = "Horizontal Orientation",
Description = "...",
ChangeAction = ControlPropertyChangeActionType.RefreshFromServer,
GroupName = NfConstants.CommonResourceStringNames.ControlPropertyGroupGeneral,
DisplayOrder = 90005)]
public bool IsHorizontal { get; set; }
[DataMember]
[ControlPropertyInfo(
DisplayName = "Fill Color",
Description = "...",
ChangeAction = ControlPropertyChangeActionType.RefreshFromServer,
GroupName = NfConstants.CommonResourceStringNames.ControlPropertyGroupGeneral,
DisplayOrder = 90006)]
public string FillColour { get; set; }
}
}