Working with PIM systems is interesting and challenging. Akeneo projects brought me a lot of lessons learned that I’m glad to share with you from a developer point of view.
In many of my previous posts, you could notice a module called UserContext in my code. Now that you have more knowledge and understanding of developing UI in the PIM, I’m back with a new tutorial.
Simply put, UserContext is a commonly used RequireJS module in Akeneo that makes it possible to access OR modify some data related to the logged-in user (such as chosen language or username). Source code of this module you can find here. I’ll discuss further in the article the usage of UserContext in both, RequireJS modules and React components.
My blog post series provides some context and explanation of the principles used to build UI in the PIM. Check the other articles:
- Akeneo PIM UI – Complete Guide for Frontend Developers
- What should you know about the structure of RequireJS modules in Akeneo PIM?
- Getting started with creating frontend modules in Akeneo PIM
- How to override a RequireJS module?
- How to extend existing modules based on RequireJS?
- How to share information between frontend components in Akeneo PIM with mediator pattern?
- How to use custom labels in Akeneo UI, translate components, or replace default strings?
The right way to use UserContext in RequireJS modules
To use UserContext module, you have to import it in the following way:
define(['pim/user-context'], function(UserContext) {
// code goes here
});You can make use of console.log to print out UserContext and discover what you will get:
First, let's focus on arguments which the get function takes and the returned values:
console.log(UserContext.get('catalogLocale')); – The returned value will be a string that is equal to code representing the language of the catalog.
console.log(UserContext.get('username')); – The returned value will be a string that is equal to the current username.
console.log(UserContext.get('uiLocale')); – The returned value will be a string that is equal to code that represents the UI language.
console.log(UserContext.get('catalogScope')); – The returned value will be a string that is equal to catalogScope where functions were called.
Analogously, you can set some values. For this case, the set function takes two arguments. The first argument is the name of the parameter which you want to set and the second one is the value of this parameter.
UserContext.set('parameter_name’, ‘parameter_value’)
Some examples of setting values with the set function:
UserContext.set('catalogLocale', ‘pl_PL’);
UserContext.set('catalogScope', scope);
Usage of UserContext in React components
For React components, there are two ways to import and use UserContext. The first approach is to import UserContext by require keyword and assigning it to the variable:
const UserContext = require("pim/user-context");Then you can follow the same steps I listed for RequireJS modules.
Another solution is to use the useUserContext hook which is a custom hook delivered by Akeneo developers. Maybe you have noticed that the useUserContext hook is similar to hooks which we talked about in previous posts: useTranslate and useMediator. You should import it from @akeneo-pim-community/shared as follows:
import {useUserContext} from '@akeneo-pim-community/shared';
const userContext = useUserContext();And I would like you to know that there is also a more common approach for using useUserContext:
userContext.get('uiLocale');
The source code of the hook you can find here.
Thank you for stopping by. What is it like to be a part of Akeneo projects? You can always reach out to us if you have any questions or check our business and technical articles about Akeneo PIM.