The PropertiesBox component allows users to edit or display one or more properties. It supports both single and multiple property management.
Example usage:
<ui-properties-box
class="v-col-md-6"
mode="grid"
:properties="['m.SpilloverDirection']"
:account-id="item?.accountId()"
:position-id="item?.positionId()"
:tree-id="2"
:include-tree="0"
:editable-properties="['m.SpilloverDirection']"
>
</ui-properties-box>Properties:
wrap - Wraps the content in a widget window. If true, the following variables control the window: background-class, header-class, icon, title, rounded, and height.
mode:
list- Displays inputs as a simple list, where the title is shown above the input field.grid- Displays inputs as a two-column table: title and value/input.
Type Definition:
export type PropertiesBoxProps = {
id?: string;
mode?: 'list' | 'grid';
properties: string[],
editableProperties?: string[],
accountId?: number;
treeId?: number;
offset?: number;
positionId?: number;
includeTree?: number;
headerTitles?: Record<string, string>;
wrap?: boolean;
backgroundClass?: string,
headerClass?: string,
icon?: string,
title?: string,
rounded?: number;
height?: number;
listInputProperties?: InputByTypeProperties;
gridInputProperties?: InputByTypeProperties;
forceLoading?: boolean;
}
| Property | Default | Type | Description |
| id | — | String | Unique identifier for the component. |
| mode | 'list' | String | Display mode: 'list' or 'grid'. |
| properties | — | String[] | List of properties to display. |
| editableProperties | — | String[] | List of properties that can be edited. |
| accountId | — | Number | ID of the associated account. |
| treeId | — | Number | ID of the associated tree. |
| wrap | false | Boolean | If true, wraps the content in a widget window. |
| backgroundClass | — | String | CSS class for the background of the widget window. |
| headerClass | — | String | CSS class for the header of the widget window. |
| icon | — | String | Icon to display in the widget window. |
| title | — | String | Title of the widget window. |
| rounded | — | Number | Border radius for the widget window. |
| height | — | Number | Height of the widget window. |
Note: All settings can be customized either from the admin panel by manually editing the code or from within the back office by clicking on the cog icon in the upper left corner of the page (only accessible when the "Online office admin" flag is present).