If you have questions or if you want to share your opinion about Aware IM post your message on this forum
#52222 by Jaymer
Mon Dec 02, 2019 4:11 am
Consider this Grid (this is from the Preview window in Config Tool)
top_panel1.png
top_panel1.png (19.71 KiB) Viewed 2462 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
top_panel2.png (7.29 KiB) Viewed 2462 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
top_panel3.png (52.22 KiB) Viewed 2462 times
#53447 by Jhstephenson
Mon Mar 09, 2020 10:04 pm
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
#53466 by Jaymer
Wed Mar 11, 2020 8:35 pm
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
Screen Shot 2020-03-11 at 3.49.56 PM.png (12.5 KiB) Viewed 1483 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;
}

Who is online

Users browsing this forum: swiftinitpvtltd and 18 guests