# Opening Record Detail pages

Record Detail pages are an important feature of Interfaces in Airtable that allow your users to see more detail about a specific record, edit that record's data and work with linked records. Opening Record Detail pages from your Interface Extension is the recommended way to allow users to work with specific records.

Use the `expandRecord` method to open a Record Detail page directly from your Interface Extension. Use the `hasPermissionToExpandRecords` or `checkPermissionToExpandRecords` methods to check whether the Interface Extension can open Record Detail pages from the current page, to determine whether to display UI that allows users to open Record Detail pages.

## Using [expandRecord](https://airtable.com/developers/interface-extensions/api/ui/utils/expandrecord.md)

```
import {expandRecord} from '@airtable/blocks/interface/ui';

<button onClick={() => expandRecord(record)}>{record.name}</button>
```

When the button is clicked, this example opens the specified record in a Record Detail page _if_ the "Click to open record details" setting has been enabled by the builder in the properties panel within Interface Designer.

## Using [hasPermissionToExpandRecords](https://airtable.com/developers/interface-extensions/api/models/table.md#hasPermissionToExpandRecords) to check whether the user can open Record Detail pages

```
import { useBase, useRunInfo, expandRecord } from '@airtable/blocks/interface/ui';

function MyApp() {
  const base = useBase();
  const table = base.tables[0];
  const runInfo = useRunInfo();

  const isRecordExpansionEnabled = table.hasPermissionToExpandRecords();

  return isRecordExpansionEnabled || runInfo.isPageElementInEditMode ? (
    <button onClick={() => expandRecord(record)}>{record.name}</button>
  ) : (
    <span>{record.name}</span>
  );
```

This example checks whether the Interface Extension can open Record Detail pages on the current Interface page before rendering a button that opens a Record Detail page when clicked.

This example also renders the button that opens a Record Detail page if the Interface page that the Interface Extension is placed on is in Edit mode (meaning that it is currently being edited by a builder.) If the builder has not enabled the "Click to open record details" setting for the Interface Extension, then clicking on the button that opens a Record Detail page will prompt the builder to enable opening Record Detail pages from the Interface Extension. This is the recommended approach to ensure that builders using your Interface Extension do not inadvertently forget to enable opening Record Detail pages from your Interface Extension.

## Using [checkPermissionToExpandRecords](https://airtable.com/developers/interface-extensions/api/models/table.md#checkPermissionToExpandRecords) for more information about why users cannot open Record Detail pages

```
import { useBase, useRunInfo, expandRecord } from '@airtable/blocks/interface/ui';

function MyApp() {
  const base = useBase();
  const table = base.tables[0];
  const runInfo = useRunInfo();

  const expandRecordsCheckResult = table.checkPermissionToExpandRecords();
  const isRecordExpansionEnabled = expandRecordsCheckResult.hasPermission;

  return (
    <button
      onClick={() =>
        isRecordExpansionEnabled || runInfo.isPageElementInEditMode
          ? expandRecord(record)
          : alert(
              "Cannot open Record Detail pages: " +
                expandRecordsCheckResult.reasonDisplayString
            )
      }
    >
      {record.name}
    </button>
  );
}
```

This example is similar to the prior one. Using the `checkPermissionToExpandRecords` method provides more information about _why_ the user cannot open Record Detail pages from the Interface Extension, if that is the case. This information can be used in user-facing messages that show errors or provide more context on the Interface Extension's behavior. This is the recommended approach in cases where opening Record Detail pages is critical to the Interface Extension's operation.