In my last article I showed how you can determine if the current user is a portal user or not. In this article we will use that to selectively apply some custom CSS to the portal only. If you’re new to applying CSS styles in Creatio, take a look this article on the topic before continuing.
First of all, what we’re actually going to be doing is applying a CSS stylesheet in Creatio normally, however, we’re also going to be adding an attribute to the body that indicates if the current user is a portal user or not. Then, we’ll use that attribute in our CSS to only apply the styles when the current user is a portal user.
For this sample, we’ll be using a ridiculous idea of making all labels red in the entire application, but only if the current user is a portal user – meaning we’re in the portal. We want this to be a global style.
Note: You can add styles to the specific portal pages & sections since they are separate from the full pages/sections (for example PortalCasePage vs CasePage). What we’re doing here is applying a global style for the entire application.
First thing we will need to do is globally add the style and also set the body attribute. To do this create a Replacing Client Module, and select the parent object as “MainHeaderSchema”. Then add in the following code:
define("MainHeaderSchema", ["css!UsrSspCSS"], function() {
return {
attributes: {},
diff: [],
methods: {
onRender: function() {
this.callParent(arguments);
Terrasoft.utils.dom.setAttributeToBody("IsCurrentUserSsp", Terrasoft.isCurrentUserSsp());
}
}
};
});
This will do two things. First, notice on the top line, we’re adding our CSS, named “UsrSspCSS”. Then, we’re overriding the onRender to set the body attribute. We’re calling the attribute “IsCurrentUserSsp” and setting it’s value to true or false. The actual HTML that will get rendered for this will look like this:
<body iscurrentuserssp="true" >
Now create a module for the CSS. On the “less” tab, we’ll enter the following:
body[iscurrentuserssp=true] {
label {
color: red !important;
}
}
Remember, this is lesscss, not just css. This will hierarchy means that our label style will only apply if the body has the IsCurrentUserSsp=true on it. That’s it. Of course, we can’t suggest something like turning the labels red in the portal without seeing the hideous result:
Well, the point is to show how to selectively apply the styles to the portal only, it’s up to use to come up with something useful to use this for. There’s many cases where something like this would be useful. For example, having a different look/feel in the portal than the full client, or you could even selectively apply different styles for different portal users, such as including the branding/colors for that particular user’s company or types of services or products they receive.
Other CSS Related Articles for Creatio
Subscribe To Our Newsletter
Join our mailing list to receive the latest Infor CRM (Saleslogix) and Creatio (bpm'online) news and product updates!
You have Successfully Subscribed!