Topic Title

Consider this Grid (this is from the Preview window in Config Tool)

top_panel1.png (19.71 KiB) Viewed 2613 times

When you want to provide a mechanism to allow a user to Add a New Record from a Grid, there are [at least] two ways to do it.
1) Panel Operation - Add button in the Panel Toolbox @@@@@@@@@@@
2) Panel Operation - Add button in the Top Panel Toolbar @@@@@@@@@@@

In my opinion, #1 has drawbacks of being overlooked (way to the right), and you cannot add text to it.
#2, while used frequently, annoys me because I lose 1 inch of screen space for a button thats only 80px wide and the rest of that line is wasted. Vertical screen space is at a premium.

So I discovered an extremely easy technique to achieve the following.
This is in the regular caption area so it utilizes un-used space.
The cursor changes to a pointer on Hover and the button "brightens" on hover like a real button.

top_panel2.png (7.29 KiB) Viewed 2613 times

*** One additional benefit of this is that you get to keep the built-in Panel Toolbox operations (export CSV, PDF, etc.). A Custom Header loses those icons.



And for the more adventurous, this Custom Header uses toggle buttons to perform filtering behind the scenes. An Add button could easily be placed here, but again its taking away Vertical screen space. So Why Custom Header in the first place? Because I would have needed to write [at least] 3 Queries "Show Active ROs", "Show Inactive ROs", "Show ALL ROs" and then I have a lot of redundancy so if 1 Query needs to have a field added, I have to update it in 3 places.

top_panel3.png (52.22 KiB) Viewed 2613 times

Jaymer, I just saw this and wondered if it might help with the current issue I am having with my buttons disappearing.

You show the picture of what it looks like in your post, but I don't see where you explain how you did it. Am I missing something in your post.

Jim

Since you already have Panel Operations defined, there's 1 simple change to those settings - every thing else stays the same:

Screen Shot 2020-03-11 at 3.49.56 PM.png (12.5 KiB) Viewed 1634 times

Obviously, the 1st part is just for FA , and the "addrec-caption" is the main CSS.

I already use "addrec" sometimes as a css tag in that field to turn my [+ Add] button green WHEN i want to use a normal Top Panel Toolbar button.
For this button I made it "addrec-caption". (for the green "addrec" button, but with a caption)
For this Add button, its location is Panel Toolbox already. And it normally shows only a + in the upper right.
The CSS adds:
1) the +
2) the green box
3) the next (ie. New)

Code: Select all.addrec-caption,.addrec-caption:hover{
   font-family: "Fira Sans Extra Condensed";   
   color:#fff!important;
   background-color:#4CAF50!important;
   border: 2px solid #4CAF50;
   padding: 2px 4px;
   margin-left: 10px;
   cursor: pointer;
}
.addrec-caption:after {
   font-family: "Fira Sans Extra Condensed";
   font-weight: 400;
   content: "New";
   color:#fff!important;
   background-color:#4CAF50!important;
   border: 2px solid #4CAF50;
    margin-left: 4px;
}

extra:
This is more CSS, for a "New" button, and a 2nd button that says "Multi-Add" from the pic in that other post.

Code: Select all.addrec,.addrec-hover:hover{
   color:#fff!important;
   background-color:#4CAF50!important;
   border: 2px solid #4CAF50;
}

.addrec-caption,.addrec-caption:hover{
   font-family: "Fira Sans Extra Condensed";   
   color:#fff!important;
   background-color:#4CAF50!important;
   border: 2px solid #4CAF50;
   padding: 2px 4px;
    margin-left: 10px;
   cursor: pointer;
}
.addrec-caption:after {
   font-family: "Fira Sans Extra Condensed";
   font-weight: 400;
    content: "New";
   color:#fff!important;
   background-color:#4CAF50!important;
   border: 2px solid #4CAF50;
    margin-left: 4px;
}
.addrec-caption-many,.addrec-caption-many:hover{
   font-family: "Fira Sans Extra Condensed";   
   color:#fff!important;
   background-color:#4CAF50!important;
   border: 2px solid #4CAF50;
   padding: 2px 4px;
    margin-left: 10px;
   cursor: pointer;
}
.addrec-caption-many:after {
   font-family: "Fira Sans Extra Condensed";
   font-weight: 400;
    content: "Multi-Add";
   color:#fff!important;
   background-color:#4CAF50!important;
   border: 2px solid #4CAF50;
    margin-left: 4px;
}