Architecture

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 field class, which holds the general behavior of the fields, like how to load, 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

Result Body Implementation for Search Tab

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

And inside each row, there’s one or multiple field configurations, each one with its properties,

• generic like the field, type or label property;
• or type specific like it is the format property for the date 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