Easy CSS Mod - custom Add/New button on Grids

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Easy CSS Mod - custom Add/New button on Grids

Post by Jaymer »

Consider this Grid (this is from the Preview window in Config Tool)
top_panel1.png
top_panel1.png (19.71 KiB) Viewed 5313 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 5313 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 5313 times
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Re: Easy CSS Mod - custom Add/New button on Grids

Post by Jhstephenson »

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
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Easy CSS Mod - custom Add/New button on Grids

Post by Jaymer »

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 4334 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;
}
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Post Reply