Architecture

The Tab framework consist of 3 main parts type, tab implementation, and the AppRoutes module. Different to the Dynamic Fields & Facets, the Tab framework doesn't depend entirely in the configuration like fields and facets, since all the logic is in the tab implementation; the Tab Framework is more focus in dynamic loading of the tabs, while making possible to make its behavior configurable.

Tab Type

Each Tab type holds their respective properties and constructor in charge of processing the configuration and all its parts initializing all the classes required. Every single tab must extend from base-tab which holds the general properties applicable for every tab such as type, active, display, path and others. Same as the other frameworks, the tab-factory is in charge of crating a tab object using the configuration provided, this object will be later called by the tab component implemented on construction time.

Tabs Implementation

A Tab Implementation can be seen as an entire angular page which will be access via URL, and hold inside a container, completely independent. Any connection with a service or already existent components  of the user interface is up to the developer.

AppRoute Module

The AppRopute Module is in charge of loading the paths for the user interface, in here is where the tab implementation will be refer and loaded to a router outlet, and display as part of the user interface.

Endpoint Configuration Override

The endpoint has a configuration in the server side in the endpoint.js, which will be use by default, and will be use if the API is called directly. But by implementing a new configuration in the API payload, we can override the default configuration with this new one.

For this it is necessary:

• The tab configuration most have part if not the whole endpoint configuration, for this the tab type must also support at least expect a property with the endpoint configuration (it is not need to describe the whole configuration)
• The the function for the interaction with the endpoint, normally located in the API Service (ui/src/app/shared/services/api.service.ts), must assign the configuration to the payload, this way the configuration will be sent directly to the endpoint
• The endpoint must look for this configuration in the payload and merge both configurations (endpoint.js and the one from the request), using the endpoint.js as the base

The resulting configuration will be the one used for the rest of the configuration process, and since the tab configuration is updated in real time, this means the endpoint configuration can also be updated in real time