Architecture

The dynamic fields framework consist of 3 main parts type, component, and the field generator directive, all working with the configuration provided by an external resource (normally the tab configuration)

Field Type

The field types are configuration-based classes, every type extends from the dynamic field class, which holds the general behavior of the fields such as value loading, transformations, translations, highlights and more. Each new type can implement their own properties and overwrite default behavior, like the value loading.

Every field type is implemented by the field factory when it receives a configuration, using this configuration the field factory will create a field object (an instance of the type), which holds the value and behavior of the field type. This field object is fed with an object holding the values (for example a result object), the field object will look for its corresponding field inside this object and load the value of it.

Field Component

The field component is not necessary for the display of the data, but sometime a component with its own html and style is require to achieve the desire visualization. The components will be implemented by the field generator upon receiving a field object.

Field Generator Directive

The field generator is in charge of the correct implementation of each dynamic field in the user interface. It will received a field object and determine if the current object requires the implementation of a field component, otherwise it builds a simple html instead. In case a field component for the current field object exist, it will proceed to implement the component and feed it with the field object.

The field generator, if the only point interaction between the dynamic fields and the html of the user interface, any use of the dynamic fields requires to add the directive in the desired place in the html.

Configuration Sample

Dynamic fields only requires the configuration of a single dynamic field, where that field is store and in which structure will display are out of the scope of the framework. This means the structures holding the configuration and the structure holding the field generator directive are not constrain to a specific schema. In this section some examples with different implementations, demonstrating how each schema is translated into its visual form

Result Body Implementation for Search Tab

This is the structure belongs to the Search tab, and it represents the body of a result, which is made from multiple arrays, where each array represents a row in the actual display of the body.

Inside each row, there is one or multiple dynamic field configurations, each one with its properties, some general and other specific to the type.

Result Body Implementation for Search Tab

Another structure, this one is for the metadata structure, which is a single column displaying the fields one after another, additional configuration was added to manage the order of the fields, but this only works over and array of field object sorting them based on the label display.