Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Info

User needs to be well-versed with HTML to configure PDF settings. The HTML files can be created by hand or using online editors like this

...

Configure Print PDF (Headers/Footer)

OpenSpecimen allows importing the HTML format document to which control the consent printing PDF. Users can configure that in the individual consent form and can configure it in a setting(system level) that is applicable for all the consent forms.

How settings print template vs individual print template works:

  • When the print settings are missing in the consent document then the system-level settings are used.

System-level Print Setting:

Steps:

  1. Go to the 'Home' page.

  2. Click on the 'Settings' ‘Settings’ tab.

  3. Search for 'Consent Document' as below

  4. Upload the HTML file you created to configure the consent PDF.

...

Below are the details to create the HTML document to setup set up the printing consent PDF.

Designing the HTML document to configure the consent PDF

The System-level and Consent document level configuration is similar. It just when adding in system setting you need to uplaod the html in setting tab where as at consent document level you need to speified the print setting in consent document it self.

The consent form PDF is designed in HTML since it gives us the flexibility of easy formatting.

...

  1. Header

  2. Add a table with the patient and other information.

  3. Footer

Example: Refer to the below HTML document and PDF (System-Level HTML and print example)

View file
nameDownloadedConsentDocument.pdf
View file
namepdf_Print_template.html

Consent document level print document and HTML example:

View file
nameConsent Document Example.pdf
View file
nameTesting Ticket - v1.0.html

Configure headers

Expand

Below is the code block to set up the header in the consent PDF.

Example1: Configure the university logo on the header

Code Block
languagehtml
<ec-page-header>
    <div class="clearfix" style="border-bottom: 1px solid #ddd; position:relative;height: 70px; background: "#fff"; display: inline-block; width: 100%; padding: 8px 8px;">
	  <div style="float: left;">
        <img style="position: absolute; z-index: 1000; height: 60px; width: 450px;" src="https://specimen-test.irvinginstitute.columbia.edu/logo/RS2133_RS460_Columbia_CUIMC_H_B_RGB_A.png">
	  </div>
	</div>
  </ec-page-header>

In the above code, the user can add the university logo in the header using the 'src=' tag.

Screenshot:

Example2: Configure the page numbers using the below example

Code Block
languagehtml
<ec-page-header>
    <div class="clearfix" style="position:relative;height: 70px; background: #205081; display: inline-block; width: 100%; padding: 8px 8px;">
	  <div style="float: right; color: #fff;">
	    <span>{{currentPage}} / {{totalPages}}
	  </div>
	</div>
  </ec-page-header>

Screenshot:

...

Expand

Users can configure the footer similar to heders with the university logo, page number, etc. Refer to the below code block to set the footer.

Code Block
languagehtml
<ec-page-footer>
    <div class="clearfix" style="border-top: 1px solid #ddd; position:relative;height: 70px; display: inline-block; width: 100%; padding: 8px 8px;">
	  <div style="float: left;">
        <img style="position: absolute; z-index: 1000; height: 60px; width: 300px;" src="https://specimen-test.irvinginstitute.columbia.edu/logo/cumc_stamp.png">
	  </div>
	  <div style="float: right; color: #666;">
	    <span>- {{currentPage}} of {{totalPages}} - </span>
	  </div>
	</div>
  </ec-page-footer>

In the above example, we configured the image in '<img' tag and page number in '<span tag>{{currentPage}} of {{totalPages}}'

Screenshot:

Add print-page

...

break in consent document PDF.

When the user downloads the consent form after filling it, they might notice that they need some information on a new page in the print document, or perhaps they want to move the content from the second half-page to the next page, etc.

...