Card Locations

You can create cards at multiple locations within the Review interface. For example, you can place cards on the left or right sides within the Review Interface itself, or on the left, right, or bottom of individual viewers, including Native, Image, Extracted Text, and Productions Viewers. When a user chooses the Pop Out Viewer, a new window opens that contains the selected viewer with the viewer collection and dock layouts on the sides and bottom of it respectively. For information about the viewer UI, see Viewer on the RelativityOne Documentation site.

This page contains the following information:

• Basic layout concepts
• Review layout - left
• Review layout - right
• Viewer collection layout - left
• Viewer collection layout - right
• Viewer dock layout - bottom

Basic layout concepts

Review the following basic concepts before creating layouts.

Dock

A dock is a component used to group one or more cards together. Each card in a dock is represented by a tab that contains either the card title or the card icon. One card is always active, and its contents are displayed in the dock contents pane.

Accordion

An accordion is a component that displays one or more docks stacked vertically within it. You can use the dockIndex property in the location object to set the dock within the accordion where your card is added.

If you exclude this property, the first dock is used by default. If you set the dockIndex higher than the current count, a new dock is created, and it includes your card.

Review layout - left

You can add cards on the left of the document viewer as follows:

LayoutId	PaneId	Pane type	Available in Document Preview
review	ri-review-left-accordion	accordion	No

This sample code illustrates how to add a card on the left side of document viewer:

var testCardConfig = {
  id: "test-card",
  title: "Test Card",
  icon: {
    url: "https://www.relativity.com/relativity/images/footer-logo-2x.png",
  },
  singleton: true,
  location: {
    layoutId: "review",
    paneId: "ri-review-left-accordion",
    dockIndex: 0,
  },
  loader: {
    iframe: {
      url: "https://www.relativity.com",
    },
  },
};

Left accordion in document review

The following screenshot shows the left accordion in the document viewer:

Review layout - right

You can add cards on the right of the document viewer as follows:

LayoutId	PaneId	Pane type	Available in Document Preview
review	ri-review-right-accordion	accordion	No

This sample code illustrates how to add a card on the right side of document viewer:

var testCardConfig = {
  id: "test-card",
  title: "Test Card",
  icon: {
    url: "https://www.relativity.com/relativity/images/footer-logo-2x.png",
  },
  singleton: true,
  location: {
    layoutId: "review",
    paneId: "ri-review-right-accordion",
    dockIndex: 0,
  },
  loader: {
    iframe: {
      url: "https://www.relativity.com",
    },
  },
};

Right accordion in document review

You also have the option to use a right accordion in the document viewer. See the following screenshot:

Viewer collection layout - left

You can add a collection layout on the left of the document viewer:

LayoutId	PaneId	Pane type	Available in Document Preview
viewercollection	ri-viewer-left-dock	dock	Yes

This sample code illustrates how to add a card inside the document viewer on the left:

var testCardConfig = {
  id: "test-card",
  title: "Test Card",
  icon: {
    url: "https://www.relativity.com/relativity/images/footer-logo-2x.png",
  },
  singleton: true,
  location: {
    layoutId: "viewercollection",
    paneId: "ri-viewer-left-dock",
  },
  loader: {
    iframe: {
      url: "https://www.relativity.com",
    },
  },
};

Viewer left dock in document review

The following screenshot illustrates a left dock in the document review interface:

Viewer left dock in document preview

The following screenshot illustrates a left dock in the document preview interface:

Viewer collection layout - right

You can add a collection layout on the right of the document viewer:

LayoutId	PaneId	Pane type	Available in Document Preview
viewercollection	ri-viewer-right-dock	dock	No

This sample code illustrates how to add a card inside the document viewer on the right:

var testCardConfig = {
  id: "test-card",
  title: "Test Card",
  icon: {
    url: "https://www.relativity.com/relativity/images/footer-logo-2x.png",
  },
  singleton: true,
  location: {
    layoutId: "viewercollection",
    paneId: "ri-viewer-right-dock",
  },
  loader: {
    iframe: {
      url: "https://www.relativity.com",
    },
  },
};

Viewer right dock in document review

The following screenshot illustrates a right dock in the document view interface:

Viewer dock layout - bottom

You can add dock layout at the bottom of the document viewer:

LayoutId	PaneId	Pane type	Available in Document Preview
viewerdock	ri-viewer-bottom-dock	dock	No

This sample code illustrates how to add a card at the bottom of the document viewer:

var testCardConfig = {
  id: "test-card",
  title: "Test Card",
  icon: {
    url: "https://www.relativity.com/relativity/images/footer-logo-2x.png",
  },
  singleton: true,
  location: {
    layoutId: "viewerdock",
    paneId: "ri-viewer-bottom-dock",
  },
  loader: {
    iframe: {
      url: "https://www.relativity.com",
    },
  },
};

Dock at bottom of document review interface

The following screenshot illustrates a dock at the bottom of the document review interface:

Dock at bottom of document preview interface

The following screenshot illustrates a dock at the bottom of the document preview interface: