Sorry, no results found for "".
In addition to all the render<LOCATION>
hooks, the SDK also exposes a number of hooks that can be useful to intercept specific events happening on the interface, and execute custom code, or change the way the regular interface behaves.
All these event hooks follow the same on<EVENT>
naming convention.
There are situations where a plugin needs to execute code as soon as the DatoCMS interface is loaded. For example, a plugin may need to contact third party systems to verify some information, or maybe notify the user in some way.
In these scenarios you can use the onBoot
hook, and have the guarantee that it will be called as soon as the main DatoCMS application is loaded:
Inside this hook there is no point in rendering anything, because it won't be displayed anywhere. For a concrete use case of this hook, please have a look at the chapter Releasing new plugin versions.
Another useful group of event hooks can be used to intercept when the user wants to perform a specific action on one (or multiple) records:
onBeforeItemUpsert
: called when the user wants to save a record (both creation or update);
onBeforeItemsDestroy
: called when the user wants to delete one (or more) records;
onBeforeItemsPublish
: called when the user wants to publish one (or more) records;
onBeforeItemsUnpublish
: called when the user wants to unpublish one (or more) records;
All these hooks can return the value false
to stop the relative action from happening.
In the following example we're using the onBeforeItemUpsert
hook to check if the user is saving articles with the "highlighted" flag turned on, and if that's the case we show them an additional confirmation, to make sure they know what they're doing:
1import { connect } from 'datocms-plugin-sdk';2
3connect({4 async onBeforeItemUpsert(createOrUpdateItemPayload, ctx) {5 const item = createOrUpdateItemPayload.data;6
7 // get the ID of the Article model8 const articleItemTypeId = Object.values(ctx.itemTypes).find(itemType => itemType.attributes.api_key === 'article').id;9
10 // fast return for any record that's not an Article11 if (item.relationships.item_type.data.id !== articleItemTypeId) {12 return;13 }14
15 // fast return if the article is not highlighted16 if (!item.attributes.highlighted) {17 return;18 }19
20 const confirmation = await ctx.openConfirm({21 title: 'Mark Article as highlighted?',22 content: 'Highlighted articles are displayed on the homepage of the site!',23 cancel: { label: 'Cancel', value: false },24 choices: [25 { label: 'Yes, save as highlighted', value: true, intent: 'negative' },26 ],27 });28
29 if (!confirmation) {30 ctx.notice('The article has not been saved, you can unflag the "highlighted" field.');31 // returning false blocks the action32 return false;33 }34 }35});
We can also do something similar to confirm if the user really wants to publish a record. The onBeforeItemsPublish
hook is also called when the user is selecting multiple records from the collection page, and applying a batch publish operation:
1import { connect } from 'datocms-plugin-sdk';2
3connect({4 async onBeforeItemsPublish(items, ctx) {5 return await ctx.openConfirm({6 title: `Publish ${items.length} records?`,7 content: `This action will make the records visibile on the public website!`,8 cancel: { label: 'Cancel', value: false },9 choices: [{ label: 'Yes, publish', value: true }],10 });11 }12});
onBoot(ctx)
This function will be called once at boot time and can be used to perform ie. some initial integrity checks on the configuration.
The following properties and methods are available in the ctx
argument:
Every hook available in the Plugin SDK shares the same minumum set of properties and methods.
The current DatoCMS user. It can either be the owner or one of the collaborators (regular or SSO).
View on GithubThe role for the current DatoCMS user.
View on GithubThe access token to perform API calls on behalf of the current user. Only
available if currentUserAccessToken
additional permission is granted.
Opens a custom modal. Returns a promise resolved with what the modal itself
returns calling the resolve()
function.
1const result = await ctx.openModal({2 id: 'regular',3 title: 'Custom title!',4 width: 'l',5 parameters: { foo: 'bar' },6});7
8if (result) {9 ctx.notice(`Success! ${JSON.stringify(result)}`);10} else {11 ctx.alert('Closed!');12}
Opens a UI-consistent confirmation dialog. Returns a promise resolved with the value of the choice made by the user.
View on Github1const result = await ctx.openConfirm({2 title: 'Custom title',3 content:4 'Lorem Ipsum is simply dummy text of the printing and typesetting industry',5 choices: [6 {7 label: 'Positive',8 value: 'positive',9 intent: 'positive',10 },11 {12 label: 'Negative',13 value: 'negative',14 intent: 'negative',15 },16 ],17 cancel: {18 label: 'Cancel',19 value: false,20 },21});22
23if (result) {24 ctx.notice(`Success! ${result}`);25} else {26 ctx.alert('Cancelled!');27}
All the models of the current DatoCMS project, indexed by ID.
View on GithubAll the fields currently loaded for the current DatoCMS project, indexed by
ID. If some fields you need are not present, use the loadItemTypeFields
function to load them.
All the fieldsets currently loaded for the current DatoCMS project, indexed
by ID. If some fields you need are not present, use the
loadItemTypeFieldsets
function to load them.
All the regular users currently loaded for the current DatoCMS project,
indexed by ID. It will always contain the current user. If some users you
need are not present, use the loadUsers
function to load them.
All the SSO users currently loaded for the current DatoCMS project, indexed
by ID. It will always contain the current user. If some users you need are
not present, use the loadSsoUsers
function to load them.
Opens a dialog for creating a new record. It returns a promise resolved
with the newly created record or null
if the user closes the dialog
without creating anything.
1const itemTypeId = prompt('Please insert a model ID:');2
3const item = await ctx.createNewItem(itemTypeId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for selecting one (or multiple) record(s) from a list of
existing records of type itemTypeId
. It returns a promise resolved with
the selected record(s), or null
if the user closes the dialog without
choosing any record.
1const itemTypeId = prompt('Please insert a model ID:');2
3const items = await ctx.selectItem(itemTypeId, { multiple: true });4
5if (items) {6 ctx.notice(`Success! ${items.map((i) => i.id).join(', ')}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for editing an existing record. It returns a promise
resolved with the edited record, or null
if the user closes the dialog
without persisting any change.
1const itemId = prompt('Please insert a record ID:');2
3const item = await ctx.editItem(itemId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Loads all the fields for a specific model (or block). Fields will be
returned and will also be available in the the fields
property.
1const itemTypeId = prompt('Please insert a model ID:');2
3const fields = await ctx.loadItemTypeFields(itemTypeId);4
5ctx.notice(6 `Success! ${fields7 .map((field) => field.attributes.api_key)8 .join(', ')}`,9);
Loads all the fieldsets for a specific model (or block). Fieldsets will be
returned and will also be available in the the fieldsets
property.
1const itemTypeId = prompt('Please insert a model ID:');2
3const fieldsets = await ctx.loadItemTypeFieldsets(itemTypeId);4
5ctx.notice(6 `Success! ${fieldsets7 .map((fieldset) => fieldset.attributes.title)8 .join(', ')}`,9);
Loads all the fields in the project that are currently using the plugin for one of its manual field extensions.
View on Github1const fields = await ctx.loadFieldsUsingPlugin();2
3ctx.notice(4 `Success! ${fields5 .map((field) => field.attributes.api_key)6 .join(', ')}`,7);
Loads all regular users. Users will be returned and will also be available
in the the users
property.
1const users = await ctx.loadUsers();2
3ctx.notice(`Success! ${users.map((user) => user.id).join(', ')}`);
Loads all SSO users. Users will be returned and will also be available in
the the ssoUsers
property.
1const users = await ctx.loadSsoUsers();2
3ctx.notice(`Success! ${users.map((user) => user.id).join(', ')}`);
Moves the user to another URL internal to the backend.
View on Github1await ctx.navigateTo('/');
The current plugin.
View on GithubThe current DatoCMS project.
View on GithubThe ID of the current environment.
View on GithubThe account/organization that is the project owner.
View on GithubUI preferences of the current user (right now, only the preferred locale is available).
View on GithubAn object containing the theme colors for the current DatoCMS project.
View on GithubTriggers an "error" toast displaying the selected message.
View on Github1const message = prompt(2 'Please insert a message:',3 'This is an alert message!',4);5
6await ctx.alert(message);
Triggers a "success" toast displaying the selected message.
View on Github1const message = prompt(2 'Please insert a message:',3 'This is a notice message!',4);5
6await ctx.notice(message);
Triggers a custom toast displaying the selected message (and optionally a CTA).
View on Github1const result = await ctx.customToast({2 type: 'warning',3 message: 'Just a sample warning notification!',4 dismissOnPageChange: true,5 dismissAfterTimeout: 5000,6 cta: {7 label: 'Execute call-to-action',8 value: 'cta',9 },10});11
12if (result === 'cta') {13 ctx.notice(`Clicked CTA!`);14}
Updates the plugin parameters.
Always check ctx.currentRole.meta.final_permissions.can_edit_schema
before calling this, as the user might not have the permission to perform
the operation.
1await ctx.updatePluginParameters({ debugMode: true });2await ctx.notice('Plugin parameters successfully updated!');
Performs changes in the appearance of a field. You can install/remove a manual field extension, or tweak their parameters. If multiple changes are passed, they will be applied sequencially.
Always check ctx.currentRole.meta.final_permissions.can_edit_schema
before calling this, as the user might not have the permission to perform
the operation.
1const fields = await ctx.loadFieldsUsingPlugin();2
3if (fields.length === 0) {4 ctx.alert('No field is using this plugin as a manual extension!');5 return;6}7
8for (const field of fields) {9 const { appearance } = field.attributes;10 const operations = [];11
12 if (appearance.editor === ctx.plugin.id) {13 operations.push({14 operation: 'updateEditor',15 newParameters: {16 ...appearance.parameters,17 foo: 'bar',18 },19 });20 }21
22 appearance.addons.forEach((addon, i) => {23 if (addon.id !== ctx.plugin.id) {24 return;25 }26
27 operations.push({28 operation: 'updateAddon',29 index: i,30 newParameters: { ...addon.parameters, foo: 'bar' },31 });32 });33
34 await ctx.updateFieldAppearance(field.id, operations);35 ctx.notice(`Successfully edited field ${field.attributes.api_key}`);36}
Opens a dialog for selecting one (or multiple) existing asset(s). It
returns a promise resolved with the selected asset(s), or null
if the
user closes the dialog without selecting any upload.
1const item = await ctx.selectUpload({ multiple: false });2
3if (item) {4 ctx.notice(`Success! ${item.id}`);5} else {6 ctx.alert('Closed!');7}
Opens a dialog for editing a Media Area asset. It returns a promise resolved with:
null
, if the user closes the dialog without persisting any changedeleted
property set to true, if
the user deletes the asset.1const uploadId = prompt('Please insert an asset ID:');2
3const item = await ctx.editUpload(uploadId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for editing a "single asset" field structure. It returns a
promise resolved with the updated structure, or null
if the user closes
the dialog without persisting any change.
1const uploadId = prompt('Please insert an asset ID:');2
3const result = await ctx.editUploadMetadata({4 upload_id: uploadId,5 alt: null,6 title: null,7 custom_data: {},8 focal_point: null,9});10
11if (result) {12 ctx.notice(`Success! ${JSON.stringify(result)}`);13} else {14 ctx.alert('Closed!');15}
onBeforeItemsDestroy(items: Item[], ctx)
This function will be called before destroying records. You can stop the
action by returning false
.
The function must return: MaybePromise<boolean>
.
The following properties and methods are available in the ctx
argument:
Every hook available in the Plugin SDK shares the same minumum set of properties and methods.
The current DatoCMS user. It can either be the owner or one of the collaborators (regular or SSO).
View on GithubThe role for the current DatoCMS user.
View on GithubThe access token to perform API calls on behalf of the current user. Only
available if currentUserAccessToken
additional permission is granted.
Opens a custom modal. Returns a promise resolved with what the modal itself
returns calling the resolve()
function.
1const result = await ctx.openModal({2 id: 'regular',3 title: 'Custom title!',4 width: 'l',5 parameters: { foo: 'bar' },6});7
8if (result) {9 ctx.notice(`Success! ${JSON.stringify(result)}`);10} else {11 ctx.alert('Closed!');12}
Opens a UI-consistent confirmation dialog. Returns a promise resolved with the value of the choice made by the user.
View on Github1const result = await ctx.openConfirm({2 title: 'Custom title',3 content:4 'Lorem Ipsum is simply dummy text of the printing and typesetting industry',5 choices: [6 {7 label: 'Positive',8 value: 'positive',9 intent: 'positive',10 },11 {12 label: 'Negative',13 value: 'negative',14 intent: 'negative',15 },16 ],17 cancel: {18 label: 'Cancel',19 value: false,20 },21});22
23if (result) {24 ctx.notice(`Success! ${result}`);25} else {26 ctx.alert('Cancelled!');27}
All the models of the current DatoCMS project, indexed by ID.
View on GithubAll the fields currently loaded for the current DatoCMS project, indexed by
ID. If some fields you need are not present, use the loadItemTypeFields
function to load them.
All the fieldsets currently loaded for the current DatoCMS project, indexed
by ID. If some fields you need are not present, use the
loadItemTypeFieldsets
function to load them.
All the regular users currently loaded for the current DatoCMS project,
indexed by ID. It will always contain the current user. If some users you
need are not present, use the loadUsers
function to load them.
All the SSO users currently loaded for the current DatoCMS project, indexed
by ID. It will always contain the current user. If some users you need are
not present, use the loadSsoUsers
function to load them.
Opens a dialog for creating a new record. It returns a promise resolved
with the newly created record or null
if the user closes the dialog
without creating anything.
1const itemTypeId = prompt('Please insert a model ID:');2
3const item = await ctx.createNewItem(itemTypeId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for selecting one (or multiple) record(s) from a list of
existing records of type itemTypeId
. It returns a promise resolved with
the selected record(s), or null
if the user closes the dialog without
choosing any record.
1const itemTypeId = prompt('Please insert a model ID:');2
3const items = await ctx.selectItem(itemTypeId, { multiple: true });4
5if (items) {6 ctx.notice(`Success! ${items.map((i) => i.id).join(', ')}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for editing an existing record. It returns a promise
resolved with the edited record, or null
if the user closes the dialog
without persisting any change.
1const itemId = prompt('Please insert a record ID:');2
3const item = await ctx.editItem(itemId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Loads all the fields for a specific model (or block). Fields will be
returned and will also be available in the the fields
property.
1const itemTypeId = prompt('Please insert a model ID:');2
3const fields = await ctx.loadItemTypeFields(itemTypeId);4
5ctx.notice(6 `Success! ${fields7 .map((field) => field.attributes.api_key)8 .join(', ')}`,9);
Loads all the fieldsets for a specific model (or block). Fieldsets will be
returned and will also be available in the the fieldsets
property.
1const itemTypeId = prompt('Please insert a model ID:');2
3const fieldsets = await ctx.loadItemTypeFieldsets(itemTypeId);4
5ctx.notice(6 `Success! ${fieldsets7 .map((fieldset) => fieldset.attributes.title)8 .join(', ')}`,9);
Loads all the fields in the project that are currently using the plugin for one of its manual field extensions.
View on Github1const fields = await ctx.loadFieldsUsingPlugin();2
3ctx.notice(4 `Success! ${fields5 .map((field) => field.attributes.api_key)6 .join(', ')}`,7);
Loads all regular users. Users will be returned and will also be available
in the the users
property.
1const users = await ctx.loadUsers();2
3ctx.notice(`Success! ${users.map((user) => user.id).join(', ')}`);
Loads all SSO users. Users will be returned and will also be available in
the the ssoUsers
property.
1const users = await ctx.loadSsoUsers();2
3ctx.notice(`Success! ${users.map((user) => user.id).join(', ')}`);
Moves the user to another URL internal to the backend.
View on Github1await ctx.navigateTo('/');
The current plugin.
View on GithubThe current DatoCMS project.
View on GithubThe ID of the current environment.
View on GithubThe account/organization that is the project owner.
View on GithubUI preferences of the current user (right now, only the preferred locale is available).
View on GithubAn object containing the theme colors for the current DatoCMS project.
View on GithubTriggers an "error" toast displaying the selected message.
View on Github1const message = prompt(2 'Please insert a message:',3 'This is an alert message!',4);5
6await ctx.alert(message);
Triggers a "success" toast displaying the selected message.
View on Github1const message = prompt(2 'Please insert a message:',3 'This is a notice message!',4);5
6await ctx.notice(message);
Triggers a custom toast displaying the selected message (and optionally a CTA).
View on Github1const result = await ctx.customToast({2 type: 'warning',3 message: 'Just a sample warning notification!',4 dismissOnPageChange: true,5 dismissAfterTimeout: 5000,6 cta: {7 label: 'Execute call-to-action',8 value: 'cta',9 },10});11
12if (result === 'cta') {13 ctx.notice(`Clicked CTA!`);14}
Updates the plugin parameters.
Always check ctx.currentRole.meta.final_permissions.can_edit_schema
before calling this, as the user might not have the permission to perform
the operation.
1await ctx.updatePluginParameters({ debugMode: true });2await ctx.notice('Plugin parameters successfully updated!');
Performs changes in the appearance of a field. You can install/remove a manual field extension, or tweak their parameters. If multiple changes are passed, they will be applied sequencially.
Always check ctx.currentRole.meta.final_permissions.can_edit_schema
before calling this, as the user might not have the permission to perform
the operation.
1const fields = await ctx.loadFieldsUsingPlugin();2
3if (fields.length === 0) {4 ctx.alert('No field is using this plugin as a manual extension!');5 return;6}7
8for (const field of fields) {9 const { appearance } = field.attributes;10 const operations = [];11
12 if (appearance.editor === ctx.plugin.id) {13 operations.push({14 operation: 'updateEditor',15 newParameters: {16 ...appearance.parameters,17 foo: 'bar',18 },19 });20 }21
22 appearance.addons.forEach((addon, i) => {23 if (addon.id !== ctx.plugin.id) {24 return;25 }26
27 operations.push({28 operation: 'updateAddon',29 index: i,30 newParameters: { ...addon.parameters, foo: 'bar' },31 });32 });33
34 await ctx.updateFieldAppearance(field.id, operations);35 ctx.notice(`Successfully edited field ${field.attributes.api_key}`);36}
Opens a dialog for selecting one (or multiple) existing asset(s). It
returns a promise resolved with the selected asset(s), or null
if the
user closes the dialog without selecting any upload.
1const item = await ctx.selectUpload({ multiple: false });2
3if (item) {4 ctx.notice(`Success! ${item.id}`);5} else {6 ctx.alert('Closed!');7}
Opens a dialog for editing a Media Area asset. It returns a promise resolved with:
null
, if the user closes the dialog without persisting any changedeleted
property set to true, if
the user deletes the asset.1const uploadId = prompt('Please insert an asset ID:');2
3const item = await ctx.editUpload(uploadId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for editing a "single asset" field structure. It returns a
promise resolved with the updated structure, or null
if the user closes
the dialog without persisting any change.
1const uploadId = prompt('Please insert an asset ID:');2
3const result = await ctx.editUploadMetadata({4 upload_id: uploadId,5 alt: null,6 title: null,7 custom_data: {},8 focal_point: null,9});10
11if (result) {12 ctx.notice(`Success! ${JSON.stringify(result)}`);13} else {14 ctx.alert('Closed!');15}
onBeforeItemsPublish(items: Item[], ctx)
This function will be called before publishing records. You can stop the
action by returning false
.
The function must return: MaybePromise<boolean>
.
The following properties and methods are available in the ctx
argument:
Every hook available in the Plugin SDK shares the same minumum set of properties and methods.
The current DatoCMS user. It can either be the owner or one of the collaborators (regular or SSO).
View on GithubThe role for the current DatoCMS user.
View on GithubThe access token to perform API calls on behalf of the current user. Only
available if currentUserAccessToken
additional permission is granted.
Opens a custom modal. Returns a promise resolved with what the modal itself
returns calling the resolve()
function.
1const result = await ctx.openModal({2 id: 'regular',3 title: 'Custom title!',4 width: 'l',5 parameters: { foo: 'bar' },6});7
8if (result) {9 ctx.notice(`Success! ${JSON.stringify(result)}`);10} else {11 ctx.alert('Closed!');12}
Opens a UI-consistent confirmation dialog. Returns a promise resolved with the value of the choice made by the user.
View on Github1const result = await ctx.openConfirm({2 title: 'Custom title',3 content:4 'Lorem Ipsum is simply dummy text of the printing and typesetting industry',5 choices: [6 {7 label: 'Positive',8 value: 'positive',9 intent: 'positive',10 },11 {12 label: 'Negative',13 value: 'negative',14 intent: 'negative',15 },16 ],17 cancel: {18 label: 'Cancel',19 value: false,20 },21});22
23if (result) {24 ctx.notice(`Success! ${result}`);25} else {26 ctx.alert('Cancelled!');27}
All the models of the current DatoCMS project, indexed by ID.
View on GithubAll the fields currently loaded for the current DatoCMS project, indexed by
ID. If some fields you need are not present, use the loadItemTypeFields
function to load them.
All the fieldsets currently loaded for the current DatoCMS project, indexed
by ID. If some fields you need are not present, use the
loadItemTypeFieldsets
function to load them.
All the regular users currently loaded for the current DatoCMS project,
indexed by ID. It will always contain the current user. If some users you
need are not present, use the loadUsers
function to load them.
All the SSO users currently loaded for the current DatoCMS project, indexed
by ID. It will always contain the current user. If some users you need are
not present, use the loadSsoUsers
function to load them.
Opens a dialog for creating a new record. It returns a promise resolved
with the newly created record or null
if the user closes the dialog
without creating anything.
1const itemTypeId = prompt('Please insert a model ID:');2
3const item = await ctx.createNewItem(itemTypeId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for selecting one (or multiple) record(s) from a list of
existing records of type itemTypeId
. It returns a promise resolved with
the selected record(s), or null
if the user closes the dialog without
choosing any record.
1const itemTypeId = prompt('Please insert a model ID:');2
3const items = await ctx.selectItem(itemTypeId, { multiple: true });4
5if (items) {6 ctx.notice(`Success! ${items.map((i) => i.id).join(', ')}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for editing an existing record. It returns a promise
resolved with the edited record, or null
if the user closes the dialog
without persisting any change.
1const itemId = prompt('Please insert a record ID:');2
3const item = await ctx.editItem(itemId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Loads all the fields for a specific model (or block). Fields will be
returned and will also be available in the the fields
property.
1const itemTypeId = prompt('Please insert a model ID:');2
3const fields = await ctx.loadItemTypeFields(itemTypeId);4
5ctx.notice(6 `Success! ${fields7 .map((field) => field.attributes.api_key)8 .join(', ')}`,9);
Loads all the fieldsets for a specific model (or block). Fieldsets will be
returned and will also be available in the the fieldsets
property.
1const itemTypeId = prompt('Please insert a model ID:');2
3const fieldsets = await ctx.loadItemTypeFieldsets(itemTypeId);4
5ctx.notice(6 `Success! ${fieldsets7 .map((fieldset) => fieldset.attributes.title)8 .join(', ')}`,9);
Loads all the fields in the project that are currently using the plugin for one of its manual field extensions.
View on Github1const fields = await ctx.loadFieldsUsingPlugin();2
3ctx.notice(4 `Success! ${fields5 .map((field) => field.attributes.api_key)6 .join(', ')}`,7);
Loads all regular users. Users will be returned and will also be available
in the the users
property.
1const users = await ctx.loadUsers();2
3ctx.notice(`Success! ${users.map((user) => user.id).join(', ')}`);
Loads all SSO users. Users will be returned and will also be available in
the the ssoUsers
property.
1const users = await ctx.loadSsoUsers();2
3ctx.notice(`Success! ${users.map((user) => user.id).join(', ')}`);
Moves the user to another URL internal to the backend.
View on Github1await ctx.navigateTo('/');
The current plugin.
View on GithubThe current DatoCMS project.
View on GithubThe ID of the current environment.
View on GithubThe account/organization that is the project owner.
View on GithubUI preferences of the current user (right now, only the preferred locale is available).
View on GithubAn object containing the theme colors for the current DatoCMS project.
View on GithubTriggers an "error" toast displaying the selected message.
View on Github1const message = prompt(2 'Please insert a message:',3 'This is an alert message!',4);5
6await ctx.alert(message);
Triggers a "success" toast displaying the selected message.
View on Github1const message = prompt(2 'Please insert a message:',3 'This is a notice message!',4);5
6await ctx.notice(message);
Triggers a custom toast displaying the selected message (and optionally a CTA).
View on Github1const result = await ctx.customToast({2 type: 'warning',3 message: 'Just a sample warning notification!',4 dismissOnPageChange: true,5 dismissAfterTimeout: 5000,6 cta: {7 label: 'Execute call-to-action',8 value: 'cta',9 },10});11
12if (result === 'cta') {13 ctx.notice(`Clicked CTA!`);14}
Updates the plugin parameters.
Always check ctx.currentRole.meta.final_permissions.can_edit_schema
before calling this, as the user might not have the permission to perform
the operation.
1await ctx.updatePluginParameters({ debugMode: true });2await ctx.notice('Plugin parameters successfully updated!');
Performs changes in the appearance of a field. You can install/remove a manual field extension, or tweak their parameters. If multiple changes are passed, they will be applied sequencially.
Always check ctx.currentRole.meta.final_permissions.can_edit_schema
before calling this, as the user might not have the permission to perform
the operation.
1const fields = await ctx.loadFieldsUsingPlugin();2
3if (fields.length === 0) {4 ctx.alert('No field is using this plugin as a manual extension!');5 return;6}7
8for (const field of fields) {9 const { appearance } = field.attributes;10 const operations = [];11
12 if (appearance.editor === ctx.plugin.id) {13 operations.push({14 operation: 'updateEditor',15 newParameters: {16 ...appearance.parameters,17 foo: 'bar',18 },19 });20 }21
22 appearance.addons.forEach((addon, i) => {23 if (addon.id !== ctx.plugin.id) {24 return;25 }26
27 operations.push({28 operation: 'updateAddon',29 index: i,30 newParameters: { ...addon.parameters, foo: 'bar' },31 });32 });33
34 await ctx.updateFieldAppearance(field.id, operations);35 ctx.notice(`Successfully edited field ${field.attributes.api_key}`);36}
Opens a dialog for selecting one (or multiple) existing asset(s). It
returns a promise resolved with the selected asset(s), or null
if the
user closes the dialog without selecting any upload.
1const item = await ctx.selectUpload({ multiple: false });2
3if (item) {4 ctx.notice(`Success! ${item.id}`);5} else {6 ctx.alert('Closed!');7}
Opens a dialog for editing a Media Area asset. It returns a promise resolved with:
null
, if the user closes the dialog without persisting any changedeleted
property set to true, if
the user deletes the asset.1const uploadId = prompt('Please insert an asset ID:');2
3const item = await ctx.editUpload(uploadId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for editing a "single asset" field structure. It returns a
promise resolved with the updated structure, or null
if the user closes
the dialog without persisting any change.
1const uploadId = prompt('Please insert an asset ID:');2
3const result = await ctx.editUploadMetadata({4 upload_id: uploadId,5 alt: null,6 title: null,7 custom_data: {},8 focal_point: null,9});10
11if (result) {12 ctx.notice(`Success! ${JSON.stringify(result)}`);13} else {14 ctx.alert('Closed!');15}
onBeforeItemsUnpublish(items: Item[], ctx)
This function will be called before unpublishing records. You can stop the
action by returning false
.
The function must return: MaybePromise<boolean>
.
The following properties and methods are available in the ctx
argument:
Every hook available in the Plugin SDK shares the same minumum set of properties and methods.
The current DatoCMS user. It can either be the owner or one of the collaborators (regular or SSO).
View on GithubThe role for the current DatoCMS user.
View on GithubThe access token to perform API calls on behalf of the current user. Only
available if currentUserAccessToken
additional permission is granted.
Opens a custom modal. Returns a promise resolved with what the modal itself
returns calling the resolve()
function.
1const result = await ctx.openModal({2 id: 'regular',3 title: 'Custom title!',4 width: 'l',5 parameters: { foo: 'bar' },6});7
8if (result) {9 ctx.notice(`Success! ${JSON.stringify(result)}`);10} else {11 ctx.alert('Closed!');12}
Opens a UI-consistent confirmation dialog. Returns a promise resolved with the value of the choice made by the user.
View on Github1const result = await ctx.openConfirm({2 title: 'Custom title',3 content:4 'Lorem Ipsum is simply dummy text of the printing and typesetting industry',5 choices: [6 {7 label: 'Positive',8 value: 'positive',9 intent: 'positive',10 },11 {12 label: 'Negative',13 value: 'negative',14 intent: 'negative',15 },16 ],17 cancel: {18 label: 'Cancel',19 value: false,20 },21});22
23if (result) {24 ctx.notice(`Success! ${result}`);25} else {26 ctx.alert('Cancelled!');27}
All the models of the current DatoCMS project, indexed by ID.
View on GithubAll the fields currently loaded for the current DatoCMS project, indexed by
ID. If some fields you need are not present, use the loadItemTypeFields
function to load them.
All the fieldsets currently loaded for the current DatoCMS project, indexed
by ID. If some fields you need are not present, use the
loadItemTypeFieldsets
function to load them.
All the regular users currently loaded for the current DatoCMS project,
indexed by ID. It will always contain the current user. If some users you
need are not present, use the loadUsers
function to load them.
All the SSO users currently loaded for the current DatoCMS project, indexed
by ID. It will always contain the current user. If some users you need are
not present, use the loadSsoUsers
function to load them.
Opens a dialog for creating a new record. It returns a promise resolved
with the newly created record or null
if the user closes the dialog
without creating anything.
1const itemTypeId = prompt('Please insert a model ID:');2
3const item = await ctx.createNewItem(itemTypeId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for selecting one (or multiple) record(s) from a list of
existing records of type itemTypeId
. It returns a promise resolved with
the selected record(s), or null
if the user closes the dialog without
choosing any record.
1const itemTypeId = prompt('Please insert a model ID:');2
3const items = await ctx.selectItem(itemTypeId, { multiple: true });4
5if (items) {6 ctx.notice(`Success! ${items.map((i) => i.id).join(', ')}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for editing an existing record. It returns a promise
resolved with the edited record, or null
if the user closes the dialog
without persisting any change.
1const itemId = prompt('Please insert a record ID:');2
3const item = await ctx.editItem(itemId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Loads all the fields for a specific model (or block). Fields will be
returned and will also be available in the the fields
property.
1const itemTypeId = prompt('Please insert a model ID:');2
3const fields = await ctx.loadItemTypeFields(itemTypeId);4
5ctx.notice(6 `Success! ${fields7 .map((field) => field.attributes.api_key)8 .join(', ')}`,9);
Loads all the fieldsets for a specific model (or block). Fieldsets will be
returned and will also be available in the the fieldsets
property.
1const itemTypeId = prompt('Please insert a model ID:');2
3const fieldsets = await ctx.loadItemTypeFieldsets(itemTypeId);4
5ctx.notice(6 `Success! ${fieldsets7 .map((fieldset) => fieldset.attributes.title)8 .join(', ')}`,9);
Loads all the fields in the project that are currently using the plugin for one of its manual field extensions.
View on Github1const fields = await ctx.loadFieldsUsingPlugin();2
3ctx.notice(4 `Success! ${fields5 .map((field) => field.attributes.api_key)6 .join(', ')}`,7);
Loads all regular users. Users will be returned and will also be available
in the the users
property.
1const users = await ctx.loadUsers();2
3ctx.notice(`Success! ${users.map((user) => user.id).join(', ')}`);
Loads all SSO users. Users will be returned and will also be available in
the the ssoUsers
property.
1const users = await ctx.loadSsoUsers();2
3ctx.notice(`Success! ${users.map((user) => user.id).join(', ')}`);
Moves the user to another URL internal to the backend.
View on Github1await ctx.navigateTo('/');
The current plugin.
View on GithubThe current DatoCMS project.
View on GithubThe ID of the current environment.
View on GithubThe account/organization that is the project owner.
View on GithubUI preferences of the current user (right now, only the preferred locale is available).
View on GithubAn object containing the theme colors for the current DatoCMS project.
View on GithubTriggers an "error" toast displaying the selected message.
View on Github1const message = prompt(2 'Please insert a message:',3 'This is an alert message!',4);5
6await ctx.alert(message);
Triggers a "success" toast displaying the selected message.
View on Github1const message = prompt(2 'Please insert a message:',3 'This is a notice message!',4);5
6await ctx.notice(message);
Triggers a custom toast displaying the selected message (and optionally a CTA).
View on Github1const result = await ctx.customToast({2 type: 'warning',3 message: 'Just a sample warning notification!',4 dismissOnPageChange: true,5 dismissAfterTimeout: 5000,6 cta: {7 label: 'Execute call-to-action',8 value: 'cta',9 },10});11
12if (result === 'cta') {13 ctx.notice(`Clicked CTA!`);14}
Updates the plugin parameters.
Always check ctx.currentRole.meta.final_permissions.can_edit_schema
before calling this, as the user might not have the permission to perform
the operation.
1await ctx.updatePluginParameters({ debugMode: true });2await ctx.notice('Plugin parameters successfully updated!');
Performs changes in the appearance of a field. You can install/remove a manual field extension, or tweak their parameters. If multiple changes are passed, they will be applied sequencially.
Always check ctx.currentRole.meta.final_permissions.can_edit_schema
before calling this, as the user might not have the permission to perform
the operation.
1const fields = await ctx.loadFieldsUsingPlugin();2
3if (fields.length === 0) {4 ctx.alert('No field is using this plugin as a manual extension!');5 return;6}7
8for (const field of fields) {9 const { appearance } = field.attributes;10 const operations = [];11
12 if (appearance.editor === ctx.plugin.id) {13 operations.push({14 operation: 'updateEditor',15 newParameters: {16 ...appearance.parameters,17 foo: 'bar',18 },19 });20 }21
22 appearance.addons.forEach((addon, i) => {23 if (addon.id !== ctx.plugin.id) {24 return;25 }26
27 operations.push({28 operation: 'updateAddon',29 index: i,30 newParameters: { ...addon.parameters, foo: 'bar' },31 });32 });33
34 await ctx.updateFieldAppearance(field.id, operations);35 ctx.notice(`Successfully edited field ${field.attributes.api_key}`);36}
Opens a dialog for selecting one (or multiple) existing asset(s). It
returns a promise resolved with the selected asset(s), or null
if the
user closes the dialog without selecting any upload.
1const item = await ctx.selectUpload({ multiple: false });2
3if (item) {4 ctx.notice(`Success! ${item.id}`);5} else {6 ctx.alert('Closed!');7}
Opens a dialog for editing a Media Area asset. It returns a promise resolved with:
null
, if the user closes the dialog without persisting any changedeleted
property set to true, if
the user deletes the asset.1const uploadId = prompt('Please insert an asset ID:');2
3const item = await ctx.editUpload(uploadId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for editing a "single asset" field structure. It returns a
promise resolved with the updated structure, or null
if the user closes
the dialog without persisting any change.
1const uploadId = prompt('Please insert an asset ID:');2
3const result = await ctx.editUploadMetadata({4 upload_id: uploadId,5 alt: null,6 title: null,7 custom_data: {},8 focal_point: null,9});10
11if (result) {12 ctx.notice(`Success! ${JSON.stringify(result)}`);13} else {14 ctx.alert('Closed!');15}
onBeforeItemUpsert(createOrUpdateItemPayload: ItemUpdateSchema | ItemCreateSchema, ctx)
This function will be called before saving a new version of a record. You
can stop the action by returning false
.
The function must return: MaybePromise<boolean>
.
The following properties and methods are available in the ctx
argument:
Every hook available in the Plugin SDK shares the same minumum set of properties and methods.
The current DatoCMS user. It can either be the owner or one of the collaborators (regular or SSO).
View on GithubThe role for the current DatoCMS user.
View on GithubThe access token to perform API calls on behalf of the current user. Only
available if currentUserAccessToken
additional permission is granted.
Opens a custom modal. Returns a promise resolved with what the modal itself
returns calling the resolve()
function.
1const result = await ctx.openModal({2 id: 'regular',3 title: 'Custom title!',4 width: 'l',5 parameters: { foo: 'bar' },6});7
8if (result) {9 ctx.notice(`Success! ${JSON.stringify(result)}`);10} else {11 ctx.alert('Closed!');12}
Opens a UI-consistent confirmation dialog. Returns a promise resolved with the value of the choice made by the user.
View on Github1const result = await ctx.openConfirm({2 title: 'Custom title',3 content:4 'Lorem Ipsum is simply dummy text of the printing and typesetting industry',5 choices: [6 {7 label: 'Positive',8 value: 'positive',9 intent: 'positive',10 },11 {12 label: 'Negative',13 value: 'negative',14 intent: 'negative',15 },16 ],17 cancel: {18 label: 'Cancel',19 value: false,20 },21});22
23if (result) {24 ctx.notice(`Success! ${result}`);25} else {26 ctx.alert('Cancelled!');27}
All the models of the current DatoCMS project, indexed by ID.
View on GithubAll the fields currently loaded for the current DatoCMS project, indexed by
ID. If some fields you need are not present, use the loadItemTypeFields
function to load them.
All the fieldsets currently loaded for the current DatoCMS project, indexed
by ID. If some fields you need are not present, use the
loadItemTypeFieldsets
function to load them.
All the regular users currently loaded for the current DatoCMS project,
indexed by ID. It will always contain the current user. If some users you
need are not present, use the loadUsers
function to load them.
All the SSO users currently loaded for the current DatoCMS project, indexed
by ID. It will always contain the current user. If some users you need are
not present, use the loadSsoUsers
function to load them.
Opens a dialog for creating a new record. It returns a promise resolved
with the newly created record or null
if the user closes the dialog
without creating anything.
1const itemTypeId = prompt('Please insert a model ID:');2
3const item = await ctx.createNewItem(itemTypeId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for selecting one (or multiple) record(s) from a list of
existing records of type itemTypeId
. It returns a promise resolved with
the selected record(s), or null
if the user closes the dialog without
choosing any record.
1const itemTypeId = prompt('Please insert a model ID:');2
3const items = await ctx.selectItem(itemTypeId, { multiple: true });4
5if (items) {6 ctx.notice(`Success! ${items.map((i) => i.id).join(', ')}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for editing an existing record. It returns a promise
resolved with the edited record, or null
if the user closes the dialog
without persisting any change.
1const itemId = prompt('Please insert a record ID:');2
3const item = await ctx.editItem(itemId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Loads all the fields for a specific model (or block). Fields will be
returned and will also be available in the the fields
property.
1const itemTypeId = prompt('Please insert a model ID:');2
3const fields = await ctx.loadItemTypeFields(itemTypeId);4
5ctx.notice(6 `Success! ${fields7 .map((field) => field.attributes.api_key)8 .join(', ')}`,9);
Loads all the fieldsets for a specific model (or block). Fieldsets will be
returned and will also be available in the the fieldsets
property.
1const itemTypeId = prompt('Please insert a model ID:');2
3const fieldsets = await ctx.loadItemTypeFieldsets(itemTypeId);4
5ctx.notice(6 `Success! ${fieldsets7 .map((fieldset) => fieldset.attributes.title)8 .join(', ')}`,9);
Loads all the fields in the project that are currently using the plugin for one of its manual field extensions.
View on Github1const fields = await ctx.loadFieldsUsingPlugin();2
3ctx.notice(4 `Success! ${fields5 .map((field) => field.attributes.api_key)6 .join(', ')}`,7);
Loads all regular users. Users will be returned and will also be available
in the the users
property.
1const users = await ctx.loadUsers();2
3ctx.notice(`Success! ${users.map((user) => user.id).join(', ')}`);
Loads all SSO users. Users will be returned and will also be available in
the the ssoUsers
property.
1const users = await ctx.loadSsoUsers();2
3ctx.notice(`Success! ${users.map((user) => user.id).join(', ')}`);
Moves the user to another URL internal to the backend.
View on Github1await ctx.navigateTo('/');
The current plugin.
View on GithubThe current DatoCMS project.
View on GithubThe ID of the current environment.
View on GithubThe account/organization that is the project owner.
View on GithubUI preferences of the current user (right now, only the preferred locale is available).
View on GithubAn object containing the theme colors for the current DatoCMS project.
View on GithubTriggers an "error" toast displaying the selected message.
View on Github1const message = prompt(2 'Please insert a message:',3 'This is an alert message!',4);5
6await ctx.alert(message);
Triggers a "success" toast displaying the selected message.
View on Github1const message = prompt(2 'Please insert a message:',3 'This is a notice message!',4);5
6await ctx.notice(message);
Triggers a custom toast displaying the selected message (and optionally a CTA).
View on Github1const result = await ctx.customToast({2 type: 'warning',3 message: 'Just a sample warning notification!',4 dismissOnPageChange: true,5 dismissAfterTimeout: 5000,6 cta: {7 label: 'Execute call-to-action',8 value: 'cta',9 },10});11
12if (result === 'cta') {13 ctx.notice(`Clicked CTA!`);14}
Updates the plugin parameters.
Always check ctx.currentRole.meta.final_permissions.can_edit_schema
before calling this, as the user might not have the permission to perform
the operation.
1await ctx.updatePluginParameters({ debugMode: true });2await ctx.notice('Plugin parameters successfully updated!');
Performs changes in the appearance of a field. You can install/remove a manual field extension, or tweak their parameters. If multiple changes are passed, they will be applied sequencially.
Always check ctx.currentRole.meta.final_permissions.can_edit_schema
before calling this, as the user might not have the permission to perform
the operation.
1const fields = await ctx.loadFieldsUsingPlugin();2
3if (fields.length === 0) {4 ctx.alert('No field is using this plugin as a manual extension!');5 return;6}7
8for (const field of fields) {9 const { appearance } = field.attributes;10 const operations = [];11
12 if (appearance.editor === ctx.plugin.id) {13 operations.push({14 operation: 'updateEditor',15 newParameters: {16 ...appearance.parameters,17 foo: 'bar',18 },19 });20 }21
22 appearance.addons.forEach((addon, i) => {23 if (addon.id !== ctx.plugin.id) {24 return;25 }26
27 operations.push({28 operation: 'updateAddon',29 index: i,30 newParameters: { ...addon.parameters, foo: 'bar' },31 });32 });33
34 await ctx.updateFieldAppearance(field.id, operations);35 ctx.notice(`Successfully edited field ${field.attributes.api_key}`);36}
Opens a dialog for selecting one (or multiple) existing asset(s). It
returns a promise resolved with the selected asset(s), or null
if the
user closes the dialog without selecting any upload.
1const item = await ctx.selectUpload({ multiple: false });2
3if (item) {4 ctx.notice(`Success! ${item.id}`);5} else {6 ctx.alert('Closed!');7}
Opens a dialog for editing a Media Area asset. It returns a promise resolved with:
null
, if the user closes the dialog without persisting any changedeleted
property set to true, if
the user deletes the asset.1const uploadId = prompt('Please insert an asset ID:');2
3const item = await ctx.editUpload(uploadId);4
5if (item) {6 ctx.notice(`Success! ${item.id}`);7} else {8 ctx.alert('Closed!');9}
Opens a dialog for editing a "single asset" field structure. It returns a
promise resolved with the updated structure, or null
if the user closes
the dialog without persisting any change.
1const uploadId = prompt('Please insert an asset ID:');2
3const result = await ctx.editUploadMetadata({4 upload_id: uploadId,5 alt: null,6 title: null,7 custom_data: {},8 focal_point: null,9});10
11if (result) {12 ctx.notice(`Success! ${JSON.stringify(result)}`);13} else {14 ctx.alert('Closed!');15}