diff --git a/.gitignore b/.gitignore
index 5dbbc37203..cb08935ec4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,6 @@ npm-debug.log
 
 logs/
 test_logs
+
+# visual studio code
+.vscode
diff --git a/README.md b/README.md
index 0e4b11f018..f14070003e 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,8 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
   - [Run with Docker](#run-with-docker)
 - [Features](#features)
   - [Browse as User](#browse-as-user)
+  - [Change Pointer Key](#change-pointer-key)
+    - [Limitations](#limitations)
   - [CSV Export](#csv-export)
 - [Contributing](#contributing)
 
@@ -605,6 +607,19 @@ This feature allows you to use the data browser as another user, respecting that
 
 > ⚠️ Logging in as another user will trigger the same Cloud Triggers as if the user logged in themselves using any other login method. Logging in as another user requires to enter that user's password.
 
+## Change Pointer Key
+
+▶️ *Core > Browser > Edit > Change pointer key*
+
+This feature allows you to change how a pointer is represented in the browser. By default, a pointer is represented by the `objectId` of the linked object. You can change this to any other column of the object class. For example, if class `Installation` has a field that contains a pointer to class `User`, the pointer will show the `objectId` of the user by default. You can change this to display the field `email` of the user, so that a pointer displays the user's email address instead.
+
+### Limitations
+
+- This does not work for an array of pointers; the pointer will always display the `objectId`.
+- System columns like `createdAt`, `updatedAt`, `ACL` cannot be set as pointer key.
+- This feature uses browser storage; switching to a different browser resets the pointer key to `objectId`.
+
+> ⚠️ For each custom pointer key in each row, a server request is triggered to resolve the custom pointer key. For example, if the browser shows a class with 50 rows and each row contains 3 custom pointer keys, a total of 150 separate server requests are triggered.
 ## CSV Export
 
 ▶️ *Core > Browser > Export*
diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
index a2106503dd..8414e8f13d 100644
--- a/src/components/BrowserCell/BrowserCell.react.js
+++ b/src/components/BrowserCell/BrowserCell.react.js
@@ -15,6 +15,7 @@ import React, { Component }      from 'react';
 import styles                    from 'components/BrowserCell/BrowserCell.scss';
 import { unselectable }          from 'stylesheets/base.scss';
 import Tooltip                   from '../Tooltip/PopperTooltip.react';
+import * as ColumnPreferences    from 'lib/ColumnPreferences';
 
 export default class BrowserCell extends Component {
   constructor() {
@@ -23,13 +24,161 @@ export default class BrowserCell extends Component {
     this.cellRef = React.createRef();
     this.copyableValue = undefined;
     this.state = {
-      showTooltip: false
+      showTooltip: false,
+      content: null,
+      classes: []
+    };
+  }
+
+  async renderCellContent() {
+    let content = this.props.value;
+    let isNewRow = this.props.row < 0;
+    this.copyableValue = content;
+    let classes = [styles.cell, unselectable];
+    if (this.props.hidden) {
+      content = this.props.value !== undefined || !isNewRow ? '(hidden)' : this.props.isRequired ? '(required)' : '(undefined)';
+      classes.push(styles.empty);
+    } else if (this.props.value === undefined) {
+      if (this.props.type === 'ACL') {
+        this.copyableValue = content = 'Public Read + Write';
+      } else {
+        this.copyableValue = content = '(undefined)';
+        classes.push(styles.empty);
+      }
+      content = isNewRow && this.props.isRequired && this.props.value === undefined ? '(required)' : content;
+    } else if (this.props.value === null) {
+      this.copyableValue = content = '(null)';
+      classes.push(styles.empty);
+    } else if (this.props.value === '') {
+      content = <span>&nbsp;</span>;
+      classes.push(styles.empty);
+    } else if (this.props.type === 'Pointer') {
+      const defaultPointerKey = await ColumnPreferences.getPointerDefaultKey(this.props.appId, this.props.value.className);
+      let dataValue = this.props.value.id;
+      if( defaultPointerKey !== 'objectId' ) {
+        dataValue = this.props.value.get(defaultPointerKey);
+        if ( dataValue && typeof dataValue === 'object' ){
+          if ( dataValue instanceof Date ) {
+            dataValue = dataValue.toLocaleString();
+          }
+          else {
+            if ( !this.props.value.id ) {
+              dataValue = this.props.value.id;
+            } else {
+              dataValue = '(undefined)';
+            }
+          }
+        }
+        if ( !dataValue ) {
+          if ( this.props.value.id ) {
+            dataValue = this.props.value.id;
+          } else {
+            dataValue = '(undefined)';
+          }
+        }
+      }
+
+      if (this.props.value && this.props.value.__type) {
+        const object = new Parse.Object(this.props.value.className);
+        object.id = this.props.value.objectId;
+        this.props.value = object;
+      }
+
+      content = this.props.onPointerClick ? (
+        <Pill value={ dataValue } onClick={this.props.onPointerClick.bind(undefined, this.props.value)} followClick={true} />
+      ) : (
+        dataValue
+      );
+
+      this.copyableValue = this.props.value.id;
+    }
+    else if (this.props.type === 'Array') {
+      if ( this.props.value[0] && typeof this.props.value[0] === 'object' && this.props.value[0].__type === 'Pointer' ) {
+        const array = [];
+        this.props.value.map( (v, i) => {
+          if ( typeof v !== 'object' || v.__type !== 'Pointer' ) {
+            throw new Error('Invalid type found in pointer array');
+          }
+          const object = new Parse.Object(v.className);
+          object.id = v.objectId;
+          array.push(
+              <Pill key={i} value={v.objectId} onClick={this.props.onPointerClick.bind(undefined, object)} followClick={true} />
+            );
+        });
+        this.copyableValue = content = <ul>
+          { array.map( a => <li>{a}</li>) }
+        </ul>
+        if ( array.length > 1 ) {
+          classes.push(styles.hasMore);
+        }
+      }
+      else {
+        this.copyableValue = content = JSON.stringify(this.props.value);
+      }
+    }
+    else if (this.props.type === 'Date') {
+      if (typeof value === 'object' && this.props.value.__type) {
+        this.props.value = new Date(this.props.value.iso);
+      } else if (typeof value === 'string') {
+        this.props.value = new Date(this.props.value);
+      }
+      this.copyableValue = content = dateStringUTC(this.props.value);
+    } else if (this.props.type === 'Boolean') {
+      this.copyableValue = content = this.props.value ? 'True' : 'False';
+    } else if (this.props.type === 'Object' || this.props.type === 'Bytes') {
+      this.copyableValue = content = JSON.stringify(this.props.value);
+    } else if (this.props.type === 'File') {
+      const fileName = this.props.value.url() ? getFileName(this.props.value) : 'Uploading\u2026';
+      content = <Pill value={fileName} fileDownloadLink={this.props.value.url()} />;
+      this.copyableValue = fileName;
+    } else if (this.props.type === 'ACL') {
+      let pieces = [];
+      let json = this.props.value.toJSON();
+      if (Object.prototype.hasOwnProperty.call(json, '*')) {
+        if (json['*'].read && json['*'].write) {
+          pieces.push('Public Read + Write');
+        } else if (json['*'].read) {
+          pieces.push('Public Read');
+        } else if (json['*'].write) {
+          pieces.push('Public Write');
+        }
+      }
+      for (let role in json) {
+        if (role !== '*') {
+          pieces.push(role);
+        }
+      }
+      if (pieces.length === 0) {
+        pieces.push('Master Key Only');
+      }
+      this.copyableValue = content = pieces.join(', ');
+    } else if (this.props.type === 'GeoPoint') {
+      this.copyableValue = content = `(${this.props.value.latitude}, ${this.props.value.longitude})`;
+    } else if (this.props.type === 'Polygon') {
+      this.copyableValue = content = this.props.value.coordinates.map(coord => `(${coord})`)
+    } else if (this.props.type === 'Relation') {
+      content = this.props.setRelation ? (
+        <div style={{ textAlign: 'center' }}>
+          <Pill onClick={() => this.props.setRelation(this.props.value)} value='View relation' followClick={true} />
+        </div>
+      ) : (
+          'Relation'
+        );
+      this.copyableValue = undefined;
     }
     this.onContextMenu = this.onContextMenu.bind(this);
 
+    if (this.props.markRequiredField && this.props.isRequired && !this.props.value) {
+      classes.push(styles.required);
+    }
+
+    this.setState({ ...this.state, content, classes })
   }
 
-  componentDidUpdate(prevProps) {
+  async componentDidUpdate(prevProps) {
+    if ( this.props.value !== prevProps.value ) {
+      await this.renderCellContent();
+    }
     if (this.props.current) {
       const node = this.cellRef.current;
       const { setRelation } = this.props;
@@ -58,7 +207,7 @@ export default class BrowserCell extends Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    if (nextState.showTooltip !== this.state.showTooltip) {
+    if (nextState.showTooltip !== this.state.showTooltip || nextState.content !== this.state.content ) {
       return true;
     }
     const shallowVerifyProps = [...new Set(Object.keys(this.props).concat(Object.keys(nextProps)))]
@@ -225,139 +374,27 @@ export default class BrowserCell extends Component {
     })));
   }
 
+  componentDidMount(){
+    this.renderCellContent();
+  }
+
   //#endregion
 
   render() {
-    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, onPointerCmdClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredFieldRow } = this.props;
-    let content = value;
+    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, onPointerCmdClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredFieldRow } = this.props;
     let isNewRow = row < 0;
-    this.copyableValue = content;
-    let classes = [styles.cell, unselectable];
-    if (hidden) {
-      content = value !== undefined || !isNewRow ? '(hidden)' : isRequired ? '(required)' : '(undefined)';
-      classes.push(styles.empty);
-    } else if (value === undefined) {
-      if (type === 'ACL') {
-        this.copyableValue = content = 'Public Read + Write';
-      } else {
-        this.copyableValue = content = '(undefined)';
-        classes.push(styles.empty);
-      }
-      content = isNewRow && isRequired && value === undefined ? '(required)' : content;
-    } else if (value === null) {
-      this.copyableValue = content = '(null)';
-      classes.push(styles.empty);
-    } else if (value === '') {
-      content = <span>&nbsp;</span>;
-      classes.push(styles.empty);
-    } else if (type === 'Pointer') {
-      if (value && value.__type) {
-        const object = new Parse.Object(value.className);
-        object.id = value.objectId;
-        value = object;
-      }
-      content = onPointerClick ? (
-        <Pill
-          value={value.id}
-          onClick={onPointerClick.bind(undefined, value)}
-          followClick={true}
-        />
-      ) : (
-        value.id
-      );
-      this.copyableValue = value.id;
-    }
-    else if (type === 'Array') {
-      if (value[0] && typeof value[0] === 'object' && value[0].__type === 'Pointer') {
-        const array = [];
-        value.map((v, i) => {
-          if (typeof v !== 'object' || v.__type !== 'Pointer') {
-            throw new Error('Invalid type found in pointer array');
-          }
-          const object = new Parse.Object(v.className);
-          object.id = v.objectId;
-          array.push(
-            <Pill
-              key={v.objectId}
-              value={v.objectId}
-              onClick={onPointerClick.bind(undefined, object)}
-              followClick={true}
-            />
-          );
-        });
-        content = <ul className={styles.hasMore}>
-          {array.map(a => <li>{a}</li>)}
-        </ul>
-        this.copyableValue = JSON.stringify(value);
-        if (array.length > 1) {
-          classes.push(styles.removePadding);
-        }
-      }
-      else {
-        this.copyableValue = content = JSON.stringify(value);
-      }
-    }
-    else if (type === 'Date') {
-      if (typeof value === 'object' && value.__type) {
-        value = new Date(value.iso);
-      } else if (typeof value === 'string') {
-        value = new Date(value);
-      }
-      this.copyableValue = content = dateStringUTC(value);
-    } else if (type === 'Boolean') {
-      this.copyableValue = content = value ? 'True' : 'False';
-    } else if (type === 'Object' || type === 'Bytes') {
-      this.copyableValue = content = JSON.stringify(value);
-    } else if (type === 'File') {
-      const fileName = value.url() ? getFileName(value) : 'Uploading\u2026';
-      content = <Pill value={fileName} fileDownloadLink={value.url()} />;
-      this.copyableValue = fileName;
-    } else if (type === 'ACL') {
-      let pieces = [];
-      let json = value.toJSON();
-      if (Object.prototype.hasOwnProperty.call(json, '*')) {
-        if (json['*'].read && json['*'].write) {
-          pieces.push('Public Read + Write');
-        } else if (json['*'].read) {
-          pieces.push('Public Read');
-        } else if (json['*'].write) {
-          pieces.push('Public Write');
-        }
-      }
-      for (let role in json) {
-        if (role !== '*') {
-          pieces.push(role);
-        }
-      }
-      if (pieces.length === 0) {
-        pieces.push('Master Key Only');
-      }
-      this.copyableValue = content = pieces.join(', ');
-    } else if (type === 'GeoPoint') {
-      this.copyableValue = content = `(${value.latitude}, ${value.longitude})`;
-    } else if (type === 'Polygon') {
-      this.copyableValue = content = value.coordinates.map(coord => `(${coord})`)
-    } else if (type === 'Relation') {
-      content = setRelation ? (
-        <div style={{ textAlign: 'center' }}>
-          <Pill onClick={() => setRelation(value)} value='View relation' followClick={true} />
-        </div>
-      ) : (
-        'Relation'
-      );
-      this.copyableValue = undefined;
-    }
 
-    if (current) {
+    let classes = [...this.state.classes];
+
+    if ( current ) {
       classes.push(styles.current);
     }
-
     if (markRequiredFieldRow === row && isRequired && !value) {
       classes.push(styles.required);
     }
 
     return readonly ? (
-      <Tooltip placement='bottom' tooltip='Read only (CTRL+C to copy)' visible={this.state.showTooltip} >
+      <Tooltip placement='bottom' tooltip='Read only (CTRL+C to copy)' visible={this.state.showTooltip}>
         <span
           ref={this.cellRef}
           className={classes.join(' ')}
@@ -382,7 +419,7 @@ export default class BrowserCell extends Component {
           }}
           onContextMenu={this.onContextMenu}
         >
-          {isNewRow ? '(auto)' : content}
+          {row < 0 || isNewRow ? '(auto)' : this.state.content}
         </span>
       </Tooltip>
     ) : (
@@ -413,13 +450,11 @@ export default class BrowserCell extends Component {
             if (['ACL', 'Boolean', 'File'].includes(type)) {
               e.preventDefault();
             }
-            onEditChange(true);
-          }
-        }}
-        onContextMenu={this.onContextMenu}
-      >
-        {content}
-      </span>
+          }}}
+        onContextMenu={this.onContextMenu.bind(this)}
+        >
+          {this.state.content}
+        </span>
     );
   }
 }
diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
index 25924d651e..5ae4e78ac3 100644
--- a/src/components/BrowserRow/BrowserRow.react.js
+++ b/src/components/BrowserRow/BrowserRow.react.js
@@ -74,6 +74,7 @@ export default class BrowserRow extends Component {
           let isRequired = requiredCols.includes(name);
           return (
             <BrowserCell
+              appId={this.props.appId}
               key={name}
               schema={this.props.schema}
               simplifiedSchema={this.props.simplifiedSchema}
diff --git a/src/components/FileInput/FileInput.react.js b/src/components/FileInput/FileInput.react.js
index 1d59b78d23..cff626fd95 100644
--- a/src/components/FileInput/FileInput.react.js
+++ b/src/components/FileInput/FileInput.react.js
@@ -58,7 +58,7 @@ export default class FileInput extends React.Component {
 
     return (
       <div className={styles.input}>
-        <div className={buttonStyles.join(" ")}>
+        <div className={buttonStyles.join(' ')}>
           {this.props.uploading ? (
             <div className={styles.spinner}></div>
           ) : label ? (
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index b6e91ea62c..38669f2471 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -29,6 +29,7 @@ import prettyNumber                       from 'lib/prettyNumber';
 import queryFromFilters                   from 'lib/queryFromFilters';
 import React                              from 'react';
 import RemoveColumnDialog                 from 'dashboard/Data/Browser/RemoveColumnDialog.react';
+import PointerKeyDialog                   from 'dashboard/Data/Browser/PointerKeyDialog.react';
 import SidebarAction                      from 'components/Sidebar/SidebarAction';
 import stringCompare                      from 'lib/stringCompare';
 import styles                             from 'dashboard/Data/Browser/Browser.scss';
@@ -58,6 +59,7 @@ class Browser extends DashboardView {
       showExportDialog: false,
       showAttachRowsDialog: false,
       showEditRowDialog: false,
+      showPointerKeyDialog: false,
       rowsToDelete: null,
       rowsToExport: null,
 
@@ -141,6 +143,8 @@ class Browser extends DashboardView {
     this.addEditCloneRows = this.addEditCloneRows.bind(this);
     this.abortAddRow = this.abortAddRow.bind(this);
     this.saveNewRow = this.saveNewRow.bind(this);
+    this.showPointerKeyDialog = this.showPointerKeyDialog.bind(this);
+    this.onChangeDefaultKey = this.onChangeDefaultKey.bind(this);
     this.saveEditCloneRow = this.saveEditCloneRow.bind(this);
     this.abortEditCloneRow = this.abortEditCloneRow.bind(this);
     this.cancelPendingEditRows = this.cancelPendingEditRows.bind(this);
@@ -451,7 +455,7 @@ class Browser extends DashboardView {
               });
             },
             error => {
-              let msg = typeof error === "string" ? error : error.message;
+              let msg = typeof error === 'string' ? error : error.message;
               if (msg) {
                 msg = msg[0].toUpperCase() + msg.substr(1);
               }
@@ -471,7 +475,7 @@ class Browser extends DashboardView {
         this.setState(state);
       },
       error => {
-        let msg = typeof error === "string" ? error : error.message;
+        let msg = typeof error === 'string' ? error : error.message;
         if (msg) {
           msg = msg[0].toUpperCase() + msg.substr(1);
         }
@@ -1419,6 +1423,10 @@ class Browser extends DashboardView {
     });
   }
 
+  showPointerKeyDialog() {
+    this.setState({ showPointerKeyDialog: true });
+  }
+
   closeEditRowDialog() {
     this.setState({
       showEditRowDialog: false,
@@ -1435,6 +1443,16 @@ class Browser extends DashboardView {
     this.setState({showPermissionsDialog: opened});
   }
 
+  async onChangeDefaultKey (name) {
+    ColumnPreferences.setPointerDefaultKey(
+      this.context.currentApp.applicationId,
+      this.props.params.className,
+      name
+      );
+    this.setState({ showPointerKeyDialog: false });
+  }
+
+
   renderContent() {
     let browser = null;
     let className = this.props.params.className;
@@ -1513,6 +1531,7 @@ class Browser extends DashboardView {
             onExportSelectedRows={this.showExportSelectedRowsDialog}
 
             onSaveNewRow={this.saveNewRow}
+            onShowPointerKey={this.showPointerKeyDialog}
             onAbortAddRow={this.abortAddRow}
             onSaveEditCloneRow={this.saveEditCloneRow}
             onAbortEditCloneRow={this.abortEditCloneRow}
@@ -1552,7 +1571,18 @@ class Browser extends DashboardView {
       }
     }
     let extras = null;
-    if (this.state.showCreateClassDialog) {
+    if(this.state.showPointerKeyDialog){
+      let currentColumns = this.getClassColumns(className).map(column => column.name);
+      extras = (
+        <PointerKeyDialog
+          app={this.context.currentApp}
+          className={className}
+          currentColumns={currentColumns}
+          onCancel={() => this.setState({ showPointerKeyDialog: false })}
+          onConfirm={this.onChangeDefaultKey} />
+      );
+    }
+    else if (this.state.showCreateClassDialog) {
       extras = (
         <CreateClassDialog
           currentAppSlug={this.context.currentApp.slug}
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index 63b4626106..f96f9be4cb 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -128,6 +128,7 @@ export default class BrowserTable extends React.Component {
               return (
                 <div key={index} style={{ borderBottom: '1px solid #169CEE' }}>
                   <BrowserRow
+                    appId={this.props.appId}
                     key={index}
                     isEditing={isEditingRow}
                     className={this.props.className}
@@ -183,6 +184,7 @@ export default class BrowserTable extends React.Component {
         newRow = (
           <div style={{ borderBottom: '1px solid #169CEE' }}>
             <BrowserRow
+              appId={this.props.appId}
               key={-1}
               className={this.props.className}
               columns={this.props.columns}
@@ -235,8 +237,8 @@ export default class BrowserTable extends React.Component {
         // Needed in order to force BrowserRow to update and re-render (and possibly update columns values),
         // since the "obj" instance will only be updated when the update request is done.
         const isEditingRow = this.props.current && this.props.current.row === i && !!this.props.editing;
-
         rows[index] = <BrowserRow
+          appId={this.props.appId}
           key={index}
           isEditing={isEditingRow}
           className={this.props.className}
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
index d200c01fb1..418f837bd0 100644
--- a/src/dashboard/Data/Browser/BrowserToolbar.react.js
+++ b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -62,6 +62,7 @@ let BrowserToolbar = ({
 
   enableColumnManipulation,
   enableClassManipulation,
+  onShowPointerKey,
 
   currentUser,
   useMasterKey,
@@ -121,6 +122,7 @@ let BrowserToolbar = ({
         {enableColumnManipulation ? <MenuItem text='Add a column' onClick={onAddColumn} /> : <noscript />}
         {enableClassManipulation ? <MenuItem text='Add a class' onClick={onAddClass} /> : <noscript />}
         <Separator />
+        <MenuItem text='Change pointer key' onClick={onShowPointerKey} />
         <MenuItem
           disabled={selectionLength !== 1}
           text={'Edit this row with modal'}
@@ -329,7 +331,7 @@ let BrowserToolbar = ({
           />
         </BrowserMenu>
       )}
-      
+
     </Toolbar>
   );
 };
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 9415dd4876..785815466a 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -300,10 +300,11 @@ export default class DataBrowser extends React.Component {
 
   render() {
     let { className, count, disableSecurityDialog, onCancelPendingEditRows, editCloneRows, ...other } = this.props;
-    const { preventSchemaEdits } = this.context.currentApp;
+    const { preventSchemaEdits, applicationId } = this.context.currentApp;
     return (
       <div>
         <BrowserTable
+          appId={applicationId}
           order={this.state.order}
           current={this.state.current}
           editing={this.state.editing}
diff --git a/src/dashboard/Data/Browser/PointerKeyDialog.react.js b/src/dashboard/Data/Browser/PointerKeyDialog.react.js
new file mode 100644
index 0000000000..eac6d6f6b8
--- /dev/null
+++ b/src/dashboard/Data/Browser/PointerKeyDialog.react.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import Button                 from 'components/Button/Button.react';
+import Dropdown               from 'components/Dropdown/Dropdown.react';
+import Field                  from 'components/Field/Field.react';
+import { footer }             from 'components/Modal/Modal.scss';
+import Label                  from 'components/Label/Label.react';
+import Modal                  from 'components/Modal/Modal.react';
+import Option                 from 'components/Dropdown/Option.react';
+import React                  from 'react';
+import * as ColumnPreferences from 'lib/ColumnPreferences';
+
+export default class PointerKeyDialog extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      name: null
+    };
+  }
+
+  async componentDidMount() {
+    const pointerKey = await ColumnPreferences.getPointerDefaultKey(this.props.app.applicationId, this.props.className);
+    this.setState({ name: pointerKey });
+  }
+
+  render() {
+    let content = null;
+    let hasColumns = this.props.currentColumns.length > 0;
+    let currentColumns = [...this.props.currentColumns, 'objectId'];
+    if (hasColumns) {
+      content = (
+        <Field
+          label={
+            <Label
+              text='PointerKey' />
+            }
+          input={
+            <Dropdown
+              placeHolder='Select a column'
+              value={this.state.name}
+              onChange={(name) => this.setState({ name: name })}>
+              {currentColumns.map((t) => <Option key={t} value={t}>{t}</Option>)}
+            </Dropdown>
+          } />
+      )
+    }
+    return (
+      <Modal
+        type={Modal.Types.INFO}
+        title={'Change pointer key'}
+        subtitle={hasColumns ? `The selected column will be used to represent a pointer for class "${this.props.className}"` : `There are no columns that can be set to represent a pointer for class "${this.props.className}"`}
+        confirmText='Set pointer key'
+        cancelText={'Never mind, don\u2019t.'}
+        onCancel={this.props.onCancel}
+        disabled={!this.state.name}
+        onConfirm={() => {
+          this.props.onConfirm(this.state.name);
+        }}
+        customFooter={hasColumns ? null :
+          <div className={footer}>
+            <Button value='Okay, go back.' onClick={this.props.onCancel} />
+          </div>
+        }>
+        {content}
+      </Modal>
+    );
+  }
+}
diff --git a/src/dashboard/Data/Browser/RemoveColumnDialog.react.js b/src/dashboard/Data/Browser/RemoveColumnDialog.react.js
index 725f3b5ec3..de2506df20 100644
--- a/src/dashboard/Data/Browser/RemoveColumnDialog.react.js
+++ b/src/dashboard/Data/Browser/RemoveColumnDialog.react.js
@@ -64,4 +64,4 @@ export default class RemoveColumnDialog extends React.Component {
       </Modal>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/ColumnPreferences.js b/src/lib/ColumnPreferences.js
index 13bc46381b..76c02a9a11 100644
--- a/src/lib/ColumnPreferences.js
+++ b/src/lib/ColumnPreferences.js
@@ -139,6 +139,25 @@ export function updateCachedColumns(appId, className) {
   return order;
 }
 
+export function setPointerDefaultKey( appId, className, name ) {
+  localStorage.setItem(pointerKeyPath(appId, className), name);
+  // remove old pointer key.
+  localStorage.removeItem(className);
+}
+
+export async function getPointerDefaultKey( appId, className ) {
+  let pointerKey = await localStorage.getItem(pointerKeyPath(appId, className));
+  if ( !pointerKey ) {
+    // old pointer key.
+    pointerKey = await localStorage.getItem(className) || 'objectId';
+  }
+  return pointerKey;
+}
+
 function path(appId, className) {
   return `ParseDashboard:${VERSION}:${appId}:${className}`;
 }
+
+function pointerKeyPath( appId, className ) {
+  return `ParseDashboard:${VERSION}:${appId}:${className}::defaultPointerKey`;
+}