Try to change what rows to highlight (when you hover over)?

SuiteCRM Forum - English Language SuiteCRM General Discussion
1

Hello, I’m asking something that is actually complicated, I just want to know if it is appliable to the system.
Here you can see the default dashboard:

111 highlight
111 highlight1119×497 121 KB

When you hover over on a row it changes the color (in a light orange). Do you think that it is possible to highlight more than one row in different tables? For example, I hover over on a row in Opportunities table with and opportunity ID, i want to highlight the rows in other tables (Quotes etc…) that have the same opportunity ID (related in the table) at the same time, so you can see the relationships in the tables better.

I found out that the function that is implied in this is called

  • function hiliteItem -
    in \include\javascript\menu.js
    But I’m getting some difficulties to understand actually how the row is selected from the database. If I could understand that, I could make the relations in the tables to highlight more rows.
    I know it’s complicated, so I wanted to know if it is appliable.
    Otherwise, I’d think for another solution to make the relationships in tables in dashboard more evident.

Good afternoon!

1 Like
2

@martaz

Did you see this documentation?

3

No, I didn’t, thank you so much it will help me!

4

Hello, I’m writing this to understand how the style can be changed in SuiteCRM.
I put the folder : “themes/SuiteP/css/Dawn/style.css”, in custom. I’ve changed something in this css file . In particuar this line:

.oddListRowS1:hover td {
background: $table-focus-bg;
}

This is the original one, which allows to highlight the line in the table (in Dashboard and ListView) when you hover. Even if I try to make simple changes (as a test), I don’t see the updatings in the website. This is a pity, because that is the solution for my problem, I want to change which lines are highlighted in the tables (sorry for my bad english).
Could you tell me ho to apply the changes in css files? (or maybe, I’m changing the wrong file)
I’m reading this documentation


But for me it’s unclear how to make the changes done, even if I edit the scss files the changes are not updating
5

@martaz
You should write to the file only lines which you want to change or add only. What about cache of browser? Did you clean it?

6

You have this guide

But I don’ think you need all of that.

Your customization should work from custom dir, but don’t copy the whole style.css file, just add the little bit of CSS that you want changed. SuiteCRM will append that to the style.css file.

Try a Quick repair and rebuild; and make sure you hard-refresh the page in the browser, and check the source of the page there to see if your CSS is getting pulled in.

1 Like
7

Thanks both of you for your time. I’ll explain better what I did: I added a new file called style.css in the folder: custom/themes/SuiteP/css/Dawn (of course I chose Dawn for my user in the syle)
I simply wrote this line (as a test):
.oddListRowS1:hover td{background:red}

It should override the old line (?):
.oddListRowS1:hover td{background:$table-focus-bg}

I did quick repair and rebuild twice, I cleared the cache.
Actually it is a good idea to check if my file is getting pulled in, and it is not. The only thing I could see is that the server is simply accessing to cache/themes/SuiteP/css/Dawn/style.css.
So it is not updating

8

You can delete cache/themes/SuiteP/css/Dawn/style.css to force it to rebuild

9

I’ve deleted it, it rebuilds it, but without the changes. You can see in this link:
https://www.dinatalebroker.com/suitecrm/cache/themes/SuiteP/css/Dawn/style.css?v=mMF8BONWnfd-izApURnFFw
The line “.oddListRowS1:hover” is still the same. With my changes it should be td{background:red}, not the default color: #faf7cf

10

If you check the end of that file you linked, you will find your line there at the end.

So it is composing the file with your changes, you probably just have some CSS precedence issue that is causing a different rule to apply.

11

Actually I had to edit the url, so I could see the changes. So maybe you can add new changes but not override the old ones? Maybe I need to make a new style like in the guide you linked before

12

Never mind. The changes are applying, I had to clear the cache twice this morning, no clue why it didn’t work yesterday (I cleared the cache yesterday too)

1 Like
13

Hi, I almost solved this problem, I write the (partial) solution:

I edited the templates for dashboard (DashletGenericDisplay.tpl) define a new class for every cell in the tables that is an Opportunity
So the content of every cell (that is Opportunity) is [p class="name Opportunity"> ... </p]

Then I wrote this code in Javascript (in dashlets.js):

var listOpportunities = ["classname1", "classname2"]

function hoverByClass(classname,colorover,colorout="transparent"){
    var elms=document.getElementsByClassName(classname);
    for(var i=0;i<elms.length;i++){
        elms[i].onmouseover = function(){
            for(var k=0;k<elms.length;k++){
                elms[k].style.backgroundColor="orange";//colorover;
            }
        };
        elms[i].onmouseout = function(){
            for(var k=0;k<elms.length;k++){
                elms[k].style.backgroundColor=colorout;
            }
        };
    }
}

for(var z = 0; z<listOpportunities.length; z++) {
	hoverByClass(listOpportunities[z],"yellow");
}

It is working if I manually write the name of classes in listOpportunities.
I have to define the list of all opportunities in the database in the variable listOpportunities, this is the only thing that is missing. I know that you can retrieve data with beans, but this can be done in PHP, is there a way to relate the file dashlet.js with a php file to get the list of opportunities?