Hi Team,

 

I'm looking for a solution where i can apply colors to the Field values (not labels) using CSS on a conditional basis. I followed the article https://community.creatio.com/questions/conditional-formatting-field-ed… but it applies color on the label of the field, not the value div.

 

Kindly help.

Best Regards,

Sarika

Like 0

Like

4 comments

Hello,

to add colors to the value, if you know which div it is exactly, you can use the class or id of that div in the selector instead of ".label-wrap .t-label" as in step 1 of the example. Or you can look up the class or id by using inspector tool (Ctrl+shift+C) in the developer tools (f12) on your page and then use them in the selector. 

If you require more assistance please provide screenshots of div you want to color, would provide more clarity how to change the selector accordingly.

 

is there any updates on this?

Hello Sarika!

With CSS you can change the color by choosing the right selector. Example, where 2a879ccc-536d-45a9-980a-9ac0a00aea91 - id of value:

li[data-value="2a879ccc-536d-45a9-980a-9ac0a00aea91"] 
{
background-color: brown;
}

I would recommend you to use the new FreedomUI pages on the site. You can change bg-color in the system settings on the FreedomUI page (on your screen shot I can see Classic UI). It will take 10 min maximum.

To change colors with FreedomUI :

1) Open System designer -> Advanced settings

2) Find the Custom Object CasePriority or create a replacement:

3) Add the new column -> Other -> Color:

4) Add Title to the new Color column on the same page

5) Click on the Name of this object and choose value (Title name from p.4) in Color field:

6) Publish this object

7) Open System Designer -> Lookups -> Case priorities -> View -> Select fields to display:

8)Add HEX color code to the new column:

 

9) FreedomUI page will looks like:

 

 

 

Show all comments

Hi community,

We need to change the CSS of the detail’s header, inline editable column input text color, and the other non-editable grid text color.

What client module we should replace, and what classes we should change?

Thank you very much!

Like 0

Like

3 comments
Best reply

Andrew Sheng,

I got the answer! All I had left to do was to fill the JS code with:

 define("BaseGridDetailV2", ["css!UsrDynasafeDetailV2CSS"], function() {
	return {
		methods: {},
		diff: /**SCHEMA_DIFF*/[ ]/**SCHEMA_DIFF*/
	};
});

 

Hello Andrew,



It could be achieved by development, please find similar questions bt the links below:

https://community.creatio.com/questions/text-area-field-editable-detail….

 

https://community.creatio.com/questions/detail-styles-css?_gl=1*1850rv9….

Bogdan,

Hi Bogdan, thank you for the solution links. But the screenshots in the reply are no longer visible. I followed the two steps in the reply, but had no luck. I put my screenshots below, can you correct them for me?

Step1, I created a module in our package Dynasafe1, kept JS empty

Step2, I put the CSS in the LESS

 Step3, I created a replacing view model under Dynasafe1 package

Then I chose "Base schema - Detail with list" as the parent object.

And finally saved this replacing view model with JS kept empty. Did I miss something here?

 

Thank you for your answer in advance!

Andrew Sheng,

I got the answer! All I had left to do was to fill the JS code with:

 define("BaseGridDetailV2", ["css!UsrDynasafeDetailV2CSS"], function() {
	return {
		methods: {},
		diff: /**SCHEMA_DIFF*/[ ]/**SCHEMA_DIFF*/
	};
});

 

Show all comments

Hi Community,

Is there any possibility to put an image as a background in the Creatio Login Page ?

Example

Best regards,

Sasori

Like 0

Like

5 comments
Best reply

Hi Sasori,

 

It's possible, but proper css should be created:

what was done is adding the image to NuiLogin.aspx page css (add body elemnt there):

<style>
		.font-preload {
			position: absolute;
			opacity: 0;
		}
		.font-preload-open-sans {
			font-family: "Bpmonline Open Sans";
		}
		.font-preload-open-sans-light {
			font-family: "Bpmonline Open Sans Light";
		}
		.font-preload-open-sans-bold {
			font-family: "Bpmonline Open Sans Bold";
		}
		body {
			background-image: url("783px-Test-Logo.svg.png");
		}
	</style>

and put this image to the root directory of app binary files. Only css should be modified in case you don't need to repeat this image and to set the size for it.

Hi Sasori,

 

It's possible, but proper css should be created:

what was done is adding the image to NuiLogin.aspx page css (add body elemnt there):

<style>
		.font-preload {
			position: absolute;
			opacity: 0;
		}
		.font-preload-open-sans {
			font-family: "Bpmonline Open Sans";
		}
		.font-preload-open-sans-light {
			font-family: "Bpmonline Open Sans Light";
		}
		.font-preload-open-sans-bold {
			font-family: "Bpmonline Open Sans Bold";
		}
		body {
			background-image: url("783px-Test-Logo.svg.png");
		}
	</style>

and put this image to the root directory of app binary files. Only css should be modified in case you don't need to repeat this image and to set the size for it.

Oleg Drobina,

Thanks for the explanation Oleg, 

I tried all the steps but still the image is not showing in the background of the login page.

1- Modified NuiLogin.aspx file (path : inetpub\wwwroot\creatio\Login)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="NuiLogin.aspx.cs" Inherits="Terrasoft.WebApp.Loader.Login.NuiLogin" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" dir="<%= PageDirection %>" culture="<%= LanguageCultureName %>">
<head runat="server">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta name="fontiran.com:license" content="LAXSN" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Creatio</title>
	<style>
		.font-preload {
			position: absolute;
			opacity: 0;
		}
		.font-preload-open-sans {
			font-family: "Bpmonline Open Sans";
		}
		.font-preload-open-sans-light {
			font-family: "Bpmonline Open Sans Light";
		}
		.font-preload-open-sans-bold {
			font-family: "Bpmonline Open Sans Bold";
		}
		body {
			background-image: url("test.png");
		}
	</style>
</head>
<body>
	<div class="font-preload">
		<span class="font-preload-open-sans">_</span>
		<span class="font-preload-open-sans-light">_</span>
		<span class="font-preload-open-sans-bold">_</span>
	</div>
	<form id="IndexForm" runat="server">
	</form>
</body>
</html>

1- Added test.png image file in ( path - inetpub\wwwroot\creatio\)

Sasori Oshigaki,

 

Strange, this approach worked in my local app perfectly. Maybe there is an error message in the console when trying to reach the Login page and it will provide more details? Or maybe the image is empty? Also try restarting the application in IIS.

Oleg Drobina,

Just fixed it Oleg

The mistake was the path of the image ( got it from console window)

The image should be placed under this path :

inetpub\wwwroot\creatio\Login

Thanks a lot for the help

Sasori

Sasori Oshigaki,

 

hm, in my case it requested the root directory of the app when I was testing it. Anyway, it's good that the console message answered the question!

Show all comments

Hello Everyone,



How can we add background color to a specific field in Record list. Please refer to the Screenshot i have attached. I want that status should change color as the value is also changes . ex. Status = Passed , then color should be green. if status = Failed then color should be Red. Please advise .

Like 0

Like

2 comments
Best reply

Weird, I had responded to this before, but now my response is gone. Anyway, I rewrote my response in an article showing how to do this for a Freedom UI list here: https://customerfx.com/article/adding-color-to-column-values-in-creatio…

Ryan

Weird, I had responded to this before, but now my response is gone. Anyway, I rewrote my response in an article showing how to do this for a Freedom UI list here: https://customerfx.com/article/adding-color-to-column-values-in-creatio…

Ryan

Ryan Farley,

 

Thanks Ryan 

 

Show all comments

Hello,

 

We have a boolean column in accounts section. If the value is checked, we would like to add an image on the header space as highlighted in yellow in image below. Is there a sample code/ recommendation for this?

 

Like 0

Like

1 comments

Hello,

You can write a simple button and display it in the center. 

{
				"operation": "insert",
				"name": "TestContainer",
				"parentName": "ActionButtonsContainer",
				"propertyName": "items",
				"values": {
					"itemType": Terrasoft.ViewItemType.CONTAINER,
					"wrapClass": ["test-container-wrapClass"],
					"items": []
				}
			},
            {
                "operation": "insert",
                "parentName": "TestContainer",
                "propertyName": "items",
                "name": "PrimaryContactButton",
                "values": {
 
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    "click": {bindTo: "testclick"},
					"visible": {bindTo: "checkVisible"},
                    "enabled": true,
                    "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
					"imageConfig": {"bindTo": "Resources.Images.EnrichedDefaultIcon"}
                }
            }

In the method checkVisible you can return true or false based on the condition.

To make it at the center just add a new CSS style:

define("AccountPageV2", ["css!UsrDStyle"], function() {

 

.test-container-wrapClass {

        margin-left: auto;

    margin-right: auto;

    width: 6em

    }

 

Show all comments

Hi community,

 

I have the following :

 

 

For example, the field "Bois de construction (CHF)" is on two lines. I want to have it only on one line like the field "Portes (CHF)".

 

Is it possible to do it in a CSS way ?

 

Many thanks,

Jonathan

Like 0

Like

2 comments

Hi Jonathan,

 

usually, you can use CSS styles in order to configure most of the fields you would like to.

 

We have already got a few requests from our users on a similar topic, so you can get familiarized with them by following the links:

 

https://community.creatio.com/articles/how-add-or-edit-css-style

 

https://community.creatio.com/questions/dropdownlookup-borders

 

Once you will need any further help, please, let us know.

 

Kind regards,

Gleb.

Jonathan,

To add the CSS to the page: https://customerfx.com/article/adding-custom-css-style-sheets-in-bpmonl…

You'll just need to play with the styles to get it to not wrap. Basically, you'll need to adjust the min-width of the div container of the label element (the div with class "label-wrap"), something like this:

div#UsrMyPagec61fd727-5004-4db7-b6a3-38ef6d467de8Container_Label {
    min-width: 20em;
}

Ryan

Show all comments

Hi,

I want to remove an element from a page (the LeftModuleContainer on the order page), I see the ID of the Div on the html using the 'F12' but I don't know where to find the html code. (the client module has the JS only...)

I think I'm missing a lot of information of how the code is stored in Creatio, can anyone explain me shortly how it works or if too difficult just explain how to get to the html and modify it?

Thanks

Like 0

Like

4 comments

Roman Rak,

Thank you.

I see how to ADD css but what if want to remove an element?

Roman Rak,

Thank you! I was able to remove.

Show all comments

Is there a clean way to hide the left and right navigation menus in Creatio without resorting to CSS hacks? I am building a scenario where an external app loads Creatio in an iframe and I need to restrict the user from navigating away from the screen that is shown in the Creatio iframe.

 

Thanks in advance...

Like 0

Like

2 comments

Dear Amanthena,

 

I think that adding custom css is the most appropriate approach in your case. Since it is impossible to make the left and right menus invisible only for some specific page. You can modify these menus, however these changes will affect all pages in the application.

 

Please find more information about how to add a custom css style in the article by the link below:

 

https://community.bpmonline.com/questions/how-add-custom-style-control-page-based-condition

 

Best regards,

Norton

Norton Lingard,

​​​​​​Thanks! 

Show all comments

How can I get bigger font for name in custom section.

Here is the pic of Contact section (in-buily) with Name shown in big fonts in tile view.

Now I have built my custom Contact section but with few changes. It is not replaced or inherited with actual Contact section.

Now in the section after removing caption of the field the font size of name is still small.

 

How can I get bigger font like in in-built/out of the box contact Section.

I want to apply it to other sections also. So there is no point to use out of the box Contact section by replacing object which already has big fonts.

Like 0

Like

3 comments

Hi Ramnath.

 

You can change the font size by adding a custom css style to the schema you need and in such a way override the system font-size. Please refer to this article on our community: https://community.bpmonline.com/questions/how-add-custom-style-control-page-based-condition

I recommend you change a font-size first for any page in the system to check if it looks fine as we do not guarantee that all objects, labels, and containers will be displayed correctly. 



Thank you.

Bohdan Zdor,

 

I have tried this before but I could only make it work on the page of arecord. I need to edit the page where all the records are shown. I could not find the module which has the code for the list of records.

 

Ramnath

RAMNATH SHARMA,

 

 

Unfortunately, there is no option to change the section list font size in the current version of the system. I have registered your suggestion, though. It was passed to our R&D team to be considered for further releases.

 

Thank you. 

Show all comments

Hi Community,

 

By default the search field showing like below, I need to hide it on first load and once I click on icon the search field should appear

 

 

Any help will be highly appreciable.

 

Regards

Like 0

Like

1 comments

Hi Muhammad,



You would need to create a custom Grid controller for your section. First up, you can generate controller code just like it is described here, specifying pageType: Terrasoft.PageTypes.Grid and selecting your section name. Then you should add a dependency to your grid in the manifest. You can use InvoiceMobile package as an example: https://prnt.sc/rpypgw - grid, and manifest - https://prnt.sc/rpyq0a.



Then, in the Terrasoft.view.BaseGridPage.View there is an object that is responsible for filter panel. This object has a function to show and hide: https://prnt.sc/rpyqsr. So in your grid view you would be able to get the filterpanel and then use function to hide it:



let filterPanel = this.getFilterPanel();

filterPanel.hide();



Regards,

Dmytro

Show all comments