Try our conversational search powered by Generative AI!

Manoj Kumawat
Oct 31, 2019
  2425
(3 votes)

Removing UI Components programmatically

In this blog post we are going to have a look on how you can use ViewTransformer to manipulate your UI. There are situations where we would want to hide particular UI components based on Role. 

For an instance, User A with Role CmsApprover don't need access of Project Items and Media Gadget. In this scenario you can remove those gadgets based on the role given.

The ViewTransformer would let you do it.

Step 1 - Create a class and decorate it with [ViewTransformer] attribute.

[ViewTransformer]
public class RemoveComponentsViewTransformer

Using the role - Define a private property with role you want to hide the gadgets against.

private string role = "CmsApprover";

Step 2 - Implement IViewTransformer interface.

[ViewTransformer]
public class RemoveComponentsViewTransformer : IViewTransformer

The IViewTransformer interface has an abstract method called TransformView that will let you go through RootComponent and components within it. 

I've targetted two components to be hidden for users with Role CmsApprover

private string[] componentsToRemove = new string[]
{
	"EPiServer.Cms.Shell.UI.Components.ProjectModeToolbarComponent",
	"EPiServer.Cms.Shell.UI.Components.MediaComponent"
};

You can find these two components under Shell.UI library. Once you browse the reference, You can find those components in the tree - 

The TransformView method will iterate through the components similarly above tree structure. Therefore, We will iterate through the components and once it reaches to the targetted component then we'll store it in a list and remove it from the RootContainer.

Step 3 - A recursive method that iterates through the component tree until the targetted component is found. 

 

private void BuildListRecursively(IContainer container, List<IComponentMatcher> components)
{
	foreach (IComponent component in container.Components)
	{
		IContainer childContainer = component as IContainer;
		if (childContainer != null)
		{
			BuildListRecursively(childContainer, components);
		}
		else
		{
			if (componentsToRemove.Any(item => string.Equals(item,
				component.DefinitionName, StringComparison.OrdinalIgnoreCase)))
			{
				AddComponent(components, component.DefinitionName);
			}
		}
	}
}

Step 4 - Addcomponent and ConfigureComponentMatcher

The above method uses AddComponent method that configures the component and the container. 

private void AddComponent(List<IComponentMatcher> components, string definitionName)
{
	var item = new ConfigurationComponentMatcher(definitionName);
	components.Add(item);
}

private class ConfigurationComponentMatcher : IComponentMatcher
{
	private readonly string definitionName;

	public ConfigurationComponentMatcher(string definitionName)
	{
		this.definitionName = definitionName;
	}

	public bool MatchesComponent(IComponent component)
	{
		return string.Equals(definitionName,
			component.DefinitionName, StringComparison.OrdinalIgnoreCase);
	}

	public bool MatchesContainer(IContainer container)
	{
		return true;
	}
}

The ConfigurationComponentMatcher method determines the Component's definition name matches with the targetted component's name which is current iteration item. It returns the match.

Step 5 - TransformView 

Finally the abstract method looks like this -

public void TransformView(ICompositeView view, IPrincipal principal)
{
	// build a list of components to remove
	var components = new List<IComponentMatcher>();
	BuildListRecursively(view.RootContainer, components);

	// remove the components for the specified user
	var hasCMSApproverRole = principal.IsInRole(role);
	if (hasCMSApproverRole)
	{
		view.RootContainer.RemoveComponentsRecursive(components,
			notifyComponentOnRemoval: false);
	}
}

Verifying

When you run your application, You can see the users with Role CmsApprover have two gadgets ProjectToolbar and MediaToolbar hidden for them. I've highlighted them below where they should have been appeared with non CmsApprover roles.

Have a great day!

Oct 31, 2019

Comments

David Knipe
David Knipe Nov 1, 2019 11:21 PM

Thanks for sharing! I wrote a similar post a while back so cross posting in case it helps anyone researching the subject:

https://www.david-tec.com/2016/05/remove-episerver-ui-components-for-certain-editors/

Manoj Kumawat
Manoj Kumawat Nov 2, 2019 03:14 AM

Looks good David.

Please login to comment.
Latest blogs
Optimizely and the never-ending story of the missing globe!

I've worked with Optimizely CMS for 14 years, and there are two things I'm obsessed with: Link validation and the globe that keeps disappearing on...

Tomas Hensrud Gulla | Apr 18, 2024 | Syndicated blog

Visitor Groups Usage Report For Optimizely CMS 12

This add-on offers detailed information on how visitor groups are used and how effective they are within Optimizely CMS. Editors can monitor and...

Adnan Zameer | Apr 18, 2024 | Syndicated blog

Azure AI Language – Abstractive Summarisation in Optimizely CMS

In this article, I show how the abstraction summarisation feature provided by the Azure AI Language platform, can be used within Optimizely CMS to...

Anil Patel | Apr 18, 2024 | Syndicated blog

Fix your Search & Navigation (Find) indexing job, please

Once upon a time, a colleague asked me to look into a customer database with weird spikes in database log usage. (You might start to wonder why I a...

Quan Mai | Apr 17, 2024 | Syndicated blog

The A/A Test: What You Need to Know

Sure, we all know what an A/B test can do. But what is an A/A test? How is it different? With an A/B test, we know that we can take a webpage (our...

Lindsey Rogers | Apr 15, 2024

.Net Core Timezone ID's Windows vs Linux

Hey all, First post here and I would like to talk about Timezone ID's and How Windows and Linux systems use different IDs. We currently run a .NET...

sheider | Apr 15, 2024