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.

1. Go to *.Core and create a folder named CustomInputTypes.

2. Create a class named MultiSelectComboboxInputType in that folder.

   /// <summary>
   /// Multi Select Combobox value UI type.
   /// </summary>
   [Serializable]
   [InputType("MULTISELECTCOMBOBOX")]
   public class MultiSelectComboboxInputType : InputTypeBase
   { 
   }
   

   C#

   Copy

3. Go to AppDynamicEntityParameterDefinitionProvider and add new input type.

    public class AppDynamicEntityParameterDefinitionProvider : DynamicEntityParameterDefinitionProvider
   {
       public override void SetDynamicEntityParameters(IDynamicEntityParameterDefinitionContext context)
       {
          	...
           context.Manager.AddAllowedInputType<MultiSelectComboboxInputType>();
    	...
       }
   }
   

   C#

   Copy

4. Go to *.Web.Mvc\wwwroot\view-resources\Areas\AppAreaName\Views\Common\IInputTypes\ folder

5. Create 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);
   })();
   

   JavaScript

   Copy

   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 options
   getView	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.

6. Create MultiSelectComboBoxInputTypeProvider that create new input type object for each request. Then add that provider to abp.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
   })();
   

   JavaScript

   Copy

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.