Forum Discussion

MeredithMoore5's avatar
Qrew Assistant Captain
6 months ago

CODE DUMP: Making your Exact Forms look Amazing!

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. (...^");~)

Note: If you have a Total at the bottom, it may render strangely. See examples below.
After Code (with Total):
After Code (no Total):
	{font-size:0pt !important;
	width:0px !important;
	margin:0in 0in 0in 0in !important;
	padding: 0px 0px 0px 0px !important;
	border-top: 0px solid #ddd !important;
	border-bottom: 1px solid #ddd !important;
	border-left: 0px solid #ddd !important;
	border-right: 0px solid #ddd !important;}


Ok, now on to some more Exact Form glow-ups.

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.

tr.hd .hd-div 
	{font-size:14.0pt !important;
	font-family:"Arial",sans-serif !important;
	color:#2E74B5 !important;
	font-weight:bold !important;
	padding:0px !important;
	text-align:left !important;
	border:0px solid #ddd !important;}

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.:

.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)
	{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:

~qdb.GetURL("bspxxx45","API_GenResultsTable^query={'25'.TV.'"+ field ["Record ID"]+"'}^clist=6.16.15^slist=3.7^");~


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.

.TableGroupHeader {
    color: #2E74B5 !important; 
    font-size: 14px !important;
    font-family: "Gibson-SemiBold", Helvetica, Arial, Sans-Serif !important;}

	{font-size: 0px !important;}



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!

	{grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
	text-align:left !important;
	border-bottom: 1px solid #ddd !important;
	border-right: 0px solid #ddd !important;}


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

1 Reply

  • Wow! This is awesome.

    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