Entity User Interface

A powerful, customizable data grid component for displaying, sorting, filtering, and manipulating entity data with rich cell renderers and interactive features.

📄 Overview

The DataTable is a highly configurable, enterprise-grade data grid component built on AG Grid. It handles large datasets efficiently and provides rich interaction capabilities including sorting, filtering, pagination, and row actions.

DataTables can be embedded in pages or used as standalone components, with full support for entity relationships, custom cell renderers, and user preference persistence.

Important

DataTables maintain user preferences for column width, position, and visibility per table instance. Each table must have a unique tableId property to properly save these preferences.

🔧 Cell Renderers

Cell renderers format and display cell content based on data type, enhancing both visual presentation and user interaction.

Basic Renderers

Renderer	Data Types	Description
Text	String, Numbers	Default renderer for string and numeric content
Checkbox	Boolean	Checkbox representation of boolean values
Switch	Boolean	Toggle switch representation of boolean values
Date	DateOnly	Formatted date display (no time component)
Time	TimeOnly	Formatted time display
DateTime	DateTime	Formatted date and time display

Special Renderers

Renderer	Data Types	Description	Parameters
Object	Relationship	Displays linked entity with formatting and links	Entity, TitleField
File	File	File download with preview capability	-
User	User	User display with formatted name and optional avatar	-
Role	Role	Role display with proper formatting	-
Address	Address	Address with map preview support	-

⚙️ Filtering & Sorting

DataTables support powerful filtering and sorting capabilities with various filter types and customizable sort options.

Filter Types

Filter	Data Types	Description
Text	String	Full-text search across specified fields
Number	Numeric	Numeric range with equality/less than/greater than
Date	Date/DateTime	Date range picker
Bool	Boolean	Boolean selection (true/false/both)
List	Any	Server-side Entity Filter functions that perform specialized filtering

Sorting Options

Sorting options define predefined sorting configurations that users can select, including:

Property	Type	Description
Id	String	Unique identifier for the sorting option
Title	String	Display name for the option
Expression	String	OData-compatible sort expression (e.g., "CreatedAt desc")
Default	Boolean	Whether this is the default sorting option
Tags	Array	Metadata tags for sorting option

A Vue 3 component for displaying structured entity data with Vuetify (v3.7.5).

📄 Overview

The DataCard is a Vue 3 component that leverages Vuetify layout primitives (e.g., v-row, v-col) and custom rendering components to display structured entity data.

It is composed of Vuetify layout elements and field-specific components, allowing flexible and customizable data presentation.

Important

The item variable is reserved in the DataCard environment and represents the main entity object being displayed.

✅ Basic Usage

Display entity fields using the e-field component with custom renderers like e-role or e-date.


<e-field label="Name" :has-value="item.Name">
    {{ item.Name }}
</e-field>

<e-field label="Role" :has-value="item.Role">
    <e-role :value="item.Role" />
</e-field>

<e-field label="Created" :has-value="item.CreatedAt">
    <e-date :value="item.CreatedAt" />
</e-field>

🔧 Custom Rendering Components

Custom rendering components allow tailored display of fields within a DataCard. Each field type has a default renderer, which can be overridden with custom components.

e-field

Displays a labeled field and its content, showing fallback text (e.g., N/A) when no value is provided.

Prop	Type	Description
hasValue	Boolean	Required. If false, shows `N/A`.
inline	Boolean	Default: false. Displays fields on one line.
label	String	Field label text.
labelWidth	String	Label width when `inline` is true.
noGutters	Boolean	Default: false. Removes gutters between label and field.

Example

Inline field with custom label width and no gutters.


<e-field :has-value="item.Name" label="Name" inline label-width="120px" no-gutters>
    {{ item.Name }}
</e-field>

e-object

Displays a link to the entity’s detail page and shows the chosen field value.

Prop	Type	Description
entity	String	Required. Name of entity to render.
itemTitle	String	Field name to use as item title.
value	Any	Value to render; defaults to `item`.

Example

Render a Company entity with its name as the title.


<e-object entity="Company" :value="item.Company" itemTitle="name" />

e-object-list

Renders a list of objects via e-object, with optional flex layout and visual separators.

Prop	Type	Description
entity	String	Required. Name of entity for list rendering.
itemTitle	String	Field name for item titles.
subpath	String	Field name in the list entity for many-to-many relationships.
value	Any	Array or list of values to render.

Example (One-to-Many)

Display a list of contact persons.


<e-object-list entity="ContactPerson" :value="item.ContactPersons" itemTitle="FullName" />

Example (Many-to-Many)

Display a list of projects in a many-to-many relationship.


<e-object-list entity="Project" :value="item.ProjectTeam" itemTitle="ProjectTitle" subpath="Project" />

e-role / e-user

Displays a link to the role or user detail page and shows its name.

Prop	Type	Description
value	Object	Role or user object to render.

Example (e-role)

Render a role.


<e-role :value="item.WatcherRole" />

Example (e-user)

Render a user.


<e-user :value="item.Manager" />

e-time / e-date / e-datetime

Formats and displays a date or time string according to user settings.

Prop	Type	Description
value	String	Date or time string to render.

Example (e-time)

Render a time string.


<e-time value="item.Time" />

Example (e-date)

Render a date string.


<e-date value="item.Date" />

Example (e-datetime)

Render a datetime string.


<e-datetime value="item.DateTime" />

e-file / e-address

e-file: Shows a download button and file name, opening a preview or download dialog when clicked.
e-address: Displays an address with a map icon and opens a map popup.

Prop	Type	Description
value	Object	File or address object to render.

Example (e-file)

Render a file with download functionality.


<e-file :value="item.File1" />

Example (e-address)

Render an address with a map popup.


<e-address :value="item.CompanyLocation" />

e-entity-data-card

Loads and displays a configured Data Card template for the specified entity.

Prop	Type	Description
item	Object	Required. Object to render.
entity	String	Required. Entity name.
cardName	String	Required. Name of the card template.
forceReload	Boolean	Force reloading the object using card settings.

Example (Full Object)

Render a Beneficiary entity using a card template.


<e-entity-data-card card-name="BeneficiaryCardEn" :item="item" entity="Beneficiary" />

Example (Load by ID with forceReload)

Load a Beneficiary by ID with forced reload.


<e-entity-data-card card-name="BeneficiaryCardEn" :item="{ Id: 'some_id' }" entity="Beneficiary" force-reload />

e-object-hierarchy

Displays hierarchical relationships between entities in various formats (breadcrumb, chips, compact, menu).

Prop	Type	Description
value	Object	Required. The object containing hierarchical data.
config	Object	Required. Configuration object defining the hierarchy structure.
variant	String	Display variant: 'breadcrumb' (default), 'chips', 'compact', 'menu'.
showLabels	Boolean	Show entity labels/names. Default: false.
reverse	Boolean	Reverse the display order. Default: false.

Configuration Structure

The config object defines the hierarchy with entity names and parent relationships.


{
    entity: 'Office',
    label: 'Office',
    parent: {
        field: 'Department',
        entity: 'Department',
        label: 'Department',
        parent: {
            field: 'Division',
            entity: 'Division',
            label: 'Division',
            parent: {
                field: 'Company',
                entity: 'Company',
                label: 'Company'
            }
        }
    }
}

Example (Breadcrumb - Organization Structure)

Display office location hierarchy as breadcrumbs.


<e-object-hierarchy 
    :value="item.Office" 
    :config="officeHierarchyConfig"
/>
<!-- Output: Acme Corp > Sales Division > Northeast Department > Boston Office -->

Example (Chips - Product Categories)

Display product category hierarchy as chips with labels.


<e-object-hierarchy 
    :value="item.Product" 
    :config="{entity: 'Product', parent: { field: 'Subcategory', entity: 'ProductSubcategory', parent: { field: 'Category', entity: 'ProductCategory'}}}"
    variant="chips"
    show-labels
/>
<!-- Output: [Electronics] [Computers] [Laptops] -->

Example (Compact - Store Location)

Display store location with full hierarchy in tooltip.


<e-object-hierarchy 
    :value="item.Store" 
    :config="{entity: 'Store', parent: { field: 'City', entity: 'City', parent: { field: 'State', entity: 'State', parent: { field: 'Country', entity: 'Country'}}}}"
    variant="compact"
/>
<!-- Output: Miami Beach Store (hover shows: USA > Florida > Miami > Miami Beach Store) -->

e-entity-data-table-card

Loads and displays a configured Data Table Card for the specified entity, supporting pagination, filtering, and CRUD actions.

Prop	Type	Description
entity	String	Required. Entity for table rendering.
tableId	String	Required. Unique table identifier for user preferences.
title	String	Table title.
height	String	Fixed table height.
maxHeight	String	Maximum table height.
allowView	Boolean	Default: true. Allow viewing items.
allowEdit	Boolean	Default: true. Allow editing items.
allowCreate	Boolean	Default: true. Allow creating new items.
allowDelete	Boolean	Default: true. Allow deleting items.
newItemFormName	String	Form name for creating new items.
editItemFormName	String	Form name for editing items.
viewCardName	String	Card name for viewing item details.
dataTableName	String	Alternative table name.
parent	Object	Parent object used for filtering.
parentField	String	Field in entity to filter by parent.
m2mEntity	String	Many-to-many relationship entity.
hideTags	Array	Tags to hide based on configuration.

Example (One-to-Many)

Display a table of department budgets filtered by a parent department.


<e-entity-data-table-card
    entity="DepartmentBudget"
    title="Department Budgets"
    table-id="department-budgets-table"
    parent-field="Department"
    :parent="item"
    max-height="500px"
/>

Example (Many-to-Many)

Display a table of enrolled courses for a student in a many-to-many relationship.


<e-entity-data-table-card
    entity="Course"
    m2m-entity="StudentCourseEnrollment"
    title="Enrolled Courses"
    table-id="student-courses-table"
    parent-field="StudentEnrollments"
    :parent="item"
    height="400px"
    :allow-delete="false"
    :allow-edit="true"
/>

A Vue 3 component for rendering and editing entity objects with Vuetify (v3.7.5).

📄 Overview

The DataForm is a reusable Vue 3 component built with Vuetify and custom input components. It enables seamless rendering and editing of entity objects, supporting dynamic data binding and form validation.

🔗 Field Binding Types

DataForm inputs use v-model to bind to different data sources. Selecting the appropriate binding type ensures correct editing and saving functionality.

item.FieldName: Binds to entity object fields loaded from the server. These values are saved upon form submission.
formData.VarName: Temporary variables for form logic, such as selections or conditional values. Not saved to the entity.
varName: User-defined variables in the <script setup> block for advanced logic or standalone values.

🎨 Custom Input Components

Custom input components are designed for specific data types. Use them with v-model="item.Field" and display errors with :error-messages.

e-role-i

Prop	Type	Description
modelValue	Object	Required. The selected role.
errors	Array	Field-specific error messages.

e-user-i

Prop	Type	Description
modelValue	Object	Required. The selected user.
errors	Array	Field-specific error messages.

e-date-i

Prop	Type	Description
modelValue	String	Date in `YYYY-MM-DD` format.
id	String	Optional input ID.

e-datetime-i

Prop	Type	Description
modelValue	String	Date and time string.
id	String	Optional input ID.

e-time-i

Prop	Type	Description
modelValue	String	Time string.
id	String	Optional input ID.

e-select

Supports single/multiple selections and hierarchical filtering.

Prop	Type	Description
entity	String	Required. Entity name to select from.
modelValue	Object \| Array	Selected value(s).
errors	Array	Field-specific error messages.
item-title	String	Default: `Name`. Field to display.
type	String	Default: `Select`. Options: `Select` (`v-select`), `Autocomplete` (`v-autocomplete`), `Combobox` (`v-combobox`).
multiple	Boolean	Enables multiple selection.
filterby-field	String	Filters list by another field.
filterby-value	-	Value to filter by.
initial-from	-	Initial value when editing.

📂 e-select Examples

Hierarchical Selection

Cascading dropdowns where selecting a Country filters States, and selecting a State filters Cities.


<v-row>
    <v-col>
        <e-select
            v-model="formData.country"
            label="Country"
            entity="Country"
            :initial-from="item.address?.state?.country"
            item-title="Name"
        />
    </v-col>
</v-row>
<v-row>
    <v-col>
        <e-select
            v-model="formData.state"
            label="State"
            entity="State"
            :disabled="!formData.country"
            filterby-field="Country"
            :filterby-value="formData.country"
            :initial-from="item.address?.state"
            item-title="Name"
        />
    </v-col>
</v-row>
<v-row>
    <v-col>
        <e-select
            v-model="item.city"
            label="City"
            entity="City"
            :disabled="!formData.state"
            filterby-field="State"
            :filterby-value="formData.state"
            :error-messages="errors['city']"
            item-title="Name"
        />
    </v-col>
</v-row>

Many-to-Many Relationship

Select multiple categories for a product using multiple="true" and type="Autocomplete".


<e-select
    v-model="item.ProductCategoryAssignments"
    label="Categories"
    entity="ProductCategoryAssignment"
    ref-field="Category"
    :type="'Autocomplete'"
    :multiple="true"
    item-title="Name"
    :errors-messages="errors['ProductCategoryAssignments']"
/>

e-hierarchy-i

Input component for selecting hierarchical data with two display variants: table view and cascade dropdowns.

Prop	Type	Description
modelValue	Object	Selected hierarchical item.
label	String	Required. Field label.
config	Object	Required. Configuration object defining the hierarchy structure.
variant	String	Display variant: 'table' (default) or 'cascade'.
readonly	Boolean	Makes the field read-only. Default: false.
errorMessages	Array	Field-specific error messages.
newItemForm	String	Form name for creating new items.
newItemFormData	Object	Additional data for the new item form.
newItemTemplate	Object	Template data for new items.

🗂️ e-hierarchy-i Examples

Configuration Structure

The config object defines the hierarchy starting from the leaf entity and specifying parent relationships.


<!-- Example: City within State within Country -->
<e-hierarchy-i
    v-model="item.City"
    label="City"
    :config="{
        entity: 'City',
        label: 'City',
        parent: {
            field: 'State',
            entity: 'State',
            label: 'State',
            parent: {
                field: 'Country',
                entity: 'Country',
                label: 'Country'
            }
        }
    }"
    :error-messages="errors['City']"
/>

Table Variant (Default)

Displays all hierarchical options in a searchable table with columns for each level. Users can search across all levels and see the full hierarchy at once.


<e-hierarchy-i
    v-model="item.Store"
    label="Store Location"
    :config="{
        entity: 'Store',
        label: 'Store',
        parent: {
            field: 'District',
            entity: 'District',
            label: 'District',
            parent: {
                field: 'Region',
                entity: 'Region',
                label: 'Region'
            }
        }
    }"
    variant="table"
    :error-messages="errors['Store']"
/>

Features:

Full-text search across all hierarchy levels
Sortable columns
Pagination for large datasets
Quick selection with single click
Links to navigate to any level in the hierarchy

Cascade Variant

Shows cascading dropdown selects where each level filters the next. Ideal for step-by-step selection when users need guidance through the hierarchy.


<e-hierarchy-i
    v-model="item.Office"
    label="Office Location"
    :config="{
        entity: 'Office',
        label: 'Office',
        parent: {
            field: 'Building',
            entity: 'Building',
            label: 'Building',
            parent: {
                field: 'Campus',
                entity: 'Campus',
                label: 'Campus',
                parent: {
                    field: 'City',
                    entity: 'City',
                    label: 'City'
                }
            }
        }
    }"
    variant="cascade"
    :error-messages="errors['Office']"
/>

Features:

Step-by-step selection from top to bottom
Each level filters the next automatically
Clear visual hierarchy
Disabled state for dependent levels

With Create New Item

Enable users to create new items directly from the selection dialog if they have appropriate permissions.


<e-hierarchy-i
    v-model="item.Department"
    label="Department"
    :config="{
        entity: 'Department',
        label: 'Department',
        parent: {
            field: 'Division',
            entity: 'Division',
            label: 'Division',
            parent: {
                field: 'Company',
                entity: 'Company',
                label: 'Company'
            }
        }
    }"
    new-item-form="DepartmentForm"
    :new-item-template="{ IsActive: true }"
    :error-messages="errors['Department']"
/>

Complex Example - Product Category Hierarchy

Select a product's category within a multi-level product classification system.


<v-row>
    <v-col>
        <e-hierarchy-i
            v-model="item.ProductSubcategory"
            label="Product Category"
            :config="{
                entity: 'ProductSubcategory',
                label: 'Subcategory',
                parent: {
                    field: 'ProductCategory',
                    entity: 'ProductCategory',
                    label: 'Category',
                    parent: {
                        field: 'ProductLine',
                        entity: 'ProductLine',
                        label: 'Product Line',
                        parent: {
                            field: 'ProductDivision',
                            entity: 'ProductDivision',
                            label: 'Division'
                        }
                    }
                }
            }"
            variant="table"
            new-item-form="ProductSubcategoryForm"
            :error-messages="errors['ProductSubcategory']"
        />
    </v-col>
</v-row>

e-address-i

Prop	Type	Description
modelValue	Object	Address object.
errors	Array	Field-specific error messages.

e-file-i

Handles file uploads with binding to a field via v-model.

Prop	Type	Description
v-model	-	Required. The model field for selected files.
label	String	Field label.

Example

Upload a file and bind it to formData.Attachment.


<e-file-i
    v-model="formData.Attachment"
    label="Upload File"
></e-file-i>

📂 Examples

Using Vuetify Inputs

Standard Vuetify components for text, textarea, and checkbox inputs.


<v-text-field v-model="item.Name" label="Name" :error-messages="errors['Name']" />
<v-textarea v-model="item.Description" label="Description" :error-messages="errors['Description']" />
<v-checkbox v-model="item.IsActive" label="Active" />

Using Custom Inputs

Custom components for roles, users, dates, and more.


<e-role-i label="Role" v-model="item.Role" :errors-messages="errors['Role']" />
<e-user-i label="User" v-model="item.User" :errors-messages="errors['User']" />
<e-date-i label="Start Date" v-model="item.StartDate" :error-messages="errors['StartDate']" />
<e-datetime-i label="Appointment" v-model="item.Appointment" :error-messages="errors['Appointment']" />
<e-time-i label="Meeting Time" v-model="item.MeetingTime" :error-messages="errors['MeetingTime']" />
<e-select entity="Product" label="Product" v-model="item.Product" :error-messages="errors['Product']" />
<e-address-i label="Location" v-model="item.Location" :error-messages="errors['Location']" />

⚙️ Helper Methods

Optional helper methods in the <script> block customize form behavior.

createItem(remoteItem)

Transforms a server object into a form-ready version.


const createItem = (remoteItem) => {
    return Object.assign({}, remoteItem);
};

createPayload(formItem)

Prepares form data for API submission.


const createPayload = (formItem) => {
    return Object.assign({}, formItem);
};

validate(item)

Validates form data before saving. Returns an array of error messages.


const validate = (item) => {
    return [];
};

A comprehensive page for viewing, searching, and managing collections of entity records with rich filtering, sorting, and interactive capabilities.

📄 Overview

The Entity List Page serves as the primary interface for working with multiple records of an entity type. It integrates powerful data table capabilities with a consistent layout and navigation elements.

This component combines search controls, filtering options, and action buttons with a configurable data table, providing a complete solution for list-based views.

⚙️ Configuration Options

Entity List Pages are highly configurable through properties that control their appearance and behavior.

Basic Settings

Property	Type	Description
PageTitle	String	Header title for the page
DataTable	String	Name of the DataTable component to use
NewItemForm	String	Form to use when creating new records
EditItemForm	String	Form to use when editing existing records
ItemDataCard	String	Card to use when viewing record details in a dialog
AllowDelete	Boolean	Whether records can be deleted from the list

This is not just a UI component — it's a standalone page designed to present comprehensive information about a specific entity. Each page has a unique URL, making it easy to bookmark, share, or deep-link. It brings together structured data, visual elements, and related components to offer a complete view of the object.

📄 Overview

The Entity Details Page provides a comprehensive view of a single entity, combining field data, related collections, and navigation elements in a cohesive layout.

Built with Vuetify layout primitives and custom rendering components, it supports dynamic presentation of simple fields and complex relationships.

Important

The following variables are reserved in the Entity Details Page environment:

item: Represents the main entity object fetched from the server, for which the page is designed.
activeTab: Used for managing tabs (as shown in the tabs example). It supports URL modification when changed, allowing users to copy a link to a specific tab.

💠 Tabs Support

The page can be organized into tabs using Vuetify’s VTabs and VTabsWindow components, allowing separation of details, documents, related records, and more.

Tabs Example

This example shows a project details page with three tabs: "Overview" for project details, "Files" for related documents, and "Team" for team members. The tabs use Vuetify’s VTabs for navigation and VTabsWindow for content.

<VTabs v-model="activeTab" class="v-tabs-pill">
    <VTab value="overview">Overview</VTab>
    <VTab value="files">Files</VTab>
    <VTab value="team">Team</VTab>
</VTabs>
<VTabsWindow v-model="activeTab">
    <VTabsWindowItem value="overview">
        <div class="my-4">
            <e-field label="Project Name" :has-value="item.Name">{{ item.Name }}</e-field>
            <e-field label="Start Date" :has-value="item.StartDate">
                <e-date :value="item.StartDate" />
            </e-field>
        </div>
    </VTabsWindowItem>
    <VTabsWindowItem value="files">
        <e-entity-data-table-card
            entity="ProjectDocuments"
            table-id="project-files"
            title="Project Files"
            :parent="item"
            parent-field="Project"
        />
    </VTabsWindowItem>
    <VTabsWindowItem value="team">
        <e-object-list
            entity="TeamMember"
            :value="item.TeamMembers"
            item-title="FullName"
            flex
        />
    </VTabsWindowItem>
</VTabsWindow>

🔧 Custom Rendering Components

Custom components enable overriding default renderers for fields, headers, and embedded tables, allowing tailored appearance and behavior.

For additional rendering components (e-role, e-user, e-time, e-date, e-datetime, e-file, e-address, e-entity-data-card), refer to the UI Data Card help page.

e-entity-header-card

Displays the page header with a title, actions, and optional breadcrumb navigation.

Prop	Type	Description
title	String	Header title.
allowEdit	Boolean	Show edit action.
allowDelete	Boolean	Show delete action.
breadcrumbs	Array	Breadcrumb links.
editFormName	String	Form template name for editing.

e-field

Renders a labeled field with optional inline layout, falling back to a placeholder when no value is provided.

Prop	Type	Description
hasValue	Boolean	Show value only when truthy.
label	String	Field label text.
inline	Boolean	Render label and value on one line.
labelWidth	String	Width of label when inline.
noGutters	Boolean	Remove default spacing.

e-object / e-object-list

Renders links to related entities or lists thereof, with optional layout and separators.

Prop	Type	Description
entity	String	Entity name for link rendering.
itemTitle	String	Field to use as link text.
value	Object \| Array	Data to render.
subpath	String	Nested array path for list rendering.
flex	Boolean	Use flex layout for lists.

e-entity-data-table-card

Embeds a full data table of related records with filtering and inline actions.

Prop	Type	Description
entity	String	Entity type for embedded table.
tableId	String	Unique identifier for preferences.
title	String	Optional table title.
allowView	Boolean	Controls view action.
allowEdit	Boolean	Controls edit action.
allowDelete	Boolean	Controls delete action.
parentField	String	Field to filter by parent record.
parent	Object	Parent record for filtering.

📂 Examples

Basic Page Example

A simple entity details page with a header, fields, and an embedded table of related documents.

<e-entity-header-card :title="item.Name" edit-form-name="ProjectForm" />
<div class="my-4">
    <e-field label="Short Name" :has-value="item.ShortName">{{ item.ShortName }}</e-field>
    <e-field label="Status" :has-value="item.Status"><e-object entity="ProjectStatus" :value="item.Status" item-title="Name"/></e-field>
</div>
<e-entity-data-table-card entity="ProjectDocuments" table-id="project-docs" title="Documents" :parent="item" parent-field="Project"/>