Configure consent PDF

1 Introduction:
2 Configure Print PDF (Headers/Footer)
3 Designing the print document(HTML) to configure the consent PDF
4 Add print-page break in consent document PDF.

Introduction:

From v7.1, it is possible to configure the consent PDF, which users can download after filling the consent/survey form. Users can set up the headers, footers and also able to add the table, which contains the patient information like name, collection protocol details, etc.

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.

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:

Go to the 'Home' page.
Click on the ‘Settings’ tab.
Search for 'Consent Document' as below
Upload the HTML file you created to configure the consent PDF.

Below are the details to create the HTML document to set up the printing 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.

We can configure the below things in PDF.

Header
Add a table with the patient and other information.
Footer

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

Consent document level print document and HTML example:

Configure headers

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

Example1: Configure the university logo on the header

<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

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

Configure the patient and other information

Users can add the patient details like name, collection protocol details, PPID and registration date, consent document version, etc. on the print consent document using the below code block.

<ec-doc-preamble>
    <h3 style="text-align: center;">
      {{ectx.docVersion.title}} - v{{ectx.docVersion.version}}
    </h3>
    <hr>
    <table>
	  <tbody>
		<tr style="width: 50%; padding: 4px 4px;">
		  <td style="width: 33%; padding: 4px; font-weight: bold">Name</td>
		  <td style="width: 33%; padding: 4px">{{cpr.participant.firstName}} {{cpr.participant.lastName}}</td>
		</tr>
	    <tr style="width: 50%; padding: 4px 4px;">
		  <td style="width: 33%; padding: 4px; font-weight: bold">Collection Protocol</td>
		  <td style="width: 33%; padding: 4px">{{cpr.cpShortTitle}}</td>
		</tr>
	    <tr style="width: 50%; padding: 4px 4px;">
		  <td style="width: 33%; padding: 4px; font-weight: bold">PPID</td>
		  <td style="width: 33%; padding: 4px">{{cpr.ppid}}
		</tr>
		<tr style="width: 50%; padding: 4px 4px;">
		  <td style="width: 33%; padding: 4px; font-weight: bold">Registration Date</td>
		  <td style="width: 33%; padding: 4px">{{cpr.registrationDate | date: global.dateFmt}}
		</tr>
	  </tbody>
	</table>
	<hr>
  </ec-doc-preamble>

Screenshot:

Configure the footers

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.

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

Screenshot:

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.

Example: In the below example, the last line of the first page splits between page 1 and page 2. In that case, we need to add the print-page-break so that line should move to the next page.

Steps to add the print-page-break in the consent documents:

Go to the Home -->'Collection Protocol' overview page.
Click on the 'Cosents' tab.
Download the consent document which you want to configure for a print page break.
Open the downloaded consent document HTML in the editor.
Search the text where you want to add the page break HTML tag. In the above PDF screenshot, I want to add the page break after '3. We may contact you …..' text, so from that line, all the text will move to the next page.
Once you search the line, add the '<ec-print-page-break></ec-print-page-break>' tag before that line. See the below example.
Save the updated HTML document.
Go to the 'Collection Protocol Overview → Consents tab.'
Update the consent document
Go to the participant overview page → Consents → (Refresh the browser) → Print the filled consent form. Now you will be able to see the changes in the print PDF file.

Screenshot after adding the print-page-break

Refer the below example PDF and consent document

Introduction:

Configure Print PDF (Headers/Footer)

Designing the print document(HTML) to configure the consent PDF

Configure headers

Configure the patient and other information

Configure the footers

Add print-page break in consent document PDF.