Skip to main content

User Interface

The user interface within a NS applicationNS Application (NSApplication). A pre-built software stack that provides common enterprise application functionality such as CRUD, search, authentication, and business process modeling out of the box. is fully generated based on your data elementsData Element (DataElement). A fundamental data concept or entity within an application's domain, acting as an anthropomorphic translation of a real-life object or concept., relationships, defined actions, fieldsFieldA property of a DataElement expanded to a database column and user interface input element. (and their type).

Following main UI components are rendered for each element:

  • A table view to list all instances of a data elementData Element (DataElement). A fundamental data concept or entity within an application's domain, acting as an anthropomorphic translation of a real-life object or concept.
  • A detail view to add, view or edit the fieldsFieldA property of a DataElement expanded to a database column and user interface input element. of an element
  • Buttons and forms to execute data operationsData Operation (DataOperation). A type-safe action (e.g., Create, Update, Custom) executed on DataElement instances to modify data or trigger business logic.
  • A menu to navigate to data elementsData Element (DataElement). A fundamental data concept or entity within an application's domain, acting as an anthropomorphic translation of a real-life object or concept.
  • Input fieldsFieldA property of a DataElement expanded to a database column and user interface input element. to search and filter
A default screen

How the user interface is built​

The user interface is an Angular Single Page App. It is expanded as a separate applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution. next to the NS applicationNS Application (NSApplication). A pre-built software stack that provides common enterprise application functionality such as CRUD, search, authentication, and business process modeling out of the box., and has its own model which hooks into the existing Elements model. It communicates with the backend through a REST API, so the NS applicationNS Application (NSApplication). A pre-built software stack that provides common enterprise application functionality such as CRUD, search, authentication, and business process modeling out of the box. needs a control layerLayerLogical separation of functionality within a single system/application, focused on code organization. that exposes one.

See Angular Single Page App for its model and how it is structured.

Customizing the user interface​

The presentation layerLayerLogical separation of functionality within a single system/application, focused on code organization. of your applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution. is often subject to many opinions and changes. In some cases the generated screen might not be a fit for your requirement.

The generated screens can be adjusted in several ways:

  1. Model options change what is generated, such as which fieldsFieldA property of a DataElement expanded to a database column and user interface input element. appear as table columns.
  2. Custom code can be added in two ways: in the custom anchorsAnchorA marker within generated source code reserved for adding custom logic during re-expansion. of the expanded files, or as your own files in the folders that allow it.
  3. Overriding defaults: parts of the generated layout and styling are expanded as defaults, which can be replaced with a project-specific expanderExpanderA unit of generation that combines a data tree instance (functional M1 model) with a template to generate an artifact. or through model options, such as the sidebar, the layout of the complete project, or the CRUD pages.

Some of these options are set on the data model itself rather than on the frontend. The columns of a table, for example, are defined by the info projectionProjectionA tailored subset of fields on a DataElement designed to encapsulate data for a specific technical or functional view. of the data elementData Element (DataElement). A fundamental data concept or entity within an application's domain, acting as an anthropomorphic translation of a real-life object or concept..