Link to another record

Use the Link to another record field to pick one or multiple of the entries from a different Airtable table.

This page contains a detailed description of the field properties and JavaScript samples which you can use with this field.

Common properties

Airtable Field:

General:

Rules:

Hide
Disable

Title:

Control:

Width
Font

Link to another record properties

Here you can find properties related to the Link to another record field.

Display field

Configure which of the target table’s fields to show in the dropdown.

Operator

Define how the field handles the search:

StartsWith—only show items that start with the entered value.
Contains—show all items that contain the entered value.

Order by

Select a field to sort the available options by.

Order type

Choose the sorting order: ascending or descending.

Extra fields

By default, only the item ID and the displayed field are retrieved. The Extra fields property allows you to retrieve additional fields.

Specify which fields should also be returned from the source table:

JavaScript framework

In this section, you can find basic examples of how to work with the field using JavaScript.

For more examples, check out Working with form fields in JavaScript article. If you are not familiar with the JavaScript framework, get started with the JavaScript basics.

Note

The field is only accessible once the form is rendered, so all calls to the field must be inside fd.rendered event:

fd.rendered(() => {
    // access the field's value and print in the browser's console
    console.log(fd.field('Field1').value);
});

Wait until field is ready

Wait until the field is loaded. The ready method returns a promise that is resolved when the field is fully initialized.

fd.field('Field1').ready(field => {
    // alert when the field is ready
    alert('Field is fully loaded');
});
// or
fd.field('Field1').ready().then(field => {
    // alert when the field is ready
    alert('Field is fully loaded');
});

Get record IDs

Get the record ID or an array of record IDs if the Airtable field allows linking several records:

fd.field('Field1').value;

Get record fields

You can get the values of the Display field and fields selected in Extra fields:

In Airtable, open the linked table, right click on the field name and select Copy field URL:
Save the last path segment from the copied URL—this is the field ID. For example, in the following URL fldHOMwG086a2mdNb is the field ID:
```
https://airtable.com/app1hG3lcIxM3WHoR/tblmNBOO1jyPmgcg5/viw9dHmNROet5iu8s/fldHOMwG086a2mdNb
```

Get the record’s field value in JavaScript.

Get the selected record for the Link to another record field that allows linking only to a single record:

// replace Field1 with the form field's name

const recordData = fd.field('Field1').widget.dataItem(); // get the selected record
console.log(recordData.fldHOMwG086a2mdNb); // use the field ID from the previous step

Get selected records for the Link to another record field that allows linking to multiple records:

// replace Field1 with the form field's name

const records = fd.field('Field1').widget.dataItems(); // get selected records
for (const recordData of records) {
   console.log(recordData.fldHOMwG086a2mdNb); // use the field ID from the previous step
}

Refresh the field

Refresh connection with the source table.

If any items were changed in the source table, the data presented in the Link to another record field will be updated.

fd.field('Field1').refresh();

Handle change event

Execute a function when a field value has been changed:

fd.field('Field1').$on('change', value => {
    // log changes to browser's console
    console.log('New value: ' + value);
});

Make field required

Make a field required or optional:

// make field required
fd.field('Field1').required = true;

// make field not required
fd.field('Field1').required = false;

Disable field

Make a field non-editable. The field value can still be changed with JavaScript and saved:

// disabled field
fd.field('Field1').disabled = true;

// enable field
fd.field('Field1').disabled = false;

Get HTML element

Access HTML element inside the field in order to modify it, hide it, or do something else.

// access field's control
let htmlField = fd.field('Field1').$el;

// access field's block, which includes title and control
let htmlFullField = fd.field('Field1').$parent.$el;

Hide field

Hide a field from a user. The field value can still be accessed and changed with JavaScript:

// hide field
fd.field('Field1').hidden = true;

// show field
fd.field('Field1').hidden = false;

Operator

Programmatically define how the field handles the search:

StartsWith—only show items that start with the entered value.
Contains—show all items that contain the entered value.

fd.field('Field1').operator = 'startsWith';
fd.field('Field1').operator = 'contains';

Order by

Choose the linked table field to use for ordering records in the dropdown:

fd.field('Field1').orderBy = 'Name';

// refresh the field to update the ordering
fd.field('Field1').refresh();

Order type

Choose how to order records in the dropdown:

// sort records in descending order
fd.field('Field1').orderType = 'desc';

// sort records in ascending order
fd.field('Field1').orderType = 'asc';

// refresh the field to update the ordering
fd.field('Field1').refresh();

Filter available records

You can filter the records available for selection:

In Airtable, open the linked table, right click on the field name and select Copy field URL:
Save the last path segment from the copied URL—this is the field ID. For example, in the following URL fldHOMwG086a2mdNb is the field ID:
```
https://airtable.com/app1hG3lcIxM3WHoR/tblmNBOO1jyPmgcg5/viw9dHmNROet5iu8s/fldHOMwG086a2mdNb
```

Define the Airtable formula to use for filtering:

// replace Field1 with the form field's name

fd.field('Field1').formula = () => {
   return 'fldHOMwG086a2mdNb < 100'; // Use the field ID from the previous step
};

// refresh the field to update the filtering
fd.field('Field1').refresh();

Filtering supports logic beyonds simple comparisons. Here is an example that uses FIND() to filter out all entries that don’t include the combination of symbols from the nameField:

fd.rendered(() => {
   const nameField = fd.field('Name'); // get the common name field
   const linkedRecordField = fd.field('Field1'); // get the linked record field

   const airtableColumnName = 'fldHOMwG086a2mdNb'; // save the Airtable column name in a variable

   nameField.$on('change', linkedRecordField.refresh); // refresh the linked record field whenever the name field is updated

   linkedRecordField.formula = () => {
      const name = nameField.value;

      if (name !== null && name.length > 0) return `FIND("${name}", ${airtableColumnName}) != 0`; // return the filtering criteria for the name
      else return ''; // if the name field is empty, don't apply the filter
   };
});

Visit the Airtable documentation article for an in-depth reference to Airtable formulas, or check our article for more examples: How to filter linked record fields in Airtable forms.