Managing User Preferences

As your users interact with the Admin Panel, you might want to store their preferences in a persistent manner, so that when they revisit the Admin Panel in a different session or from a different device, they can pick right back up where they left off.

Out of the box, Payload handles the persistence of your users' preferences in a handful of ways, including:

  1. Columns in the Collection List View: their active state and order
  2. The user's last active Locale
  3. The "collapsed" state of blocks, array, and collapsible fields
  4. The last-known state of the Nav component, etc.

Use Cases

This API is used significantly for internal operations of the Admin Panel, as mentioned above. But, if you're building your own React components for use in the Admin Panel, you can allow users to set their own preferences in correspondence to their usage of your components. For example:

  • If you have built a "color picker", you could "remember" the last used colors that the user has set for easy access next time
  • If you've built a custom Nav component, and you've built in an "accordion-style" UI, you might want to store the collapsed state of each Nav collapsible item. This way, if an editor returns to the panel, their Nav state is persisted automatically
  • You might want to store recentlyAccessed documents to give admin editors an easy shortcut back to their recently accessed documents on the Dashboard or similar
  • Many other use cases exist. Invent your own! Give your editors an intelligent and persistent editing experience.

Database

Payload automatically creates an internally used payload-preferences Collection that stores user preferences. Each document in the payload-preferences Collection contains the following shape:

KeyValue
idA unique ID for each preference stored.
keyA unique key that corresponds to the preference.
user.valueThe ID of the user that is storing its preference.
user.relationToThe slug of the Collection that the user is logged in as.
valueThe value of the preference. Can be any data shape that you need.
createdAtA timestamp of when the preference was created.
updatedAtA timestamp set to the last time the preference was updated.

APIs

Preferences are available to both GraphQL and REST APIs.

Adding or reading Preferences in your own components

The Payload Admin Panel offers a usePreferences hook. The hook is only meant for use within the Admin Panel itself. It provides you with two methods:

getPreference

This async method provides an easy way to retrieve a user's preferences by key. It will return a promise containing the resulting preference value.

Arguments

  • key: the key of your preference to retrieve.

setPreference

Also async, this method provides you with an easy way to set a user preference. It returns void.

Arguments:

  • key: the key of your preference to set.
  • value: the value of your preference that you're looking to set.

Example

Here is an example for how you can utilize usePreferences within your custom Admin Panel components. Note - this example is not fully useful and is more just a reference for how to utilize the Preferences API. In this case, we are demonstrating how to set and retrieve a user's last used colors history within a ColorPicker or similar type component.

1
'use client'
2
import React, { Fragment, useState, useEffect, useCallback } from 'react';
3
import { usePreferences } from '@payloadcms/ui'
4
5
const lastUsedColorsPreferenceKey = 'last-used-colors';
6
7
const CustomComponent = (props) => {
8
const { getPreference, setPreference } = usePreferences();
9
10
// Store the last used colors in local state
11
const [lastUsedColors, setLastUsedColors] = useState([]);
12
13
// Callback to add a color to the last used colors
14
const updateLastUsedColors = useCallback((color) => {
15
// First, check if color already exists in last used colors.
16
// If it already exists, there is no need to update preferences
17
const colorAlreadyExists = lastUsedColors.indexOf(color) > -1;
18
19
if (!colorAlreadyExists) {
20
const newLastUsedColors = [
21
...lastUsedColors,
22
color,
23
];
24
25
setLastUsedColors(newLastUsedColors);
26
setPreference(lastUsedColorsPreferenceKey, newLastUsedColors);
27
}
28
}, [lastUsedColors, setPreference]);
29
30
// Retrieve preferences on component mount
31
// This will only be run one time, because the `getPreference` method never changes
32
useEffect(() => {
33
const asyncGetPreference = async () => {
34
const lastUsedColorsFromPreferences = await getPreference(lastUsedColorsPreferenceKey);
35
setLastUsedColors(lastUsedColorsFromPreferences);
36
};
37
38
asyncGetPreference();
39
}, [getPreference]);
40
41
return (
42
<div>
43
<button
44
type="button"
45
onClick={() => updateLastUsedColors('red')}
46
>
47
Use red
48
</button>
49
<button
50
type="button"
51
onClick={() => updateLastUsedColors('blue')}
52
>
53
Use blue
54
</button>
55
<button
56
type="button"
57
onClick={() => updateLastUsedColors('purple')}
58
>
59
Use purple
60
</button>
61
<button
62
type="button"
63
onClick={() => updateLastUsedColors('yellow')}
64
>
65
Use yellow
66
</button>
67
{lastUsedColors && (
68
<Fragment>
69
<h5>Last used colors:</h5>
70
<ul>
71
{lastUsedColors?.map((color) => (
72
<li key={color}>
73
{color}
74
</li>
75
))}
76
</ul>
77
</Fragment>
78
)}
79
</div>
80
);
81
};
82
83
export default CustomComponent;
Next

Customizing CSS & SCSS