Implementing an Item Selector

Issue

I am trying to create an Item Selector using the article Implementing an Item Selector
On step 5, Portlet shows but clicking on the "Select button" gives error message in console and nothing else happens

Environment

Liferay DXP 7.4

Resolution

Unfortunately, there is an error in the documentation (it has 2 small typos in the code), not in the item selector itself
F5D5Portlet has to be modified to avoid Java.lang.UnsupportedOperationException: Requires 3.0 opt-inYou have to add "javax.portlet.version=3.0" to portlet properties in the class, like this (line 6):

@Component(
property = {
"com.liferay.portlet.display-category=category.sample",
"javax.portlet.display-name=F5D5 Portlet",
"javax.portlet.init-param.view-template=/view.jsp",
"javax.portlet.version=3.0"
},
service = Portlet.class
)
public class F5D5Portlet extends MVCPortlet {

view.jsp also has a typo. The new particle has to be removed in line 22. Should be:

selectRoleButton.addEventListener(
'click',
function(event) {
Liferay.Util.openSelectionModal(
{
onSelect: function (event) {
alert(event.value);
},
selectEventName: '<portlet:namespace />selectRole',
title: 'Select Role',
url: '<%= request.getAttribute(F5D5WebKeys.ITEM_SELECTOR_URL) %>'
}
);
}
);

instead of

selectRoleButton.addEventListener(
'click',
function(event) {
new Liferay.Util.openSelectionModal(
{
onSelect: function (event) {
alert(event.value);
},
selectEventName: '<portlet:namespace />selectRole',
title: 'Select Role',
url: '<%= request.getAttribute(F5D5WebKeys.ITEM_SELECTOR_URL) %>'
}
);
}
);

Once these changes are applied, the portlet works as expected

We have requested the modification of our documentation and are currently working on fixing it