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)

Image Added

Field Type

The field types As you can see, we have files representing the types of fields, those files are configuration-based classes, and every type extends from the Dynamic dynamic field class, which holds the general behavior of the fields , like how to loadsuch as value loading, transformations, translations, highlights , …

And we also have type components, which are angular components.

Now, every tab configuration, have a structure which implements the dynamic fields. At the moment for the UI to load the config, each individual configuration will be used by the Field Factory, which will generate a field object implementing the configuration of the field.

Later the field object will be fed with the actual data, from an API response

Next the fed object will be requested by the field generator directive, which is the single point of implementation for the actual display of the fields. The directive will check if the current object needs to implement an angular component, and them generate the html for the UI

...

Configuration Sample

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 implements, and it is basically represents the body of a result, in which the body in is made from multiple arrays, where each array represents a row in the actual display of the body.

...

And inside Inside each row, there’s 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

Here is another Another structure, this one is for the metadata structure, which is simpler than the result body, in this case the metadata just displays every field in a single columna 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.