DynamicForms

This angular library is built to facilitate the creation of forms, particularly when integrating them with a Dynamics365 backend. The components in this package are built to read the metadata from the Dynamics environment and will correctly assign the label, type and default value to the field created.

I created this library as a consequence of repeating a lot of the coding for the forms as well as the linking to Dynamics. Keep in mind that this is still an Alpha library and it evolves with requirements and feedback. It currently does not support any means of communication with the Dynamics365 environment, which needs to be implemented separately for each application (new library coming soon to cover this requirement).

Note: This version relies on @Syncfusion angular components for the visuals.

Fields

There are currently a limited number of form fields supported:

• Text
• Date
• Dropdowns
• Checkbox

Usage

Simply create an instance of the FormSection component and provide a Field configuration array.

example.component.html

<form [formGroup]="FormGroup">
  <df-form-section [formGroup]="FormGroup" [FieldConfigs]="Config"></df-form-section>
</form>

example.component.ts

FormGroup: FormGroup = new FormGroup({});
  Config: IFieldConfig<any>[] = [
    new TextField('textfield', 'Text Field', [Validators.required, Validators.minLength(6)]),
    new CheckBox('checkbox', 'Checkbox', Validators.requiredTrue),
    new DropDown('dropdown', 'Drop Down', [
      { Value: 1, Label: '1' },
      { Value: 2, Label: '2' },
      { Value: 3, Label: '3' },
    ]),
  ];

Example overriding the field label when using dynamics linked controls. attributeMetadata is of type Attribute, usually retrieved by the web api or application backend.

FormGroup: FormGroup = new FormGroup({});
  Config: IFieldConfig<any>[] = [
    new DynamicsTextField(attributeMetadata, [Validators.required, Validators.minLength(6)], "value", "Custom label"),
    new DynamicsDropDown(attributeMetadata, [], value, "Custom label"),
  ];

Usage of number field and currency controls

FormGroup: FormGroup = new FormGroup({});
  Config: IFieldConfig<any>[] = [
    new NumberField('integer', 'Integer', [], 10),
    new NumberField('decimal', 'Decimal', [], 10, 3),
    new NumberField('money', 'Money', [], 10, 2, '$'),
    new DynamicsNumberField(this.numberAttribute, null, 1),
    new DynamicsNumberField(this.numberAttribute, null, 1, 'Label', '$'),
  ];

Changelog

Version 0.2.0

• Added Number Field
• Added Dynamics Number Field

Version 0.1.0

• Added Multi Select Optionset control

Version 0.0.5

• Added possibility to override label when using Dynamics linked controls

Version 0.0.4

• Simplified directive to create dynamic fields
• Added ability to use Angular validators (built-in and custom)

Version 0.0.3

• Removed redundant property for the field configurations
• Added JsDocs to the code

Version 0.0.2

• Added Dynamics bound fields

Version 0.0.1

• Initial version containing base fields