EntityRecord

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'}
            entity={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 entity 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
entity	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.
recordActionLabel	string	Label for the record action badge.
recordActionColor	string	KendoReact theme color for the record action badge. See the KendoReact BadgeProps.
recordActionStyle	CSSProperties	CSS styles applied to the record action badge.
onRecordActionClick	((entity: any, event: any) => void)	Callback function triggered by a click event on the record action button.

EntityRecord config API

Prop	Type	Description
entityTypeConfig	object	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	object	Title configuration object.
entities[].title.path	string	Path to the title property in the entity data. The path is specified using `JSONPath`.
entities[].items[]	object[]	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[].image	object	Title 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[].avatarProps	AvatarProps	An avatar object for an image to be displayed.

In this section:

Develop with FastTrack