MaskedInput​.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Skelta.Forms.Core;

using Skelta.Forms.Core.External;

using Skelta.Forms.Core.CommonObjects;

using Skelta.Forms.Core.Controls;

using Skelta.Forms.Core.Interfaces;

using System.ComponentModel;

using System.Collections.ObjectModel;

namespace CustomControl

{

// My Custom control class.

// This custom control will act as a Masked Input control.

// Add attributes to make it available in the Forms Designer toolbox.

[DesignerControl(992200, CoreDesigner.NextGenDesigner, DesignerCategory.Custom)]

public class MyCustom : BaseDataExternalControl

{

public override BaseControl GetNewInstanceForClone()

{

var custom = new MyCustom();

custom.Mask = this.Mask;

return custom;

}

// Mask field.

private string mask = "###-##-###";

// Mask property.

// Add Default Value for the property.

 [DefaultValue("###-##-###")]

 

 // Add the Designer attribute to render this property in the Properties page, under the Validation tab.

[DesignerProperty(774000, Categories.Validation, CoreDesigner.NextGenDesigner)]

public string Mask

{

get { return mask; }

set { mask = value; }

}

/// <summary>

/// Render the control - Look and feel of the control in the Forms Designer and Preview.

/// </summary>

 /// <returns>Controls View</returns>

public override string GetControlHtml()

{

var stringBuilder = new StringBuilder();

StringBuilder dataBindAttribute = new StringBuilder();

 

 // Create binding for the controls with the "DataBindAttribute" keyword. By default all the below properties are rendered.

 // You can also add other Knockout binding like "attr" here.

// For a separate view for the Design mode using the "this.TopLevelForm.InDesignMode" keyword.

if (this.TopLevelForm.InDesignMode == false)

{

dataBindAttribute.Append(" " + DataBindAttribute + "=\"value: " + this.Id + "._value");

dataBindAttribute.Append(", enable: " + this.Id + "._enable");

dataBindAttribute.Append(", readOnly: " + this.Id + "._readOnly");

dataBindAttribute.Append(", mandatory: " + this.Id + "._isMandatory");

dataBindAttribute.Append(", hasfocus:" + this.Id + "._lostFocus");

dataBindAttribute.Append("\"");

}

// Render the control.

stringBuilder.Append("<input type='text' " + this.GetControlIdAttribute + dataBindAttribute.ToString() + " onkeypress='return Skelta.forms.maskedInput.keyPress(this);'");

if (this.Mask.Trim().Length > 0)

{

stringBuilder.Append(" placeholder=\"" + this.Mask + "\"");

}

// End the Input tag.

stringBuilder.Append(" />");

// Function to add the custom JS files.

AddJsFiles();

// Function to add the custom CSS files.

AddCssFiles();

return stringBuilder.ToString();

}

/// <summary>

/// Add CSS files associated with the custom control.

/// </summary>

private void AddCssFiles()

{

/* As this custom control has no specific CSS, no custom CSS file is added. */

////if (string.IsNullOrEmpty (this.TopLevelForm.RuntimeCss["MyCSSFile"]))

////{

////  // "this.TopLevelForm.RuntimeCss" is the collection which holds your custom CSS files.

////  // It is a key-value pair collection where the key is the file name and the value is the file path(absolute or relative).

////  // Ensure the CSS files are present in the "BPMUITemplates/Default/NextGenForms/css" folder. Otherwise, it will not be rendered.

////  this.TopLevelForm.RuntimeCss.Add("MyCSSFile", "css/maskedinput.css");

////}

}

/// <summary>

/// Add custom JS files associated with the custom control.

/// </summary>

private void AddJsFiles()

{

if (string.IsNullOrEmpty (this.TopLevelForm.RuntimeJS["MyJsFile"]))

{

// "this.TopLevelForm.RuntimeJS" is the collection which holds your custom JS files.

// It is a key-value pair collection where the key is the file name and the value is the file path(absolute or relative).

// Ensure the JS files are present in the "BPMUITemplates\Default\NextGenForms\js" folder. Otherwise, it will not be rendered.

 this.TopLevelForm.RuntimeJS.Add("MyJsFile", "js/Skelta.maskedinput.js");

}

}

/// <summary>

/// Rules for the control - Add custom validations for the control when value of the control changes.

/// </summary>

public override Collection<Rule> Rules

{

get

{

// By default a few rules like Mandatory are added.

 // We recommend to insert or add rules instead of creating a new rules collection.

Collection<Rule> rules = base.Rules;

// RuleFor -  Associated property for the rule.

// RuleName - JavaScript function name for the rule.

// RuleDefnition - Error message for the rule.

// ControlType - Associated control for the rule.

 // RenderMode - Render the control in HTML5 or HTML.

rules.Insert(0, new Rule { RuleFor = "Value", RuleName = "Skelta.forms.maskedInput.validation", RuleDefinition = "Enter valid data (mask text: " + this.Mask + ")", ControlType = this.GetType().Name });

return rules;

}

}

}

}