EntityRecord

Save PDF

Last Updated: May 5, 2026
3 minute read

MarkLogic Server
Documentation

The EntityRecord widget organizes properties from a record into a UI container. Props control styling and functionality. EntityRecord works as a standalone container on a page or within another component, such as the WindowCard widget. To highlight key properties from records in a list of search results, EntityRecord can also be tied to search-result click events.

EntityRecord example configuration

In this example, the EntityRecord widget displays the data properties of a document returned from MarkLogic using MarkLogicContext and a useEffect hook:

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, EntityRecord } from "ml-fasttrack";

function App() {

  const context = useContext(MarkLogicContext);

  useEffect(() => {
    context.getDocument('/person/1001.json');
  }, []);

  const entityRecordConfig = {
    entityTypeConfig: {
      "path": "data.*~"
    },
    entities: [
      {
        entityType: 'person',
        entityTypeDisplay: 'Person',
        title: {
          path:  'data.person.fullname',
        },
        items: [
          {
            label: 'STREET',
            path: 'data.person.address.street'
          },
          {
            label: 'CITY',
            path: 'data.person.address.city'
          },
          {
            label: 'STATE',
            path: 'data.person.address.state'
          },
          {
            label: 'COUNTRY',
            path: 'data.person.address.country'
          },
          {
            label: 'DOB',
            path: 'data.person.dob'
          },
          {
            label: 'CONTACT',
            path: 'data.person.contacts.contact[0].value'
          }
        ],
        avatarProps: {
          border: false,
          themeColor: 'info',
          rounded: 'full',
          type: 'image',
          style: { flexBasis: 140, height: 140 },
          avatarImage: {
            path: 'data.person.images.image[0].url',
            alt: 'person image'
          },
        }
      }
    ]
  }

  const handleClick = (attributes, _event) => {
    const uri = attributes?.uri;
    if (uri) {
      console.log('URI: ' + uri)
    }
  }

  return (
    <div className="App">
      <div>
        <EntityRecord
            recordActionLabel={'uri'}
            data={context.documentResponse}
            config={entityRecordConfig}
            badges={[
        {
          label: 'graph',
          color: 'primary',
          onClick: () => console.log('badge clicked!')
        }
      ]}}
            onRecordActionClick={handleClick} />
      </div>
    </div>
  );
}

Code explanation

In the EntityRecord example configuration:

The data prop accepts a JSON object of the returned document.
The entityTypeConfig prop accepts an object that determines where in the record the entity type is defined.
The entities prop accepts an array of entity configuration objects. Each object determines what data from the record is displayed in the widget for a given entity type.
The widget can display one or more action badges. The badges prop accepts an array of badge configuration objects.

EntityRecord example rendering

This is an example rendering of the EntityRecord widget:

EntityRecord API

Prop	Type	Description
data	object	Entity data to display.
config	object	Array of entity configuration objects. Each object determines what data to display in a result for an entity type. See the EntityRecord config API.
itemsContainerStyle	CSSProperties	CSS styles applied to the item's container.
itemContainerStyle	CSSProperties	CSS styles applied to each item.
itemLabelStyle	CSSProperties	CSS styles applied to the item labels.
itemValueStyle	CSSProperties	CSS styles applied to the item values.
multipleValueSeparator	string	Symbol that separates multiple values when an item is an array. Deprecated: Use the `separator` property in PathConfig instead.
badges	BadgeConfig[]	Array of badge configuration objects to display on the record.
badges[].label	string	Label displayed on the badge.
badges[].color	string	KendoReact theme color for the badge. See the KendoReact BadgeProps.
badges[].style	CSSProperties	CSS styles applied to the badge.
badges[].onClick	((data: any, event: React.MouseEvent) => void)	Callback function triggered when the badge is clicked. Receives the entity data and the click event.

EntityRecord config API

Prop	Type	Description
entityTypeConfig	PathConfig	Entity type configuration object.
entityTypeConfig.path	string	Path to the entity type in the search result. The path is specified using `JSONPath`.
entities[]	object[]	Array of configuration objects for each entity type.
entities[].entityType	string	Entity type of the configuration object.
entities[].entityTypeDisplay	string	Label displayed for the entity type name.
entities[].title	PathConfig	Title configuration object.
entities[].title.path	string	Path to the title property in the entity data. The path is specified using `JSONPath`.
entities[].items[]	PathConfig[]	An array of configuration objects that display each property.
entities[].items[].label	string	Property label.
entities[].items[].path	string	Path to the property value. The path is specified using `JSONPath`.
entities[].items[].className	string \| ((value: any) -> string)	Class name applied to the item. Accepts a string or a function that takes the property value as an argument and returns a string.
entities[].image	PathConfig	Image configuration object.
entities[].image.path	string	Path to the url value for the image. The corresponding image will be rendered. The path is specified using `JSONPath`.
entities[].image.alt	string	Alternative text for the image.
entities[].avatarProps	AvatarProps	An avatar object for an image to be displayed.

Develop with FastTrack

EntityRecord

Table of Contents

EntityRecord

EntityRecord example configuration

Code explanation

EntityRecord example rendering

EntityRecord API

EntityRecord config API