Versions Compared

Version Old Version 52 New Version 53
Changes made by

Tushar Tajane

Tushar Tajane

Saved on

Key

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

...

The consent form is designed in HTML, since it gives us the flexibility of easy formatting. E.g. use of bullet points, use of text formatting like bold, underline, embed videos/photos, etc.

There are three sections in the consent form:

  1. Formatted text

  2. Header/Footer

  3. Consent statements

  4. Custom fields

...

Consent statement(s) can be added anywhere in the consent form. They can be displayed as a dropdown, radio-button, or checkbox.

For example:

...

Custom Fields

Details such as signature, date of signature, etc. that were defined in the custom form (step 2 in the “Prerequisites”) can be displayed as below in the consent form.

...

Examples of Consent Form

Here’s the HTML for the above consent document: The HTML document has a below example of a consent statement, custom fields, signature, and date.

View file
nameGeneral Consent Form(English)- v1.10.html

Other Example

<div> <textarea class="form-control" ng-model

Expand
titleExamples to add the different types of custom fields in the consent document

  1. The ‘Consent Date’ should display the default value as the current date and time. Ensure that the control type in the consent custom fields form is updated to ‘Date and Time’.

In the consent HTML, the code for the ‘Consent Date’ field needs to be updated as below:

Code Block
languagehtml
<div class="clearfix">
      <div style="width: 45%; float: left; clear: left;">
          <div class="col-xs-8 os-no-left-padding">
            <div <osuser-date-picker name="consentDate" dateinput field="ectx.customFields.consentDate" default-current-date></os-date-picker>type="date-time">
    </div>     <div class="col-xs-4 os-no-left-padding"> 		  <timepicker class="os-time-no-wheels" ng-model<os-date-picker name="consentDate" date="ectx.customFields.consentDate" show-meridian="false"></timepicker>
		 default-current-date ng-disabled="1 != 0"></os-date-picker>
            </div>
    </div>

The ‘os-date-picker’ sets the value to the current date and the time picker allows the display of the current timestamp.

2. Add consent statement with the default value set and hidden on the overview page

Code Block
<div consent-question="C0003">      </div>

          <input<div typeclass="hidden" col-xs-4 os-no-left-padding">
            <timepicker class="os-time-no-wheels" ng-model="ectx.statementscustomFields.C0003consentDate" ngshow-initmeridian="ectx.statements.C0003 = ectx.statements.C0003 || 'Y'">false" readonly-input="true"></timepicker>
          </div>

3. Add custom field radio button "I Agree/I do not agree"

Image Removed
Code Block
<div class="clearfix" style="padding: 8px 8px 8px 0px;">
	<label class="radio-inline">
		<input type="radio" name="iAgree" value="Yes" ng-model="ectx.customFields.iAgree" required>
			<span>
				<strong>I agree</strong> that you may contact me if there are results from the genetic research that may be relevant to my health.
			</span>
		</label>
		<p></p>
		<label class="radio-inline">
			<input type="radio" name="iAgree" value="No" ng-model="ectx.customFields.iAgree" required>
				<span>
					<strong>I do not agree</strong> that you may contact me if there are results from the genetic research that may be relevant to my health.
				</span>
			</label>
			<div os-field-error field="econsentForm.iAgree"></div>
		</div>

4. Add custom field text-box

Image Removed
Code Block
  <div class="clearfix">
		  <div style="width: 70%;">
		  	<label class="control-label">
			  <span>Print Name of Biobank Participant</span>
			</label>
		    <textarea class="form-control" ng-model="ectx.customFields.participantName" rows="1" required></textarea>
		  </div>
  </div>

5. Add signature field

Code Block
 <div class="clearfix" style="padding: 8px 8px 8px 0px;">
	  	  <label class="control-label">
			  <span><strong>e-signature Biobank Participant(Mandatory)</strong></span>
		  </label>
		  <div>
			  <ec-signature name="signature" image="ectx.customFields.signature" required></ec-signature>
		  </div>
		  <div os-field-error field="econsentForm.signature"></div>
	  </div>

6. Add date as a custom field with default current date and non-editable

Code Block
 <div class="clearfix">
	    <div style="width: 45%;">
		  <label class="control-label">
		    <span>Date</span>
		  </label>
		  <div class="clearfix">
		    <div class="col-xs-8 os-no-left-padding">
			  <os-date-picker name="consentDate" date="ectx.customFields.consentDate" default-current-date ng-disabled="1 != 0"></os-date-picker>
			</div>
			<div class="col-xs-4 os-no-left-padding">
			  <timepicker class="os-time-no-wheels
        <div os-field-error field="econsentForm.consentDate"></div>
      </div>
    </div>

The ‘os-date-picker’ sets the value to the current date and the time picker allows the display of the current timestamp.

2. Add consent statement with the default value set and hidden on the overview page

Code Block
<div consent-question="C0003">
        <input type="hidden" ng-model="ectx.statements.C0003" ng-init="ectx.statements.C0003 = ectx.statements.C0003 || 'Y'">
   </div>

3. Add custom field radio button "I Agree/I do not agree"

Image Added
Code Block
<div class="clearfix" style="padding: 8px 8px 0px;#if(true)display: none;#end">
  <div style="display: block; margin-bottom: 10px;">
    <span>
      <div user-input field="ectx.customFields.iAgree">
        <input type="radio" name="iAgree" value="Yes" ng-model="ectx.customFields.iAgree"
          ng-required="(ectx.statements.C0003=='N' || ectx.statements.C0003==null)">
          <span>
            <strong>I agree</strong> that you may contact me if there are results from the genetic research that may be relevant to my health.
          </span>
      </div>
    </span>
  </div>
  <div style="display: block;">
    <span>
      <div user-input field="ectx.customFields.iAgree">
        <input type="radio" name="iAgree" value="No" ng-model="ectx.customFields.consentDateiAgree" show-meridian="false" readonly-input="true"></timepicker>
			</div>
		  </div>
		  <div os-field-error field="econsentForm.consentDate"></div>
		</div>
	  </div>

7. Add number custom field

Code Block
languagehtml
 <div class="clearfix" style="padding: 8px 8px 8px 0px;">
  <div style="width: 10%; float: left">
  <label class="control-label">
    <span>Patient Age</span>
  </label>
  <ec-number name="age"
    ng-model="ectx.customFields.participantAgeWhenConsented"></ec-number>
  <
          ng-required="(ectx.statements.C0003=='N' || ectx.statements.C0003==null)">
          <span>
            <strong>I do not agree</strong> that you may contact me if there are results from the genetic research that may be relevant to my health.
          </span>
      </div>
    </span>
  </div>
  <div os-field-error field="econsentForm.iAgree"></div>
</div>

84. Add OpenSpecimen PV-dropdown as a custom field biohazard, race text-box

Image Added
Code Block
languagehtml
 <div style="width: 33%">  <div>
      <label class="control-label">
    <span>Disease</span>    </label><span>Print Name of <ec-select name="biohazard" ng-model="ectx.customFields.biohazard" multiple>Biobank Participant</span>
      <custom-field>consentCustomFields.biohazard</custom-field></label>
   </ec-select> </div>

    <div style="width: 33%">
  <label class="control-label">70%; float: left">
      <div user-input field="ectx.customFields.participantName">
        <div>
    <span>Race</span>    </label>  <textarea <ec-selectclass="form-control" name="raceparticipantName"
    ng-model="ectx.customFields.race">participantName" rows="1" required></textarea>
    <pv>race</pv>   </ec-select> </div>

9. Add custom field dropdown value with options

html
Code Block
language

      </div>
      <div os-field-error field="econsentForm.participantName"> </div>
    </div>

5. Add signature field

Code Block
 <div style="width: 70%; float: 25%left">
  <select name="consentedAt" class="form-control" ng-model="ectx.customFields.consentedAt" >
<option value="Home">Home</option>
<option value="Work place">Work place</option>
<option value="Doctor's clinic">Doctor's clinic</option>
</select>
</div>

10. Add print break in the consent document PDF: <ec-print-page-break></ec-print-page-break> is used to add the print break in the downloaded PDF.

In the below example, the 'We may contact you….' line will be printed on the next page.

Code Block
languagehtml
 <ol>
	<li>
		<u>You will be asked to donate a blood sample (approximately 3 tablespoons) and urine sample.</u> If these samples are not collected today, they may be collected at a future time when you have a blood draw ordered by your doctor or a separate appointment that is convenient for you. In some cases, we may ask you for a saliva (spit) or buccal (cheek swab) sample. We may also use blood, urine, or tissue samples collected as part of your clinical care now or in the future that would otherwise be thrown away.
	</li>
	<li>
		<u>We will request information about you and your health.  We will collect your name, address and other contact information.</u> We will use your electronic health records now and, in the future, to update your health information. We will store some of your health information, including your name, contact information, and medical history, in the Columbia Biobank database.  Biobank staff will make a note that you are a participant in the biobank in your electronic health record.
	</li>
	<ec-print-page-break></ec-print-page-break>
	<li>
		<u>We may contact you in the future.</u> We may ask you to complete additional questionnaires about your health or contact you to get additional information and ask if you are interested in joining other research studies. We may also contact you for another biological sample. We may ask for additional samples in order to study changes in your sample over time, or because we used up the first sample you provided. If we ask you for another sample, you may always say no.
	</li>
	<li>
		<u>Your coded samples, health information, and the research results may be shared with the scientific research community.</u> A science and ethics committee will review each request for data access. We will not give researchers outside of Columbia University Irving Medical Center-NewYork Presbyterian your name or any other information that could directly identify you.
	</li>
</ol>

11. Show/hide field/section based on the other field selection

Syntax: Needs to add the 'ng-show' tag to implement the show/hide logic

Code Block
languagehtml
<div ng-show="ectx.statements.C0003=='N'" >
 <p> .... </p>
 <label class="radio-inline">
  ......
 </label>
</div>

Example: When a user clicks on the “I agree to participate" option, the below section highlighted in red is enabled.

Image Removed

Example HTML for the above example:

View file
nameParticipant English 11 Nov - v1.0 (1).html

12. Mark consent statement non-editable with default selected.

Code Block
languagehtml
<div class="clearfix" consent-question="M001">
  <div>
      <label class="control-label">
        <span>
          <strong>Signature of Biobank Participant</strong>
        </span>
      </label>
      </div>
      <div user-input field="ectx.customFields.signature" type="signature">
        <ec-signature name="signature" image="ectx.customFields.signature" ng-required="(ectx.customFields.signatureAuthRep==null && (ectx.statements.C0003=='N' || ectx.statements.C0003==null))">
        </ec-signature>
      </div>
      <div os-field-error field="econsentForm.signature"> </div>
    </div>

6. Add date as a custom field with default current date and non-editable

Code Block
<div style="float: left; clear: left;">
    <label style="float: left; clear: left;">
        <strong>Today's Date</strong>
    </label>
</div>

  <div class="clearfix">
      <div style="width: 45%; float: left; clear: left;">
          <div class="col-xs-8 os-no-left-padding">
            <div user-input field="ectx.customFields.consentDate" type="date-time">
              <os-date-picker name="consentDate" date="ectx.customFields.consentDate" default-current-date ng-disabled="1 != 0"></os-date-picker>
            </div>
          </div>

          <div class="col-xs-4 os-no-left-padding">
            <timepicker class="os-time-no-wheels" ng-model="ectx.customFields.consentDate" show-meridian="false" readonly-input="true"></timepicker>
          </div>
        <div os-field-error field="econsentForm.consentDate"></div>
      </div>
    </div>

7. Add number custom field

Code Block
languagehtml
<div style="margin-bottom: 20px;">
          <label style="display: block;">Height (centimetres)</label>
          <div style="width: 250px;" user-input field="ectx.customFields.height_centimetres">
            <input style="padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 100%" name="height_centimetres" ng-model="ectx.customFields.height_centimetres" required
              ng-pattern="/^[1-9][0-9]*$/">
            <div os-field-error field="econsentForm.height_centimetres"> </div>
          </div>
        </div>

8. Add OpenSpecimen PV-dropdown as a custom field site dropdown

Code Block
languagehtml
   <div style="margin-bottom: 20px;">
          <label style="display: block;">Collection Center</label>
          <div user-input field="ectx.customFields.preferred_collection_site" type="user">
            <div style="display: inline-block; margin-right: 20px;">
              <os-sites name="preferred_collection_site" ng-model="ectx.customFields.preferred_collection_site" ></os-sites>
            </div>
            <div os-field-error field="econsentForm.preferred_collection_site"> </div>
          </div>
        </div>

9. Add custom field dropdown value with options

Code Block
languagehtml
    <div style="margin-bottom: 20px;">
          <label style="display: block;">Visit Center</label>
          <div user-input field="ectx.customFields.visit_center">
            <div style="display: inline-block; margin-right: 20px;">
              <ec-select ng-model="ectx.customFields.visit_center" required>
                <custom-field>consent_custom_fields.visit_center</custom-field>
              </ec-select>
            </div>
            <div os-field-error field="econsentForm.visit_center"> </div>
          </div>
        </div>

10. Add print break in the consent document PDF: <ec-print-page-break></ec-print-page-break> is used to add the print break in the downloaded PDF.

In the below example, the 'We may contact you….' line will be printed on the next page.

Code Block
languagehtml
 <ol>
	<li>
		<u>You will be asked to donate a blood sample (approximately 3 tablespoons) and urine sample.</u> If these samples are not collected today, they may be collected at a future time when you have a blood draw ordered by your doctor or a separate appointment that is convenient for you. In some cases, we may ask you for a saliva (spit) or buccal (cheek swab) sample. We may also use blood, urine, or tissue samples collected as part of your clinical care now or in the future that would otherwise be thrown away.
	</li>
	<li>
		<u>We will request information about you and your health.  We will collect your name, address and other contact information.</u> We will use your electronic health records now and, in the future, to update your health information. We will store some of your health information, including your name, contact information, and medical history, in the Columbia Biobank database.  Biobank staff will make a note that you are a participant in the biobank in your electronic health record.
	</li>
	<ec-print-page-break></ec-print-page-break>
	<li>
		<u>We may contact you in the future.</u> We may ask you to complete additional questionnaires about your health or contact you to get additional information and ask if you are interested in joining other research studies. We may also contact you for another biological sample. We may ask for additional samples in order to study changes in your sample over time, or because we used up the first sample you provided. If we ask you for another sample, you may always say no.
	</li>
	<li>
		<u>Your coded samples, health information, and the research results may be shared with the scientific research community.</u> A science and ethics committee will review each request for data access. We will not give researchers outside of Columbia University Irving Medical Center-NewYork Presbyterian your name or any other information that could directly identify you.
	</li>
</ol>

11. Show/hide field/section based on the other field selection

Syntax: Needs to add the 'ng-show' tag to implement the show/hide logic

Code Block
languagehtml
<div ng-show="ectx.statements.C0003=='N'" >
 <p> .... </p>
 <label class="radio-inline">
  ......
 </label>
</div>

Example: When a user clicks on the “I agree to participate" option, the below section highlighted in red is enabled.

Image Added

Example HTML for the above example:

View file
nameParticipant English 11 Nov - v1.0 (1).html

12. Mark consent statement non-editable with default selected.

Code Block
languagehtml
<div class="clearfix" consent-question="M001">
          <label class="control-label"> 
          		<input name="M001" type="checkbox" ng-true-value="'Y'" ng-false-value="'N'"  ng-disabled="1 != 0"  ng-model="ectx.statements.M001" ng-init="ectx.statements.M001 =  'Y'"> </label> 
            <span>I consented for cancer study</span>
</div>

13. Default custom value with non-editable

Code Block
languagehtml
<input type="radio" name="health_info_described_in" value="both" ng-model="ectx.customFields.health_info_described_in" 
ng-init="ectx.customFields.health_info_described_in =  'both'" ng-disabled="1 != 0">

14. Make field mandatory based on other field value

Eg:1 - Make Guardian name custom field mandatory for Male patients.

Code Block
languagehtml
<div>
 <textarea class="form-control" ng-model="ectx.customFields.parentGuardianName" rows="1" ng-required="cpr.participant.gender == 'Male'"> </textarea>
</div>

Eg:2 - Make Guardian name custom field mandatory when site='Stanford Hospital'

Code Block
languagehtml
<div>
 <textarea class="form-control" ng-model="ectx.customFields.parentGuardianName" rows="1" ng-required="cpr.registrationSite == 'Stanford Hospital''"> </textarea>
</div>

Eg:3 - Make Participant Signature(signature) mandatory if Guardian signature(signatureAuthRep) is not entered

Code Block
languagehtml
<div>
    <ec-signature name="signature" image="ectx.customFields.signature" ng-required="ectx.customFields.signatureAuthRep==null"></ec-signature>
  </div>

15. Add File Type Control

Code Block
languagehtml
    <div style="margin-bottom: 20px;">
          <label style="display: block;">Photo Identity</label>
          <div user-input field="ectx.customFields.photo_identity" type="file">
            <div style="display: inline-block; margin-right: 20px;">
              <ec-file-uploader name="photo_identity" file="ectx.customFields.photo_identity" required></ec-file-uploader>

<label

class="control-label">

  </div>

<input

name="M001"

type="checkbox" ng-true-value="'Y'" ng-false-value="'N'" ng-disabled="1 != 0" ng-model="ectx.statements.M001" ng-init="ectx.statements.M001 = 'Y'

 <div os-field-error field="econsentForm.photo_identity"> </

label>

div>
          </div>

<span>I

consented

for cancer study</span> </div>

13. Default custom value with non-editable

Code Block
languagehtml
<input type="radio" name="health_info_described_in" value="both" ng-model="ectx.customFields.health_info_described_in" 
ng-init="ectx.customFields.health_info_described_in =  'both'" ng-disabled="1 != 0">

14. Make field mandatory based on other field value

Eg:1 - Make Guardian name custom field mandatory for Male patients.

Code Block
languagehtml
 </div>

16. Conditional field mandatory (File Type Field)

Eg, The consent form has the participant’s signature, parent’s signature, and paper consent file (File type). Out of three fields, one of them needs to fill.

Code Block
<div style="width: 45%; float: left;">
  <label class="control-label">
   <span>Upload Paper Consent</span></label>
   <div user-input field="ectx.customFields.parentGuardianNamesignedConsentFile" rowstype="1file" ng-required="cpr.participant.gender == 'Male'"> </textarea>
</div>

Eg:2 - Make Guardian name custom field mandatory when site='Stanford Hospital'

Code Block
languagehtml
<div>
 <textarea class="form-control" ng-model>
     <div>
      <ec-file-uploader file="ectx.customFields.parentGuardianNamesignedConsentFile" rowsname="1signedConsentFile" ng-required="cpr.registrationSite(ectx.customFields.signature==null && ectx.customFields.signatureAuthRep == 'Stanford Hospital''"> </textarea>
</div>

Eg:3 - Make Participant Signature(signature) mandatory if Gurgdian signature(signatureAuthRep) is not entered

Code Block
languagehtml
<div>
    <ec-signature name="signature" image="ectx.customFields.signature" ng-required="ectx.customFields.signatureAuthRep==null"></ec-signature>
  </div>

15. Add File Type Control

Code Block
languagehtml
  <div style="width: 33%; float: left; padding-left: 16px;">
      <label class="control-label">
        <span>Signed Form</span>
      </label>
	  <div>
	    <ec-file-uploader file="ectx.customFields.signedConsentFile"></ec-file-uploader>
	  </div>
	</div>

16. Conditional field mandatory (File Type Field)

Eg, The consent form has the participant’s signature, parent’s signature, and paper consent file (File type). Out of three fields, one of them needs to fill.

Code Block
<div style="width: 45%; float: left;">
  <label class="control-label">
   <span>Upload Paper Consent</span></label>
 <div>
   <ec-file-uploader file="ectx.customFields.signedConsentFile" name="signedConsentFile" ng-required="(ectx.customFields.signature==null && ectx.customFields.signatureAuthRep ==null)"></ec-file-uploader>
 </div>
    <div os-field-error field="econsentForm.signedConsentFile"></div>
</div>

17. Change the caption for the Next and Previous button

Code Block
<ec-page-nav-buttons>
  <next>Siguiente</next>
<previous>Página Anterior</previous>
<save>Guardar</save>
<cancel>Cancelar</cancel>
</ec-page-nav-buttons>
Image Removed

18. Configure headers and footer for the consent document print file: To configure this, you need to set the print template in OpenSpecimen settings as below. You can set the logo, stamp on headers, and footer, including page numbers.

Image Removed

Example: PDF

Image Removed

Example HTML code for the above document:

Code Block
languagehtml
<div>
  <ec-page-header>
    <div class="clearfix" style="border-bottom: 1pxnull)"></ec-file-uploader>
   </div>
   </div>
    <div os-field-error field="econsentForm.signedConsentFile"></div>
</div>

17. Change the caption for the Next and Previous button

Code Block
<ec-page-nav-buttons>
  <next>Siguiente</next>
<previous>Página Anterior</previous>
<save>Guardar</save>
<cancel>Cancelar</cancel>
</ec-page-nav-buttons>
Image Added

18. Configure headers and footer for the consent document print file: To configure this, you need to set the print template in OpenSpecimen settings as below. You can set the logo, stamp on headers, and footer, including page numbers.

Image Added

Example: PDF

Image Added

Example HTML code for the above document:

Code Block
languagehtml
<ec-print-template>
<div>
  <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://bb.cuimc.columbia.edu/os-test/logo/RS2133_RS460_Columbia_CUIMC_H_B_RGB_A.png">
      </div>
    </div>
  </ec-page-header>

  <ec-page-footer>
    <table style="border-top: 2px solid #ddd; position:relative;height: 70px; background: "#fff"; display: inline-block; width: 100%; padding: 8px 8px;">
	  <div
      <tbody>
        <tr>
          <td style="floattext-align: left;">
            <img style="position: absolute; z-index: 1000; height: 60px70px; width: 450px300px;"  src="https://testbb.cuimc.openspecimen.orgcolumbia.edu/os-test/logo/RS2133cumc_RS460_Columbia_CUIMC_H_B_RGB_Astamp_hiccc.png">
	  </div> 	</div>   </ec-page-header>    <ec-page-footer>
</td>
   <div class="clearfix" style="border-top: 1px solid #ddd; position:relative;height: 70px; display: inline-block; width: 100%    <td style="text-align: right; padding: 8px 8px10px;">
	    <div style="float: left;">        <div <imgid="osPageCounter" style="position: absolute; z-index: 1000; height: 60px; width: 300px;" src="https://test.openspecimen.org/logo/cumc_stamp.png">
	  </div>
	  <div style="float: right; color: #666;">
	    <span>- {{currentPage}} of {{totalPages}} - </span>
	  </div>
	</div>bottom: 12px; right: 5px;"> </div>
          </td>
        </tr>
      </tbody>
    </table>
  </ec-page-footer>
</div>
</ec-print-template>

Upload Consent Document in OpenSpecimen

...

Expand
titleUpload Consent Document in OpenSpecimen

  1. Login to the OpenSpecimen → Click on Consent Card

  2. Click on View Documents

  3. Click on Add and provide the Title and Revision details and upload the HTML consent form you created

Adding the Consent Document Form to a CP

Once the HTML is ready, you can upload it for a CP using the below steps.

...

If a version of a consent form is not needed, it can be archived. Once archived, the consent document is not available anymore any more for consent response collection. However, if consent is already collected for that version, then it is available for viewing, editing, and reporting.

From v9.0, OpenSpecimen allows archiving the document at the system level and CP level. If the document is archived at the system level, the user won't be able to add that in new collection protocols, but if that document is already used in other CP will work without affecting anything.

Users also allow to Archive archiving the document in the collection protocol, and users won't be able to collect any responses for new patients.

  1. System-Level Archive Option:

    1. Navigates to Home → Consent → View Documents

    2. Click on the Archive option

  2. CP Level Archive Option:

    1. Go to the Collection Protocol Overview Page → Consents tab

...