Sitecore Content Hub - User Group Display Component!

on


Hello there, fellow foodies of the coding world! Welcome to our delightful restaurant of mistaken orders, where our primary dish today is the spicy, flavorful, and ever so complex: "Sitecore Content Hub User Group Display Component!" Don your aprons and chef hats, and let's dive deep into the recipe of this code dish. 🍳

🍛 The Idea:

Before we stir the pot, let's discuss the idea. The code dish we're preparing serves to display the user groups that a user belongs to, right on their profile image. Imagine a pizza, and each slice is a user group. As a user, you can see which slices (or groups) you're a part of, just by looking at the pizza (your profile image). Savory, right?

User Profile Usergroups








🍜 Ingredients:

  • jQuery: The aromatic herb we'll be using to traverse and manipulate our HTML.
  • MutationObserver: The secret sauce ensuring that our ingredients (DOM elements) are ready before we start our culinary magic.
  • User Groups: The meaty chunks that we'll be refining to suit our taste.

🍳 Cooking Instructions:

Preparing the Meat (User Groups):

First, we filter out the basic flavors. We want our dish to stand out, so we're removing groups containing ".Base" or ".Role".

But wait! If our list contains the spicy "M.Consumer.US" flavor, we further refine by removing the "DML.Consumer.Base" group. It's all about balance!

Marinating the Meat:

To add some zest, we tweak the naming of our user groups. We remove any unwanted prefixes like "m" or "M." and replace any dot (.) with a space, making it more palatable.

Refining the Dish:

We don't want any overpowering flavors. Thus, we remove groups like "Everyone" or "TermsAndConditions".

To ensure uniqueness, we don't want duplicate ingredients. We get the unique groups and further refine them by removing words like "Base" or "Role".

Serving the Dish:

Now, we place our refined and unique user groups on the plate (or rather, into the HTML). Each group is garnished with a fancy icon and made clickable, though it doesn't lead anywhere right now (maybe to more recipes in the future? 😉).

Ensuring Perfect Temperature:

We wait for the right moment (using our secret sauce, the MutationObserver) to ensure our profile settings link is ready.

Once ready, we serve our dish hot! When you hover over the profile settings, our delicious user groups are displayed, and they hide when you move away.

🥘 Pro Tips from the Chef:

The kitchen can be unpredictable. Thus, we wrap parts of our code in try-catch to handle any unforeseen spills or burns (errors).

The waitForElm function is our oven timer. It ensures we don't start garnishing until our main dish (DOM element) is fully baked and ready.

🍰 Dessert:

After savoring this flavorful dish, remember: coding, like cooking, is an art. Sometimes it’s the mistaken orders that bring out the most delightful flavors. And while our restaurant might serve orders with a twist, it's always a gastronomic journey to remember!

The Code (code tab):

$(document).ready(function () {
var optionsUserGroups = options.userGroups.filter(x => !(x.includes(".Base") || x.includes(".Role")));

if (optionsUserGroups.includes("M.Consumer.US")) {
optionsUserGroups = jQuery.grep(optionsUserGroups, function (value) {
return value !== "M.Consumer.Base";
});
}

try {
var userGroups = optionsUserGroups.map(function (value) {
var newValue = value.replace(/m|M\./g, "");
return newValue ? newValue.replace(".", " ") : value;
});
} catch (err) {
console.log(`There was an error in Getting usergroups for user profile. ${err}`);
}

try {
if (userGroups.length > 0) {
var updatedUserGroupsArray = userGroups.filter(function (value) {
return !/Everyone|TermsAndConditions/.test(value);
});
}
} catch (err) {
console.log(`There was an error in Getting usergroups for user profile. ${err}`);
}

try {
if (updatedUserGroupsArray.length > 0) {
var uniqueUserGroups = [...new Set(updatedUserGroupsArray)];
var finalUserGroups = uniqueUserGroups.map(function (value) {
var newValue = value.replace(/Base|Role/g, "");
return newValue ? newValue.replace(".", " ") : value;
});
$.each(finalUserGroups, function (index, value) {
$(`<a class="dropdown-item" href="#"><li class="m-icon m-icon-people"></li>${value}</a>"`).insertAfter(".dropdown-divider");
});
}
} catch (err) {
console.log(`There was an error in Getting usergroups for user profile. ${err}`);
}

var selector = 'a[title*="Profile and settings"]';
waitForElm(selector).then((elem) => {
$(selector).click(function() {
$("#profile-groups-menu").hide();
$("#profile-groups-menu").addClass("hide");
});

$(selector).hover(function () {
$("#profile-groups-menu").show();
$("#profile-groups-menu").removeClass("hide");
}, function () {
$("#profile-groups-menu").hide();
$("#profile-groups-menu").addClass("hide");
});
});
});

function waitForElm(selector) {
return new Promise(resolve => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(mutations => {
if (document.querySelector(selector)) {
resolve(document.querySelector(selector));
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
<!-- / TEMPLATE / -->
<style>
body,
html {
/* overflow-y: hidden; */
}

#profile-groups-menu {
position: fixed;
min-height: 200px;
min-width: 238px;
max-height: 800px;
width: 238px;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid #f9f9f9;
top: 5em;
right: 1em;
z-index: 10000 !important;
}

.dropdown-menu {
content: "";
}

.hide {
display: none;
}
</style>
<div id="profile-groups-menu" class="hide dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<h3><i class="m-icon m-icon-user-circle"></i>Group memberships</h3></a>
<div class="dropdown-divider"></div>
</div>
Location: Berlin, Germany

Comments

Post a Comment