mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00

[AAE-6919] add a display text form control (#7718 )

* [AAE-9373] Create adf-rich-text-editor into core library, install editorjs and import it into the component, add a basic editorjs configuration

* [AAE-9374] create a rich text editor demo page

* [AAE-9376] Install header to provide headings blocks

* [AAE-9376] Install editorjs List plugin to add ordered and unordered list

* [AAE-9376] Install text color plugin to change text color and highlight text

* [AAE-9376] Install paragraph plugin to set text alignment to right, left, center and justify

* [AAE-9376] Install font size plugin to increase/decrease font size

* [AAE-9376] Install @editorjs/underline plugin to underline text

* [AAE-9376] Install @editorjs/inline-code to marking code-fragments

* [AAE-9376] Set shortcut to underline text

* [AAE-9376] Install @editorjs/code to add code examples

* [AAE-9376] Enable custom picker to color text changer, add colors codes

* [AAE-9376] Add input to fill rich text editor data

* [AAE-9376] Demo rich text editor, add sample data to display editor content

* [AAE-9376] Demo rich text editor, add sample data to display editor content

* [AAE-9376] Install @editorjs/marker plugin to highlight the text, because color plugin doesn't save marker style

* [AAE-9373] Send editor text output data onReady and onChange

* [AAE-9374] Update editor demo page to show the output on the right side of the page

* [AAE-9373] Allow to enable editorjs readOnly mode

* [AAE-9373] Return rich text editor save data as promise

* [AAE-9480] Add new display-rich-text widget to allow the user add Rich Text into a form

* [AAE-9371] Add readonly class if readOnly property is true to remove the editor 300px padding bottom in readonly mode, set a dynamic id to editorjs

* [AAE-9371] Destroy editorInstance on component destroy to FIX an error faced when there are multiple editorjs instance in the same page --> Uncaught TypeError: Cannot read property 'updateCurrentInput' of undefined

* [AAE-9480] Install editorjs-html utility to parse editorjs clean data to HTML

* [AAE-9480] parse editorjs data to HTML to avoid to create a new EditorJS instance for every single widget and improve performance

* [AAE-9480] Set pre styles to show show Code block styles correctly

* [AAE-9480] Remove space between rules

* [AAE-9480] Set editorjs and plugins fixed versions

* [AAE-9480] Removed unused editorjs dependency

* [AAE-9371] Set is ready property when editor instance is ready, check if is ready to destroy the instance on component destroy

* [AAE-9480] Add parse editorjs data to html Test

* [AAE-9371] Send rich-text-editor component data only if readOnly mode is false

* [AAE-9480] Test if display-rich-text widget is resolved

* [AAE-9480] Rename DisplayRichTextComponent into DisplayRichTextWidgetComponent to be compliant with other widget component names

* [AAE-9480] update Readme files with DisplayRichTextWidgetComponent

* [AAE-9371] Update header text

* [AAE-9371] Add Rich text editor component usage documentation

* [AAE-9480] Add padding to the widget container

* [AAE-9371] Remove plugin that align pragraph text since editorjs-html parser doesn't handle paragraph alignment

* [AAE-9371] Set editor autofocus to true

* [AAE-9480] Add a display-rich-text widget example to demo cloud form

* [AAE-9371] Fix lint issue

* [AAE-9371] Remove duplicated import to fix import module issue in a lib build job

2022-07-26 12:36:08 +02:00

4.8 KiB

Raw Blame History

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Form field component	v2.0.0	Active	2018-11-20

Form field component

Represents a UI field in a form.

Basic Usage

All form field editors (aka widgets) on a Form are rendered by means of a FormFieldComponent that takes an instance of a FormFieldModel:

<adf-form-field [field]="field"></adf-form-field>

This component depends on the FormRenderingService to map the FormFieldModel to a Form Field UI component based on the field type or the metadata information.

Class members

Properties

Name	Type	Default value	Description
field	`FormFieldModel`	null	Contains all the necessary data needed to determine what UI Widget to use when rendering the field in the form. You would typically not create this data manually but instead create the form in APS and export it to get to all the `FormFieldModel` definitions.

Details

You would typically not use this component directly but instead use the <adf-form> component, which under the hood uses <adf-form-field> components to render the form fields.

Field Type -> Form Field Component mappings

Forms defined in APS have the following default mappings for the form fields:

APS `Form` Designer `Widget`	Field Type	Component Type
Text	text	`TextWidgetComponent`
Multi-line text	multi-line-text	`MultilineTextWidgetComponentComponent`
Number	integer	`NumberWidgetComponent`
Checkbox	boolean	`CheckboxWidgetComponent`
Date	date	`DateWidgetComponent`
Dropdown	dropdown	`DropdownWidgetComponent`
Typeahead	typeahead	`TypeaheadWidgetComponent`
Amount	amount	`AmountWidgetComponent`
Radio buttons	radio-buttons	`RadioButtonsWidgetComponent`
People	people	`PeopleWidgetComponent`
Group of people	functional-group	`FunctionalGroupWidgetComponent`
Dynamic table	dynamic-table	`DynamicTableWidgetComponent`
Hyperlink	hyperlink	`HyperlinkWidgetComponent`
Header	group	`ContainerWidgetComponent`
Attach File	upload	AttachWidgetComponent or `UploadWidgetComponent` (based on metadata)
Display value	readonly	`TextWidgetComponent`
Display text	readonly-text	`DisplayTextWidgetComponent`
Display Rich text	display-rich-text	`DisplayRichTextWidgetComponent`
N/A	container	`ContainerWidgetComponent` (layout component)
N/A	N/A	`UnknownWidgetComponent`

4.8 KiB Raw Blame History