Contents โ
Let's say that in your BCMS you have Blogs and every time that new blog is added you would like to send a Slack notification. You would do this by creating a BCMS Event.
BCMS Event is a simple custom JavaScript function which is called by the BCMS every time that specified event is triggered. They are very simple to understand and use, and the best way to explain this is to show to you an example.
How to create a BCMS Event?
We will start by creating a BCMS Event in local BCMS to make testing and development much faster. All that you have to do to make an Event is to create file under ./src/events and add configuration to it. Let's do something like this:
// File: ./src/events/test.ts
import { createBcmsEvent } from '@becomes/cms-backend/src/event';
import {
BCMSEventConfigMethod,
BCMSEventConfigScope,
BCMSTemplate,
} from '@becomes/cms-backend/src/types';
export default createBcmsEvent(async () => {
return {
config: {
scope: BCMSEventConfigScope.TEMPLATE,
method: BCMSEventConfigMethod.ALL,
},
async handler({ scope, method, payload }) {
const data = payload as BCMSTemplate;
console.log({ scope, method, data });
},
};
});
We've created an event which will be triggered on every change to BCMS Templates. This means that if we create a new Template, our handler method will be called. This is also the case if a Template is updated or deleted.
Let's explain what are properties for Event configuration:
config.scope- Specify what is the Event listening for. This can be one of predefined internal BCMS Event Scopes or it can be any string value.config.method- For defined scope, specify which method will trigger the Event. This can be one of predefined internal BCMS Event Methods or it can be any string value.handler- Custom logic which will be executed when the Event is called.
That's it! Inside of the handler you can put any logic you need to achieve desired functionality. We will show you one more example which we mentioned at the beginning of the post. How to send a Slack message every time that a new Entry is added to Blogs:
import { createBcmsEvent } from '@becomes/cms-backend/src/event';
import { BCMSRepo } from '@becomes/cms-backend/src/repo';
import {
BCMSEntry,
BCMSEventConfigMethod,
BCMSEventConfigScope,
} from '@becomes/cms-backend/src/types';
import Axios from 'axios';
export default createBcmsEvent(async () => {
return {
config: {
scope: BCMSEventConfigScope.ENTRY,
method: BCMSEventConfigMethod.ADD,
},
async handler({ payload }) {
const data = payload as BCMSEntry;
const template = await BCMSRepo.template.methods.findByName('blogs');
if (template) {
if (data.templateId === template._id) {
await Axios({
url: process.env.SLACK_HOOK,
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: {
text: `:green_heart: New blog post "${
(data.meta[0].props[0].data as string[])[0]
}" was added to your BCMS.`,
},
});
}
}
},
};
});
Learn more about Slack webhooks to see how to send and style your messages.
Deploy BCMS Event
This is the same as with BCMS Functions. In your BCMS project, just run npm run bundle. This will bundle and prepare all your resources to be deployed to the live BCMS. Once that is done, run npm run deploy. You will be asked to select a BCMS Instance to which you want to deploy your code. After that, your code will be live, and you can interact with it.