Are your Exact Forms not being asked to the prom? Are your rendered invoices and letters getting laughed at for their awkward looks? Well it is time to whip off those nerd glasses, and give those puppies a MAKEOVER!
I will be starting from the basics on this, so that everyone can follow. Feel free to skip around and grab code as needed.
All right, let's get those forms 'on fleek'. First you will need to understand that we will be manipulating the <style></style> section of the .html page that your Exact Form 'Word' doc renders. If you are planning to update your Exact Form using the 'Word' doc, you will probably have to replace all of your code in the <style> section each time you save. So, I would recommend finishing your build in 'Word', saving, and then going into the .html to alter anything from then on. Ok, let's get started.
First, go to your Pages:
Next, navigate to your Exact Form (This can be a rendered Exact Form or a Code Page, it just needs to have .html on the end)
Then go to the <style> section. (This is where we will inject the CSS code below)
_____________________
Ok here is the code for manipulating your embedded child tables:
Get rid of that awkward first column: This column is called the .icr. it is where the pencil / eyeball / delete checkbox render whenever you see a normal report. This awkwardly carries over to the rendered child report on your Exact Forms, even if you add all of the options at the end of your child table code to remove everything in them. (...^options=nfg.nos.qws.ned.nvw.nfg.phd");~)
Note: If you have a Total at the bottom, it may render strangely. See examples below. Original:
You will note that "!important" is used a lot. What this does is override the native CSS, just for that .html page. It is very powerful, and should be used for all of your custom CSS. Otherwise, the native CSS will always prevail.
Are you seeing random breaks in your headers? When you inspect the code are you seeing a <br> in the text? Yeah, that happened to me. I do not know why, I do not know how, but somehow some fields have a break in them that you just can't get out, no matter what you do. So let's break that <br>...
This code makes it so any <br> in the header will not render.
.hd-div br
{display: none !important;}
_____________________
Speaking of headers, let's get those looking proper. This code adds a bit of style to those headers. Add size and color as well as alignment. Code:
And this bit of code gets rid of all borders around your headers, just leaving that clean fresh look. You can also colorize your headers his way.: Code:
.FS-H3 {border:0px solid #ddd !important;
background-color: #000 !important;}
(v The code below is for no outside border on the table at all. v)
table.searchResults
{border: 0px solid #ddd !important;}
_____________________
Are you grouping your records? I know I like to get the gang together. So this is a two part code. First you gotta group the records in your Child Table code. You do this with the magic '.gb-V' (group by - value). This looks at the slist (sort list) and groups on those values, in the order on the slist. If you need to group by more than one value on the slist, just add another 'V' (gb-VV). The so-AA (sort order) in the code, says that both values in the slist (grouped or not) will be sorted in Ascending order. Here is how that code looks: Code:
~qdb.GetURL("bspxxx45","API_GenResultsTable^query={'25'.TV.'"+ field ["Record ID"]+"'}^clist=6.16.15^slist=3.7^options=nfg.so-AA.gb-VV.nos.qws.ned.nvw.nfg.phd");~
_____________________
Ok, so you are lookin good. Ya got rid of the .icr, your headers are looking good, your all grouped up... oh wait, your group looks funky. Time to kick the ugly bits to the curb and make that grouping sparkle! Before Code:
After Code:
This code first lets you change the color / size / font of the header, and then the second part takes away that pesky summary text. This gives you a clean grouped look. Code:
And the last little bit that you may want to complete your look is a bit of column manipulation. This will give you the basic code to start getting your columns lookin just the way you want them, with no squish, and aligned how you like. Take control of that record frizz and let it know who is the Style boss here! Code:
Well, I hope that this helps some of you all feel more confident with CSS, and that your made over Exact Forms are the belle of the ball. There are sooooo many more cool things that you can do with Exact Forms, but I really have to stop avoiding work at some point. Feel free to share any cool code or corrections / improvements that you have below. :)
------------------------------ Meredith Moore QuickBaseGirl ------------------------------
A few weeks ago I tackled my first Exact Form. It was indeed a bit of a chore, and you're absolutely right about getting the basic design done in Word first or you'll be retracing your steps every time it's uploaded. It took me a couple of times before I figured that one out.
I'm a newbie in HTML and it took me a lot of time to figure out how to adjust the styles and formatting. But the finished product is great, just like using Mail Merge only better. It works so much better than trying to develop a form with all the fields positioned in such a way to make it look good, which is practically impossible.
Thanks so much for our contribution, I'm bookmarking this for future reference.
------------------------------ Barry Dolan IntelliBridge Technology Inc Federal Way WA 206-551-7022 ------------------------------
