Architecture

files representing the types of fields, those files are configuration-based classes, and every type extends from the Dynamic field class, which holds the general behavior of the fields, like how to load, transfo4rmations, 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

Result Body Implementation for Search Tab

This is the structure the Search tab implements, is 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.

General Properties

Applies for all field type

• field - Name of the field to process
• type - type of the dynamic field
• label - (Optional) Display label to show on the left of the value

Type Specific (Examples)

• format - for the date type field
• fullSize - for the thumbnails type field

Result Body Implementation for Search Tab

Here is 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 column