Customize UI design for multi tenant asp.net application using Bootstrap

When you are developing a multitenant application, all your tenant (customer) wants their design or color coding (theme) different as per their brand. First, you have to come up with a unique design or layout of your web app which can be neutral and can be customizable to any different design easily.  By reading this requirement, of course, you get Bootstrap in your mind. By using Bootstrap you can easily make your web app design very flexible and responsive. We all know benefits of using Bootstrap. If you don't then go to Getbootstrap.com and get it.

Bootstrap can be base for responsive web applications. You need to do custom CSS by overriding existing bootstrap classes. You can also make your customization of bootstrap common for all tenant by using .less provided by bootstrap instead directly using .css.

I have added my example of design multitenant web application design using bootstrap.

For our implementation (our example), we considered bootstrap V3.3.7 as  We still may have a learning curve of understanding of new version of the framework. We consider using new bootstrap is a little bit a risk for a team. You can use a new version of bootstrap and apply the same strategy for handling multiple tenants web design customization. We have used ASP.net MVC core project using visual studio.

Implementation of custom design has done in following steps.

1. Need to install basic bootstrap with .less files.

you can download bootstrap .less files from the following URL.

https://getbootstrap.com/docs/3.3/getting-started/

Also, you can implement packages like npm or nuget.

It is also described here how to install grunt and grunt commands here

https://getbootstrap.com/docs/3.3/getting-started/

2. Define your own customization on top of bootstrap using your own .less files.

As per Asp.net core MVC project folder structure, I have added bootstrap .less file under lib/bootstrap.

I have added a folder called "less" under the root folder.  Added main.less file. This can be your application main .less file. You can add reference of bootstrap.less under this. The bootstrap.less file you can locate under lib/bootstrap/less.  Bootstrap.less is the main file of bootstrap which has all reference to other bootstraps .less files and bootstrap variables. bootstrap.less looks like below.

main.less file has bootstrap.less reference.

Check bootstrap variable.less file. Bootstrap has defined all variable for all colors and size. You can directly change this variable values.  By Including bootstrap.less into main.less you can use these variables to your custom .css classes too.  You can also override values variables if you wanted to keep your custom.less file separate for each tenant.

3. Install Grunt and packages for .less.

You can use Gulp or Grunt as a task runner for generating .css file from .less files. You can do other tasks also like minification and bundling using it.  For our example, we have used Grunt task runner. 

You can find the detailed article about how to use Grunt with asp.net core here and for Gulp here.

here is the getting started with Grunt.

You need Nodejs installed on your machine.  Install nodejs with Node Package Manager (npm).

You can install Grunt using npm by the following command.

npm install -g grunt-cli

For our project, we need to add npm Configuration File (package.json). 

For manual install Grunt to your project Open a command prompt and change your directory to your project directory.

cd c:\{your project directory}

If you have added nodejs to PATH environment variable then only has to apply npm command directly otherwise you have to give full path of npm exe like below and run install grunt.

C:\{your project directory}> "c:\Program Files\nodejs"\npm install grunt --save-dev

Install packages for .less

C:\{your project directory}> "c:\Program Files\nodejs"\npm install grunt-contrib-less --save-dev

o/p: 

+ grunt-contrib-less@1.4.1

added 62 packages in 8.574s

Using visual studio, You can simply update package.json file and update packages from Dependencies -> Righ click  on "npm" => Click on "Restore packages"

"Package.json"

"Restore Package"

It will look like following after restoring package

Add Gruntfile.js to a solution. Get more information from here  https://gruntjs.com/getting-started

sample grunt file looks like below.

4. Generate different stylesheet files according to custom variables using Grunt.

Using Grunt task runner you can generate .css file from .less file. We already have installed required package of .less.
we need to add grunt task for .less with different parameter options.  you can find the whole list of parameters and guideline of adding grunt task for less here.   https://www.npmjs.com/package/grunt-contrib-less

We are going to use "modifyVars" parameter to modify .less variable value. using this parameter, you can pass the value of any .less parameter like bootstrap @brand-primary.
With "files" parameter you can define Source .less file and destination .css file (result file).

In our case, we have our main.less file which has a reference of bootstrap.less along with custom CSS classes. We can define different task according to the environment. Also, we can define different task according to a tenant.

Like above gruntfile,  we have defined the task to generate CSS for the development environment and production environment.
For development, you need to check .css classes sometimes so no need to do compression. while production environment you can define compress: true. It minifies the .css.
We defined the value of 'brand-primary' variable under modifyVars for both environments.

Under the "files" tag, You can define source file as .less file and result file .css file like in above example we have following.

files: { 'wwwroot/css/site.debug.css': 'wwwroot/less/main.less'}

Grunt task generates site.debug.css file in defined path using main.less file.

Similar way you can add another task for a different tenant.  you can pass variable value according to customer requirement.  You can also generate different variable. less file with customer specific values and generate .css using different .less files according to tenants.
Tenant task is shown below.

5. Add tenant code switch.

You can change the use of .css file according to your tenant id. You can manage it by _layout.cshtml.
After login, you can get tenant name programmatically.  You can implement base controller and take one global variable which can be used for all views. I would let you decide how would you get your tenant name as I wanted to focus on switching stylesheet according to different tenant name.

In following code sample, I have created one variable called tenantcode which has tenant name. This variable can get value dynamically from server login according to who is logged.  I have used tenantcode to generate CSS name for that particular tenant.

In Asp.net MVC core, You can define the environment for development and production. You also can define your custom one. You can get more info about environment tag from this URL: https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/environment-tag-helper?view=aspnetcore-2.1

So as per our logic, it generates tenant CSS URL like "~/css/site_tenant1.css". It would be just site_.debug.css for development.

By changing tenantcode, you can just change the theme of your application.

Tenant1 theme

 Development theme

The code sample is here https://github.com/atulpatel/MvcCoreLessCss.

If you want anything to elaborate more then let me know in the comment.

How to close your code

We all know them  SOLID principles.  Every developer knows what are SOLID principles because every developer has to go through an interview process to get a job. Some can explain really good while interview.

Recently, I have been interviewed by a very reputed financial company.  They have 4 rounds of interview and almost 3 round has asked a question about SOLID principles. They all have asked very good interesting questions and it seems they were looking for some specific expertise. I have started working there and their code base is awesome. They are not working anywhere near what they asked in an interview. I also found some controllers code files has 2-3k  lines of code which is a presentation layer. Though they have very nice onion architecture for the project. I hope whoever worked there all gone through those interview process and know about at least SOLID principles. These principles are not just to perform in the interview. We need to apply it in real code. Maybe they have their own reasons for not following them.

Anyway, here I wanted to show some example which I saw in their code base which can very easily make it closed for modification.

Check following code.

       
      public void Work(string switchoption)
        {
            switch (switchoption)
            {
                case "Fun1":
                    ///
                    /// So many lines of code
                    ///
                    break;
                case "Fun2":
                    ///
                    /// So many lines of code
                    ///
                    break;
                case "Fun3":
                    ///
                    /// So many lines of code
                    ///
                    break;
            }
        }




If you come across this kind of code or you may end up writing this kind of code then what can be at least done, I have explained it here.  Above code is not closed because you don't know what kind of another case may have to add in future. What if there is a change in code for a particular switch case. You have to test all cases because you have changed it the function. If your unit test covered all switch cases then you are a little bit good position. QA has to check every case manually. If something missed in testing then you may end up in production bugs. Overall all these increases the maintenance cost.

I do refactor it to the following levels.

At least have a private function for long lines of code for each case.


 public void Work(string switchoption)
        {
            switch (switchoption)
            {
                case "Fun1":
                    function1();
                    break;
                case "Fun2":
                    function2();
                    break;
                case "Fun3":
                    function3();
                    break;
            }
        }


        private void function3()
        {
            Console.WriteLine("Function 3");
        }

        private void function2()
        {
            Console.WriteLine("Function 2");
        }

        private void function1()
        {
            Console.WriteLine("Function 1");
        }

If you create private function then the code will at least increase readability.  By giving a proper name to function,  it describes that what that piece of code is doing. But still, it has an issue of what if we may need to write more cases there. This code is still not a closed code.

Instead of Switch case, you can implement Dictionary.

    
        public void Work2(string switchoption)
        {
            Dictionary<string, Action> switchfunction = new Dictionary<string, Action>();
            switchfunction.Add("Fun1", function1);
            switchfunction.Add("Fun2", function2);
            switchfunction.Add("Fun3", function3);

            switchfunction[switchoption].Invoke();
        }



You can simply add a dictionary with string and Action type. Add all functions to dictionary collection.  Dictionary can pick a particular case by Key name and execute the function by invoking it. You can also generate this dictionary list from outside of this function or get dictionary values from any data store.  In case in future, you may need to add more cases then you don't have to change this function.  This way your existing function Work2 here in the example can be closed for modification.

This implementation has resolved our problem of closing the function "Work" for modification.  But we still have to add a new function to the class for adding new cases. It is also not following Single responsibility principle.

Implement Strategy pattern using Dependency Injection

Basic strategy pattern implementation explained here. http://www.dofactory.com/net/strategy-design-pattern

The basic concept of pattern defines an Interface with strategy and have the concrete classes with different strategies implementation. Based on your need you can create an object of particular strategy dynamically.  google it for  "strategy design pattern"  and you will get plenty of examples.

Here I wanted to show an example using dependency framework. In above-given URL of dofactory example of strategy pattern, has context class to create an object of different strategies. We can rely on dependency injection framework for that responsibility.

In the following code,  IExampleStrategy is an interface and has functionexample(). This interface implemented in three different ExampleStrategy classes. each class has different implementation of functionexample.


   public interface IExampleStrategy
    {
        void functionexample();
    }


    public class ExampleStrategy1 : IExampleStrategy
    {
        public void functionexample()
        {
            Console.WriteLine("ExampleStrategy1.functionexample()  executed.");
        }

    }

    public class ExampleStrategy2 : IExampleStrategy
    {
        public void functionexample()
        {
            Console.WriteLine("ExampleStrategy2.functionexample()  executed.");
        }

    }

    public class ExampleStrategy3 : IExampleStrategy
    {
        public void functionexample()
        {
            Console.WriteLine("ExampleStrategy3.functionexample()  executed.");
        }

    }




Following is the context class where we instantiate the class based on strategy.  In the following class, we have injected IUnityContainer. It resolves right Strategy class based on a parameter.
The Work function is the function that we are changing to our main problem of removing switch cases. The first Work function can pass parameter and decide what strategy need to execute. The container can get a right concrete class based on a parameter passed. Instantiating an object is a responsibility of container based on a parameter.

Another Work function also does the same thing but in some cases, the developer has to do things in a loop. The container can take care of creating an object and also can take care of lifetime of your object. So in case if you have to create the same object multiple times for our second work function then a container can reuse the same object created previously.


  public class CloseCodeExample2
    {
        private readonly IUnityContainer _container;

        public CloseCodeExample2(IUnityContainer container)
        {
            _container = container;
        }

        public void Work(string switchcall)
        {
            var examplefunction= _container.Resolve<IExampleStrategy>(switchcall);

            examplefunction.functionexample();
        }

        public void Work(List<string> switchcalls)
        {
            foreach (var item in switchcalls)
            {
                var examplefunction = _container.Resolve<IExampleStrategy>(item);

                examplefunction.functionexample();
            }
            
        }
    }




Here is our Main function where we have defined our Unity container registration for an interface and its implementation.

   class Program
    {
        static void Main(string[] args)
        {
            CloseCodeExample codeExample = new CloseCodeExample();

            codeExample.Work("Fun1");

            codeExample.Work2("Fun2");
            codeExample.Work2("Fun3");

            //Unity container registration.
            var container = new UnityContainer();

            container.RegisterType<IExampleStrategy, ExampleStrategy1>("Fun1");
            container.RegisterType<IExampleStrategy, ExampleStrategy2>("Fun2");
            container.RegisterType<IExampleStrategy, ExampleStrategy3>("Fun3");


            CloseCodeExample2 codeExample2 = new CloseCodeExample2(container);
                        
            codeExample2.Work("Fun1");
            codeExample2.Work("Fun2");

            Console.WriteLine("---------------------------------");

            codeExample2.Work(new List<string>() { "Fun2", "Fun3", "Fun1" });

            Console.ReadKey();

        }
    }




Let's validate our two SOLID principles that we wanted to implement.  In above code, If you want to add new case then you need to add another class which implements the same interface and just need to register for the container.  We don't need to change function "Work"  It is basically closed for modification. Also, by creating a separate class for each case, We have implemented single responsibility principle. If you implement Unit test then it would be a separate unit test for all classes. Easy to implement the unit test.

Note: In above example, you still have to consider little bit defensive code, for example, what if no any class implementation available to unity config. It will throw an exception of  "Unity.Exceptions.ResolutionFailedException". So you still have to take care of this kind of things.

I hope you like it. If you have any query, add it to comments.

You can find code sample of above code here at GitHub. https://github.com/atulpatel/AspCoreRnd