Skip to main content

Entity Manager declarative HTML

The Declarative HTML API enables you to use simple, semantic tags to create and configure the entity-management component directly within your HTML. You can quickly integrate and easily customize the component without writing complex JavaScript code.

Using HTML attributes, you can define key settings such as the data source, event handlers, UI schema, and actions like create, update, and delete, all within the markup itself.

Entity Management​

Top-level web component, which is used to initialize the entity-management.

<entity-management></entity-management>

DOM API​

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes​

AttributeTypeUseExample
design-system-prefixstringName of the design system prefix that will be used in renderers.
<entity-management design-system-prefix="rapid">
resourceNamestringName of the backend resource which contains the entities to manage.
<entity-management resourceName="ALL_COUNTERPARTYS">
updateEventstringName of the event handler on the Genesis server for updating the entity.
<entity-management updateEvent="EVENT_COUNTERPARTY_MODIFY">
deleteEventstringName of the event handler on the Genesis server for deleting the entity.
<entity-management deleteEvent="EVENT_COUNTERPARTY_DELETE">
createEventstringName of the event handler on the Genesis server for creating a new entity.
<entity-management createEvent="EVENT_COUNTERPARTY_INSERT">
titlestringTitle of the grid.
<entity-management title="Counterparty Management">
entityLabelstringLabel for the entity, used in modal titles, buttons, and notifications.
<entity-management entityLabel="Counterparty">
readEventstringName of the request on the Genesis server to fetch data for the form.
<entity-management readEvent="PROFILE_USER">
row-selectionstringAllows single or multiple row selection; values: 'single' or 'multiple'.
<entity-management row-selection="multiple">
enable-cell-flashingbooleanEnables or disables cell flashing for updates; defaults to true.
<entity-management enable-cell-flashing>
enable-row-flashingbooleanEnables or disables row flashing for add transactions; defaults to false.
<entity-management enable-row-flashing>
datasource-typeDatasourceTypeSets the datasource type: 'server' or 'client'.
<entity-management datasource-type="server">
persist-column-state-keystringUnique key for storing column state persistently; omit to disable.
<entity-management persist-column-state-key="counterparty-grid-state">
size-columns-to-fitbooleanAutomatically resizes columns to fit the available space.
<entity-management size-columns-to-fit>
enable-filter-barbooleanEnables or disables the filter bar component.
<entity-management enable-filter-bar>
hide-editbooleanHides the edit button; defaults to false.
<entity-management hide-edit>
hide-deletebooleanHides the delete button; defaults to false.
<entity-management hide-delete>
enable-search-barbooleanEnables or disables the search bar component.
<entity-management enable-search-bar>
header-case-typeGridProCaseTypeSets the header case type; defaults to 'CONSTANT_CASE'.
<entity-management header-case-type="camelCase">
modal-position'centre' | 'left' | 'right'Specifies where the modal dialog will appear.
<entity-management modal-position="centre">
crud-menu-positionCrudMenuPositionDetermines where CRUD menu buttons appear.
<entity-management crud-menu-position="top">
crud-menu-styleActionsMenuStyleSets the style of the CRUD menu buttons.
<entity-management crud-menu-style="actions-vertical">
crud-action-menu-namestringSets the label of the CRUD action menu.
<entity-management crud-action-menu-name="Actions">

Properties​

PropertyTypeUseExample
readEventFn(entity) => anyFunction triggered when an event is read from the entity management.
public async readRightCodesData(profile) {
  const selectedRightsReq = await this.connect.request('PROFILE_RIGHT', {
    REQUEST: {
    PROFILE_NAME: profile.PROFILE_NAME,
    RIGHT_CODE: '*',
    },
  });

  return {
    RIGHT_CODES: selectedRightsReq.REPLY.map((v) => v.RIGHT_CODE),
  };
}

<entity-management :readEventFn=${(x) => (profile) => x.readRightCodesData(profile)}>
gridOptionsGridOptionsAdditional configuration options for the grid, such as pagination or sorting.
const gridOptions: GridOptions = {
    rowSelection: 'single',
};

<entity-management :gridOptions=${() => gridOptions}>
columnsColDef[]Defines the column configuration, including headers and field mappings.
const gridColumns = [
  {
    field: 'TRADE_NAME',
    headerName: 'Trade name',
  },
  {
    field: 'QUANTITY',
    headerName: 'Quantity',
  },
];

<entity-management :columns=${() => gridColumns}>
datasourceConfigDatasourceConfigurationSpecifies the configuration for the data source, including API endpoints.
<entity-management :datasourceConfig=${() => ({pollingInterval: 5000 })}>
createFormUiSchemaUiSchemaDefines the UI schema for the create entity form.
const counterpartyUIschema: UiSchema = {
  type: 'VerticalLayout',
  elements: [
    { type: 'Control', scope: '#/properties/COUNTERPARTY_ID', label: 'Id' },
    {
      type: 'Control',
      label: 'Counterparty Lei',
      scope: '#/properties/COUNTERPARTY_LEI',
    },
    { type: 'Control', scope: '#/properties/ENABLED', label: 'Enabled' },
    { type: 'Control', scope: '#/properties/NAME', label: 'Counterparty Name' },
  ],
};

<entity-management :createFormUiSchema=${() => counterpartyUIschema}>
updateFormUiSchemaUiSchemaDefines the UI schema for the update entity form.
const counterpartyUIschema: UiSchema = {
  type: 'VerticalLayout',
  elements: [
    { type: 'Control', scope: '#/properties/COUNTERPARTY_ID', label: 'Id' },
    {
      type: 'Control',
      label: 'Counterparty Lei',
      scope: '#/properties/COUNTERPARTY_LEI',
    },
    { type: 'Control', scope: '#/properties/ENABLED', label: 'Enabled' },
    { type: 'Control', scope: '#/properties/NAME', label: 'Counterparty Name' },
  ],
};

<entity-management :updateFormUiSchema=${() => counterpartyUIschema}>
formRenderersRendererEntry[]Custom renderers for specific form fields.

const renderers = [
  stringEntry,
  BooleanControlEntry,
  StringArrayEntry,
];

<entity-management :formRenderers=${() => renderers}>
defaultEntityValuesRecord<string, unknown>Default values to populate in forms when creating a new entity.
<entity-management :defaultEntityValues=${() => ({ COUNTERPARTY_ID: '1', ENABLED: true })}>
searchBarConfigAvailableOption[]Configuration for the search bar, such as placeholder text and debounce time.
const searchConfig = [
  {
    field: 'COUNTERPARTY_ID',
    label: (searchTerm) => `${searchTerm} as Counterparty ID`,
    createCriteria: getCriteriaBuilder,
    isEnabled: (searchTerm, selectedOption) => {
      return (
        searchTerm.length >= INPUT_MIN_LENGTH &&
        !selectedOption.some((e) => e.field === 'COUNTERPARTY_ID')
      );
    },
  },
  {
    field: 'NAME',
    label: (searchTerm) => `${searchTerm} as Name`,
    createCriteria: getCriteriaBuilder,
    isEnabled: (searchTerm, selectedOption) => {
      return (
        searchTerm.length >= INPUT_MIN_LENGTH && !selectedOption.some((e) => e.field === 'NAME')
      );
    },
  },
];

<entity-management :searchBarConfig=${() => searchConfig}>

Slots​

SlotUse
headerThe content to be displayed in the header section. If crud-menu-position is set to top, this slot content will overwrite the crud-top content.
footerThe content to be displayed in the footer section. If crud-menu-position is set to bottom, this slot content will overwrite the crud-bottom content.
editUsing this slot enables you to override the default form component.
crud-{position}-beforeBased on value from crud-menu-position the content will be displayed before the specified position.
crud-{position}Based on value from crud-menu-position will be displayed in the specified position.
crud-{position}-afterBased on value from crud-menu-position the content will be displayed after the specified position.

Parts​

PartUse
headerUsing this part allows you to customize the styles for the header section of the entity management component, which can include the title, search-bar, or other header-related elements.
formUsing this part enables you to modify the foundation-form styling.
crud-buttons-wrapper
crud-buttons-wrapper-column
crud-buttons-wrapper-${position}		These parts allow you to style the wrapper container of the CRUD buttons. The ${position} part can be dynamically replaced to target the position-specific button wrappers.
crud-buttons
crud-buttons-${position}		Using these parts allows you to style the individual CRUD buttons. The ${position} part targets specific button groups to customize the placement and appearance.

Fired events​

Events can be received by the emitting <entity-management>, or any parent element.

EventTypeUseExample
rowSelectedCustomEventTriggered when a row is selected.
<entity-management @rowSelected="${(x, ctx) => console.log('entity management row selected', ctx.event)}">
selectionChangedCustomEventTriggered when the selection in the grid changes.
<entity-management @selectionChanged="${(x, ctx) => console.log('entity management selection changed', ctx.event)}">
rowClickCustomEventTriggered when a row is clicked.
<entity-management @rowClick="${(x, ctx) => console.log('entity management row double click', ctx.event)}">
rowDblClickCustomEventTriggered when a row is double-clicked.
<entity-management @rowDblClick="${(x, ctx) => console.log('entity management row double click', ctx.event)}">
contextMenuCustomEventTriggered when a context menu is opened on a row.
<entity-management @contextMenu="${(x, ctx) => console.log('entity management right click', ctx.event)}">
submit-successCustomEvent<{ payload: any }Triggered when the form submission is successful.
<entity-management @submit-success="${(x, ctx) => console.log('entity management submit success', ctx.event)}">
submit-failureCustomEvent<{ payload: any; errors: MessageError[] }>Triggered when the form submission fails.
<entity-management @submit-failure="${(x, ctx) => console.log('entity management submit failure', ctx.event)}">
request-changedCustomEventTriggered when the request is changed.
<entity-management @request-changed="${(x, ctx) => console.log('entity management request changed', ctx.event)}">
criteria-changedCustomEventTriggered when the form criteria is changed.
<entity-management @criteria-changed="${(x, ctx) => console.log('entity management criteria changed', ctx.event)}">

Listened events​

This component doesn't listen to any public API events.