Dynamic Components

Most of the HTML generated for the client is rendered using Dynamic Components. A dynamic component is stored as a document in aeppic and gets converted into the appropriate javascript component to generate the necessary HTML.

Types

Name	Scope	Comments
Design	Render a document	title design to render a document as a 'title'
Control (Field)	Render the input/output of a specific field (or more) of a document	text to render a text input field
Control (Standalone)	Render something with access to an editable document without explicitely being bound to one field	comments to allow commenting bound to a document
Layout	Free component to render arbitrary content	Used for the application root layout or fields

TIP

Rendering of forms makes use of many dynamic components which is in described here.

Design

Designs render documents in order to show them in context of other document. Mostly this is

Layout

Layout is a very versatile dynamic component and should be used lightly only when it makes sense.

It is for example used during Form rendering to allow adjusting the style of forms without loosing the benefits of an automatically generated form.

It is also used for the entry point of the entire html page with the root layout which is referenced in the root document. It is the first thing being rendered and it decides what to do.

NOTE: Routes set on root influence which layout gets rendered initially.

Rendering

Whenever e.g. an ae-layout is used the ae-layout-selector component goes ahead and asks Aeppic.DynamicComponents to ensure the component is available and what the component's id is. This gets then used with a <component :is="..." ...> with all attributes and parameters forwarded to it.

Each dynamic component has at least four inputs into the rendering process taken from the respective component's document

Type	Description
HTML Template	The HTML template is parsed using vue. Currently using v2 of vue.
CSS Stylesheet	The CSS stylesheet is parsed via less and injected into the page
Controller Code	The controller code is slightly reformatted and injected into the vue template
Packages	Packages are packaged dependencies which provide components and/or functions to use