@orion-front/docs

Appearance

Attributes panel ​

Purpose and problems it solves ​

attributes shows configured fields for the object selected in another panel. It supports a master-detail workflow in which users inspect an object, switch the same field surface into inline edit, or open the editor in a modal.

When to use it ​

Use Attributes for a configured object detail/form surface. Use Table for comparing many objects, Tree for a hierarchy, and a dedicated content panel for long-form documents.

Prerequisites, inputs, and ownership ​

The practical data prerequisite is a stable request.getSelectedObjectForEventId. A Table or Tree must emit an onObjectSelect event with addSelectedObjectToRequest under that ID.

editor owns the displayed fields, grouped rows or tabs, explicit value types, labels, metadata, and object/link field behavior. The object editor runtime owns reads and writes; Attributes supplies the selection binding and action surface.

Capability map ​

  • Selection binding: resolves object or linked-object selectors from a named stored event.
  • Read view: renders configured editor fields for the selected entity.
  • Inline update: an update panel action with modal: false switches the surface to editable controls with cancel/save buttons.
  • Modal update: modal: true opens the object editor separately and leaves a modal-state notice in the panel.
  • Other supported actions: the Attributes action handler currently dispatches delete and runMethod in addition to update.
  • Data refresh: after a successful inline write, the source panel or tree node is invalidated/reloaded and the projected detail data is fetched again.
  • Common UI: ui.title is rendered above both read and edit states.

Behavioral model and interactions ​

Without a resolved selector, Attributes renders its empty state and does not open the editor. Once selection exists, it opens the object editor in read mode and requests the object and link attributes needed by configured fields.

For a field value, an unsaved edit buffer wins first. A successfully loaded detail projection wins over the source Table/Tree row. Source row data is used only when no detail projection was required or loaded. This prevents a narrow source-table projection from silently replacing the detail read model.

panelActions is not rendered by the general grouped action toolbar here. The Attributes-specific action column shows the first action directly and moves the rest into an overflow menu. In update mode that column becomes cancel and save controls.

Alternatives, defaults, and precedence ​

  • The event's stored objectSelector is preferred, followed by its legacy selectedObjectId, then the last selected object from the event's source panel.
  • editor.fields and editor.tabs are alternative form organizations. When tabs are present, the current editor tab controls visible fields.
  • The Attributes-specific update handler does not forward action.editor; the panel's top-level editor remains the effective field configuration. Keep a required action editor declaration aligned with it rather than expecting it to override the panel.
  • There is no default selected object and no automatic first-row selection.

Limitations and runtime drift ​

  • itemActions and itemActionsMaxVisible are declared on the type but the active Attributes renderer does not consume them.
  • An update action's declared editor is not consumed by the Attributes-specific handler; attributes.editor remains authoritative.
  • The action surface handles only update, delete, and runMethod. Unsupported methods warn instead of gaining generic action behavior.
  • The no-selection message is currently hard-coded as Выберите строку в таблице; ui.emptyMessage does not replace it.
  • A missing event ID is allowed by the type but leaves the panel without a usable data source.
  • Editor-field behavior is a shared contract; consult the values/editor guides instead of inferring it from this panel alone.

Minimal valid configuration ​

The declared minimum includes an editor, but this becomes useful only after the named event is produced.

json
{
  "id": "selected-object-details",
  "type": "attributes",
  "request": {
    "getSelectedObjectForEventId": "object-selected"
  },
  "editor": {
    "mode": "panel",
    "fields": [
      {
        "attribute": "name",
        "label": "Наименование"
      }
    ]
  }
}

Realistic end-to-end scenario ​

The root group supplies the event producer and consumer together. The table must receive Asset objects, and the current API must support object reads and PUT /Object for the selected asset.

json
{
  "id": "asset-workspace",
  "type": "group",
  "groupLayout": {
    "type": "columns"
  },
  "panels": [
    {
      "id": "assets",
      "type": "table",
      "request": {
        "metaTypeName": "Asset"
      },
      "events": [
        {
          "id": "asset-selected",
          "name": "onObjectSelect",
          "actions": [
            {
              "name": "addSelectedObjectToRequest"
            }
          ]
        }
      ],
      "columns": [
        {
          "attribute": "itemId",
          "label": "Код",
          "fixedWidth": "8rem"
        },
        {
          "attribute": "name",
          "label": "Наименование"
        }
      ]
    },
    {
      "id": "asset-details",
      "type": "attributes",
      "ui": {
        "title": "Выбранный объект"
      },
      "request": {
        "getSelectedObjectForEventId": "asset-selected"
      },
      "editor": {
        "mode": "panel",
        "fields": [
          {
            "attribute": "itemId",
            "label": "Код",
            "readonly": true
          },
          {
            "attribute": "name",
            "label": "Наименование"
          },
          {
            "attribute": "enabled",
            "type": "Boolean",
            "label": "Активен"
          }
        ]
      },
      "panelActions": [
        {
          "id": "edit-asset",
          "method": "update",
          "label": "Редактировать",
          "icon": "pencil",
          "modal": false,
          "editor": {
            "mode": "panel",
            "fields": [
              {
                "attribute": "name",
                "label": "Наименование"
              },
              {
                "attribute": "enabled",
                "type": "Boolean",
                "label": "Активен"
              }
            ]
          }
        }
      ]
    }
  ]
}

Verified demos ​

Open selection, attributes, inline edit, and refresh Open read, inline-edit, and modal-edit modes Open Attributes as a selected-object Condition branch

In the Condition tab, select an order in the source Table. Its onObjectSelect event activates the selected branch and supplies the same object to Attributes, which renders read-only code, product, status, and priority fields.

Exact parameter reference ​

Configure selection with panel events, then define field behavior with values and editors. Use the actions guide before adding update, delete, or method actions.