The interceptor is just a record in advanced configuration options. The record name has to start with a prefix pfxInterceptor_
and then it has to continue with actual interceptor name. Correct name is for example pfxInterceptor_myFirstExperiment
.
The record cannot be empty, in such a case Unity will show you an error: “The interceptor with name pfxInterceptor_myFirstExperiment was not found”
Basic
First step
Interceptors are written in plain JavaScript.
The main part of the interceptor are exported constants which contains a function.
The simplest possible example is this:
Code Block | ||
---|---|---|
| ||
export const quotesDetailNew = () => {
console.log('Test 1');
}; |
Code above will display message Test 1 at Console
tab in web browser developer tools:
...
The name of the constant quotesDetailNew
, determines where and when the code will be triggered. List of possible names is in Unity under /wiki/spaces/UDEV/pages/3814555767. When you are exporting non existing name from your interceptor, for example because of typo, Unity will display an error with unknown method names.
Each named constant can exists in two variants, one is for PRE action with a suffix Pre
and second one for POST action where the suffix is omitted.
Code Block | ||
---|---|---|
| ||
export const quotesDetailNewPre = () => {
console.log('This will be triggered before quotesDetailNew');
};
export const quotesDetailNew = () => {
console.log('Test 1');
}; |
You don't need to implement both variants. In some cases only PRE action has a sense, for others it is only POST action. TBD - Explain where to use PRE & POST
Function parameters
When Unity triggers a function which is in your exported constant, it will pass an object parameter to it. This object contains API functions and data related to the triggered action.
Code Block | ||
---|---|---|
| ||
export const quotesDetailNew = (parameter) => {
console.log(parameter);
}; |
The content of passed parameter can vary. There is a common set which you get all the time. It is under key name api
and it contains generic functions which you can use in all pfx modules. If you know, that you will need api
, you can use JavaScript shortcuts to obtain it.
Code Block | ||
---|---|---|
| ||
export const quotesDetailNew = ({api}) => {
api.notify.success('New quote created interceptor');
}; |
This example will show green notification when a user create a new quote.
Or in case that you know exactly what you need you can squeeze it a little bit more.
Code Block | ||
---|---|---|
| ||
export const quotesDetailNew = ({ api: { notify } }) => {
notify.success("New quote created interceptor 2");
}; |
If you have no clue what you get, you can always observe that parameter thru web browser developer tools by using key word debugger.
...
Table of Contents | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Anchor | ||||
---|---|---|---|---|
|
Info |
---|
Available from version 14.0 |
You can edit Interceptor's code directly from Pricefx.
Go to Administration > Configuration > CRM Integration > Interceptors.
Click Edit interceptor.
The window with the code of the currently Active interceptor will appear.
...
How to Add Interceptor Method Template in Pricefx
Prerequisites:
Make sure you have the Develop Interceptors role assigned.
You have crated Interceptor, and it’s assigned to CRM config.
Steps to edit an Interceptor:
In Configuration > Interceptors you will see all available intercepted methods. Each method refers to an event in Pricefx Interceptor Methods. Some of these events are:
quotesDetailNewCheck
This method is triggered after clicking the New button at /#/qc/quotes, but before the Quote is created. If this method returns false, the Quote will not be created and the user will stay at the Quote list. In this method you do not have access to quoteAPI, but you can use other APIs for checking conditions from CRMs.quotesDetailNew
The starting point for this event is clicking the New button at /#/qc/quotes. The method is triggered after the new Quote is recalculated and saved at backend and the user is redirected to the Quote detail page /#/qc/quotes/<quoteId>.quotesDetailEdit
Triggered when a user opens the Quote detail page.quotesDetailRecalculate
Triggered when a user clicks the Recalculate button on the Quote detail page /#/qc/quotes/<quoteId>.quotesDetailSubmit
Triggered when a user clicks the OK button in the Submit modal dialog on the Quote detail page /#/qc/quotes/<quoteId> after clicking Submit.quotesDetailTabSwitch
Triggered at Quote detail at open and then when the user switches to a different tab.
To see a regularly updated list of all available methods and when they are triggered, visit interceptor Method Names.
As you expand one of the method fields, you will see Add PRE Code, and/or Add POST Code buttons (according to each method’s compatibility):
When clicking any of them, a modal window will show:
There is a dropdown menu with available templates, and you can also paste your JavaScript code in there.Reload the interceptor every time after modifying the interceptor to apply changes.
Finally, you can test the interceptor's functionality, in this case by creating a new quote:
...
How to Edit Interceptor in VSCode or VSCodium
Prerequisites: Make sure you have the Develop Interceptors role assigned.
For a better user experience during development, we strongly recommend using VSCode with the Pricefx Code extension as IntelliJ offers JavaScript code highlighting only in paid versions of the IDE.
Install and login to the partition in which you want to edit interceptor. Here's how to get it done Pricefx Code.
Open the interceptor you would like to edit.
Save the file after editing is done. A notification should appear and inform that the interceptor was saved.
Reload the interceptor every time after modifying the interceptor to apply changes.
How to Edit Interceptor in IntelliJ
Prerequisites: Make sure you have the Develop Interceptors and General Admin role assigned.
Steps to edit an Interceptor:
Check your version of Pricefx Studio in Plugins and update the version if necessary. If the plugin is missing, install Pricefx Studio first.
Edit the Config.js file to be able to fetch and deploy your solution to the correct environment.
After creating a new Dynamic Interceptor on the Configuration > Interceptors page, you can fetch it. Select the Environment and Partition that you want to work with and locate your interceptor in the Advanced configuration. Then click the Fetch button.
The procedure is similar to deploying your solution after some changes.
After the code is deployed, use the Reload Interceptor functionality.