Tenant/Client specific white labelling

Adhoc
, ,
#1

Hello,

I am using open source BI Helical Insight enterprise edition version 5.2.3. Is it possible to have loggedin client/tenant specific CSS?

Thanks,
Netta.

#2

Yes it is possible to have loggedni client/tenant specific white labeling via CSS. In this below example we are covering one specific use case.

What we are going to do is to change header color of reports in dashboards based on the name of the organization to which current loggedin user belogs to.
To achieve this we need to make use of js code. Follow below steps for doing the same.

Code :

const fetching = () => {
          const stores = new Set();
          const traverse = (element) => {
            let store =
              element?.memoizedState?.element?.props?.store
              || element?.pendingProps?.store
              || element?.stateNode?.store;
    
            if (store) {
              stores.add(store);
            }
    
            if (element.child) {
              traverse(element.child);
            }
          };
          const reactRoot = Array.from(document.querySelectorAll("*[id]")).find((el) => el?._reactRootContainer?._internalRoot?.current);
          const internalRoot = reactRoot._reactRootContainer._internalRoot.current;
          traverse(internalRoot);
    
          let loggedInUserDetails = [...stores][0].getState().app.applicationSettingsData.userData.user
 
		  CheckingCurrentOrg(loggedInUserDetails);
    
        }
 
 
setTimeout(()=>{
			fetching();
		},1000)
 
 
function CheckingCurrentOrg (loggedInUserDetails){
	console.log(loggedInUserDetails , 'loggedInUserDetails');
 
	if(loggedInUserDetails.organization == 'whiteLabeling_org_1'){
		console.log(loggedInUserDetails.organization , 'loggedInUserDetails.organization');
		var headers = document.querySelectorAll('header.ant-layout-header.hi-grid-item-header');
		if (headers) {
			headers.forEach(function(header) {
				header.style.setProperty('background-color', 'red', 'important');
			});
		}
	}else if (loggedInUserDetails.organization == 'whiteLabeling_org_2'){
		var headers = document.querySelectorAll('header.ant-layout-header.hi-grid-item-header');
		if (headers) {
			headers.forEach(function(header) {
				header.style.setProperty('background-color', 'gray', 'important');
			});
		}
	}
	
	
}
  1. Go to the this location : …\hi\apache-tomcat-9\webapps\hi-ee\WEB-INF\jsp\login and open
    where Helical Isnight is installed
  2. In this path you will find a file called loginbody.jsp. Open the file
  3. Now copy the above give js code and paste in this file and save the file. In the code you can make changes to make it sutiable for your use case.
if(loggedInUserDetails.organization == 'whiteLabeling_org_1'){
		console.log(loggedInUserDetails.organization , 'loggedInUserDetails.organization');
		var headers = document.querySelectorAll('header.ant-layout-header.hi-grid-item-header');
		if (headers) {
			headers.forEach(function(header) {
				header.style.setProperty('background-color', 'red', 'important');
			});
		}
	}else if (loggedInUserDetails.organization == 'whiteLabeling_org_2'){
		var headers = document.querySelectorAll('header.ant-layout-header.hi-grid-item-header');
		if (headers) {
			headers.forEach(function(header) {
				header.style.setProperty('background-color', 'gray', 'important');
			});
		}

  1. In this code snippet we are changing report header colors for two organization users. We are making them red if the user is from whiteLabeling_org_1 organization and gray if the current logged in user is from whiteLabeling_org_2 organization and for all the organization users the reports headers in default colors .

  2. So you can change the this organization names with your organizations and colors. you can also add a else statement that way you can also change the background-color for all other organization users.

  3. You can have n number of if statements/Case statements. And Not only reports headers you can also change other CSS properties of reports.

  4. Once this is done save the file and do a hard refresh in the browser and you can observe the report color changing based on currently logged in user.

Thank You,
Helical Insight.