Create Custom Input Types
In this document we will create a custom input type step by step. Our input type is multi-select combobox input type.
Go to
*.Core
and create a folder namedCustomInputTypes
.Create a class named
MultiSelectComboboxInputType
in that folder./// <summary> /// Multi Select Combobox value UI type. /// </summary> [Serializable] [InputType("MULTISELECTCOMBOBOX")] public class MultiSelectComboboxInputType : InputTypeBase { }
Go to
AppDynamicEntityParameterDefinitionProvider
and add new input type.public class AppDynamicEntityParameterDefinitionProvider : DynamicEntityParameterDefinitionProvider { public override void SetDynamicEntityParameters(IDynamicEntityParameterDefinitionContext context) { ... context.Manager.AddAllowedInputType<MultiSelectComboboxInputType>(); ... } }
Go to
*.Web.Mvc\wwwroot\view-resources\Areas\AppAreaName\Views\Common\IInputTypes\
folderCreate new JavaScript file named
MultiSelectComboboxInputType.js
and fill required functions.var MultiSelectComboBoxInputType = (function () { return function () { var _options; function init(inputTypeInfo, options) { _options = options; } var $combobox; function getView(selectedValues, allItems) { $combobox = $('<select class="form-control w-100" multiple/>'); if (allItems && allItems.length > 0) { for (var i = 0; i < allItems.length; i++) { var $option = $('<option></option>') .attr('value', allItems[i]) .text(allItems[i]); if (selectedValues && selectedValues.length > 0 && selectedValues.indexOf(allItems[i]) !== -1) { $option.attr("selected", "selected"); } $option.appendTo($combobox); } } $combobox .on('change', function () { if (_options && typeof (_options.onChange) === "function") { _options.onChange($combobox.val()); } }); return $combobox[0]; } function getSelectedValues() { return $combobox.val(); } function afterViewInitialized() { $combobox.select2({ width: '100%' }); } return { name: "MULTISELECTCOMBOBOX", init: init, getSelectedValues: getSelectedValues, getView: getView, hasValues: true, // is that input type need values to work. For example dropdown need values to select. afterViewInitialized: afterViewInitialized }; }; })(); (function () { var MultiSelectComboBoxInputTypeProvider = new function () { this.name = "MULTISELECTCOMBOBOX"; this.get = function () { return new MultiSelectComboBoxInputType(); } }(); abp.inputTypeProviders.addInputTypeProvider(MultiSelectComboBoxInputTypeProvider); })();
You input type should contain these:
name Unique name of input type
(must be same with the name you use in .cs file)init initialize function that you will get
inputTypeInfo and optionsgetView the function that returns a new view for given informations. Manager uses it to create new view for inputs getSelectedValues the functions that returns selected values array.
(it must be string array. If your input type has only one selected value return it in array for example:["selectedvalue"]
)hasValues if your input type needs values
For example single line input type does not need any predefined value but combobox needs.afterViewInitialized The function that manager will trigger after view initialized. Create
MultiSelectComboBoxInputTypeProvider
that create new input type object for each request. Then add that provider toabp.inputTypeProviders
(function () { var MultiSelectComboBoxInputTypeProvider = new function () { this.name = "MULTISELECTCOMBOBOX"; this.get = function () {//must return new object of your input type return new MultiSelectComboBoxInputType(); } }(); abp.inputTypeProviders.addInputTypeProvider(MultiSelectComboBoxInputTypeProvider);//add your input type provider to abp.inputTypeProviders })();
All done. Your custom input type is ready to use in dynamic parameter. Create new dynamic parameter which uses that input type, add it to an entity. Then you can go to manage page and use it.