Skip to content

Commit 32aa317

Browse files
ismcagdasismcagdas
committed
Merge branch 'dev' of https://github.com/aspnetzero/documents into dev
2 parents 6505a5e + ac36787 commit 32aa317

4 files changed

+286
-0
lines changed

‎docs/en/Feature-Dynamic-Entity-Parameters-Custom-Input-Types-Angular.md

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
2+
3+
# Create Custom Input Types
4+
5+
In this document we will create a custom input type step by step. Our input type is multi-select combobox input type.
6+
7+
1. Go to `*.Core` and create a folder named `CustomInputTypes`.
8+
9+
2. Create a class named `MultiSelectComboboxInputType` in that folder.
10+
11+
```csharp
12+
/// <summary>
13+
/// Multi Select Combobox value UI type.
14+
/// </summary>
15+
[Serializable]
16+
[InputType("MULTISELECTCOMBOBOX")]
17+
public class MultiSelectComboboxInputType : InputTypeBase
18+
{
19+
}
20+
```
21+
22+
3. Go to `AppDynamicEntityParameterDefinitionProvider` and add new input type.
23+
24+
```csharp
25+
public class AppDynamicEntityParameterDefinitionProvider : DynamicEntityParameterDefinitionProvider
26+
{
27+
public override void SetDynamicEntityParameters(IDynamicEntityParameterDefinitionContext context)
28+
{
29+
...
30+
context.Manager.AddAllowedInputType<MultiSelectComboboxInputType>();
31+
...
32+
}
33+
}
34+
```
35+
36+
4. Go to `angular\src\app\shared\common\input-types` folder
37+
38+
5. Create new component named `MultiSelectComboboxInputTypeComponent` as seen below.
39+
40+
```bash
41+
ng g component multi-select-combobox-input-type
42+
```
43+
44+
*multi-select-combobox-input-type.component.html*
45+
46+
```typescript
47+
import { Component, OnInit, Injector } from '@angular/core';
48+
import { InputTypeComponentBase } from '../input-type-component-base';
49+
50+
@Component({
51+
templateUrl: './multi-select-combobox-input-type.component.html'
52+
})
53+
export class MultiSelectComboboxInputTypeComponent extends InputTypeComponentBase implements OnInit {
54+
filteredValues: string[];
55+
56+
constructor(
57+
injector: Injector,
58+
) {
59+
super(injector);
60+
}
61+
62+
ngOnInit() {
63+
this.filteredValues = this.allValues;
64+
}
65+
66+
getSelectedValues(): string[] {
67+
debugger;
68+
if (!this.selectedValues) {
69+
return [];
70+
}
71+
return this.selectedValues;
72+
}
73+
74+
filter(event) {
75+
this.filteredValues = this.allValues
76+
.filter(item =>
77+
item.toLowerCase().includes(event.query.toLowerCase())
78+
);
79+
}
80+
}
81+
```
82+
83+
*multi-select-combobox-input-type.component.html*
84+
85+
```html
86+
<p-autoComplete [(ngModel)]="selectedValues" [suggestions]="filteredValues" (completeMethod)="filter($event)" [minLength]="1" [multiple]="true" inputStyleClass="form-control" styleClass="w-100">
87+
</p-autoComplete>
88+
```
89+
90+
You must extend `InputTypeComponentBase`. Since you extend `InputTypeComponentBase` your component will have **selectedValues**(initial stored selected values), **allValues**(all values that your component can have, if your component needs initial values.)
91+
92+
93+
94+
6. Then go to `angular\src\app\shared\common\input-types\input-type-configuration.service.ts` and add your input type.
95+
96+
```typescript
97+
export class InputTypeConfigurationService {
98+
...
99+
private initialize(): void {
100+
...
101+
102+
let multiselectComboBoxInputType = new InputTypeConfigurationDefinition(
103+
'MULTISELECTCOMBOBOX',
104+
MultiSelectComboboxInputTypeComponent,
105+
true//is that input type need values to work. For example dropdown need initial values to select.
106+
);
107+
108+
this.InputTypeConfigurationDefinitions.push(multiselectComboBoxInputType);
109+
}
110+
...
111+
}
112+
113+
114+
```
115+
116+
7. Go to `angular\src\app\shared\common\app-common.module.ts` and add your component to entryComponents:
117+
118+
```typescript
119+
@NgModule({
120+
...
121+
declarations: [
122+
...
123+
MultipleSelectComboboxInputTypeComponent
124+
],
125+
...,
126+
entryComponents: [
127+
...
128+
MultipleSelectComboboxInputTypeComponent
129+
]
130+
})
131+
```
132+
133+
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.
134+
135+
![custom-input-type-multi-select-combobox-mvc](images\custom-input-type-multi-select-combobox-angular.png)

‎docs/en/Feature-Dynamic-Entity-Parameters-Custom-Input-Types-Mvc.md

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
2+
3+
# Create Custom Input Types
4+
5+
In this document we will create a custom input type step by step. Our input type is multi-select combobox input type.
6+
7+
1. Go to `*.Core` and create a folder named `CustomInputTypes`.
8+
9+
2. Create a class named `MultiSelectComboboxInputType` in that folder.
10+
11+
```csharp
12+
/// <summary>
13+
/// Multi Select Combobox value UI type.
14+
/// </summary>
15+
[Serializable]
16+
[InputType("MULTISELECTCOMBOBOX")]
17+
public class MultiSelectComboboxInputType : InputTypeBase
18+
{
19+
}
20+
```
21+
22+
3. Go to `AppDynamicEntityParameterDefinitionProvider` and add new input type.
23+
24+
```csharp
25+
public class AppDynamicEntityParameterDefinitionProvider : DynamicEntityParameterDefinitionProvider
26+
{
27+
public override void SetDynamicEntityParameters(IDynamicEntityParameterDefinitionContext context)
28+
{
29+
...
30+
context.Manager.AddAllowedInputType<MultiSelectComboboxInputType>();
31+
...
32+
}
33+
}
34+
```
35+
36+
4. Go to `*.Web.Mvc\wwwroot\view-resources\Areas\AppAreaName\Views\Common\IInputTypes\` folder
37+
38+
5. Create new javascript file named `MultiSelectComboboxInputType.js` and fill required functions.
39+
40+
```javascript
41+
var MultiSelectComboBoxInputType = (function () {
42+
return function () {
43+
var _options;
44+
function init(inputTypeInfo, options) {
45+
_options = options;
46+
}
47+
var $combobox;
48+
function getView(selectedValues, allItems) {
49+
$combobox = $('<select class="form-control w-100" multiple/>');
50+
51+
if (allItems && allItems.length > 0) {
52+
for (var i = 0; i < allItems.length; i++) {
53+
var $option = $('<option></option>')
54+
.attr('value', allItems[i])
55+
.text(allItems[i]);
56+
57+
if (selectedValues && selectedValues.length > 0 && selectedValues.indexOf(allItems[i]) !== -1) {
58+
$option.attr("selected", "selected");
59+
}
60+
61+
$option.appendTo($combobox);
62+
}
63+
}
64+
65+
$combobox
66+
.on('change', function () {
67+
if (_options && typeof (_options.onChange) === "function") {
68+
_options.onChange($combobox.val());
69+
}
70+
});
71+
return $combobox[0];
72+
}
73+
74+
function getSelectedValues() {
75+
return $combobox.val();
76+
}
77+
78+
function afterViewInitialized() {
79+
$combobox.select2({ width: '100%' });
80+
}
81+
82+
return {
83+
name: "MULTISELECTCOMBOBOX",
84+
init: init,
85+
getSelectedValues: getSelectedValues,
86+
getView: getView,
87+
hasValues: true,//is that input type need values to work. For example dropdown need values to select.
88+
afterViewInitialized: afterViewInitialized
89+
};
90+
};
91+
})();
92+
93+
(function () {
94+
var MultiSelectComboBoxInputTypeProvider = new function () {
95+
this.name = "MULTISELECTCOMBOBOX";
96+
this.get = function () {
97+
return new MultiSelectComboBoxInputType();
98+
}
99+
}();
100+
101+
abp.inputTypeProviders.addInputTypeProvider(MultiSelectComboBoxInputTypeProvider);
102+
})();
103+
```
104+
105+
You input type should contain these:
106+
107+
<table>
108+
<tbody>
109+
<tr>
110+
<th>name</th>
111+
<td>Unique name of input type <br/>(must be same with the name you use in .cs file)</td>
112+
</tr>
113+
<tr>
114+
<th>init</th>
115+
<td>initialize function that you will get <br/><a href="https://github.com/aspnetboilerplate/aspnetboilerplate/blob/dev/src/Abp/UI/Inputs/IInputType.cs">inputTypeInfo</a> and options</td>
116+
</tr>
117+
<tr>
118+
<th>getView</th>
119+
<td>the function that returns a new view for given informations. Manager uses it to create new view for inputs</td>
120+
</tr>
121+
<tr>
122+
<th>getSelectedValues</th>
123+
<td>the functions that returns selected values array.<br/> (it must be string array. If your input type has only one selected value return it in array for example:<code>["selectedvalue"]</code>)</td>
124+
</tr>
125+
<tr>
126+
<th>hasValues</th>
127+
<td>if your input type needs values <br/> For example single line input type does not need any predefined value but combobox needs.</td>
128+
</tr>
129+
<tr>
130+
<th>afterViewInitialized</th>
131+
<td>The function that manager will trigger after view initialized.</td>
132+
</tr>
133+
</tbody>
134+
135+
6. Create `MultiSelectComboBoxInputTypeProvider` that create new input type object for each request. Then add that provider to `abp.inputTypeProviders`
136+
137+
```javascript
138+
(function () {
139+
var MultiSelectComboBoxInputTypeProvider = new function () {
140+
this.name = "MULTISELECTCOMBOBOX";
141+
this.get = function () {//must return new object of your input type
142+
return new MultiSelectComboBoxInputType();
143+
}
144+
}();
145+
abp.inputTypeProviders.addInputTypeProvider(MultiSelectComboBoxInputTypeProvider);//add your input type provider to abp.inputTypeProviders
146+
})();
147+
```
148+
149+
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.
150+
151+
![custom-input-type-multi-select-combobox-mvc](images\custom-input-type-multi-select-combobox-mvc.png)

‎docs/en/images/custom-input-type-multi-select-combobox-angular.png

5.47 KB
Loading

‎docs/en/images/custom-input-type-multi-select-combobox-mvc.png

5.26 KB
Loading

0 commit comments

Comments
 (0)