--- title: HIPAA Release Form product: PDF Generator description: Download a printable HIPAA release form in PDF. Generate editable or prefilled authorization forms for sharing medical records with SurveyJS PDF Generator. framework: Angular source: https://surveyjs.io/pdf-generator/examples/pdf-healthcare-hipaa-release-form-template/angular index: https://surveyjs.io/pdf-generator/examples/overview.md --- # HIPAA Release Form (Angular) ## Files ### `src/app/components/json.ts` ```ts export const json = { "title": "HIPAA Release Form", "description": "Please complete all sections of this HIPAA release form. If any sections are left blank, this form will be invalid and it will not be possible for your health information to be shared as requested.", "headerView": "advanced", "pages": [ { "name": "section1", "questionTitleLocation": "hidden", "title": "Section I", "elements": [ { "type": "text", "name": "personName", "title": "I", "titleLocation": "left", "descriptionLocation": "underInput", "isRequired": true }, { "type": "text", "name": "authorizedEntity", "title": "give my permission for", "titleLocation": "top", "description": "to share the information listed in Section II of this document with the person(s) or organization(s) I have specified in Section IV of this document.", "descriptionLocation": "underInput" }, { "type": "checkbox", "name": "formOfDisclosure", "title": "Form of Disclosure", "titleLocation": "top", "choices": [ { "value": "electronicCopy", "text": " Electronic copy or access via a web-based portal " }, { "value": "hardCopy", "text": " Hard copy " } ] } ] }, { "name": "section2", "questionTitleLocation": "hidden", "title": "Section II - Health Information", "elements": [ { "type": "panel", "name": "panel2", "title": "I would like to give the above healthcare organization permission to", "elements": [ { "type": "radiogroup", "name": "disclosureType", "choices": [ { "value": "all", "text": "Disclose my complete health record including, but not limited to, diagnoses, lab test results, treatment, and billing records for all conditions." }, { "value": "partial", "text": "Disclose my complete health record except for the following information (please specify if applicable):" } ] }, { "type": "checkbox", "name": "excludedInformation", "choices": [ { "value": "mentalHealth", "text": "Mental health records" }, { "value": "communicableDiseases", "text": "Communicable diseases including, but not limited to, HIV and AIDS" }, { "value": "alcoholDrugAbuse", "text": "Alcohol/drug abuse treatment records" }, { "value": "geneticInfo", "text": "Genetic information" } ], "showOtherItem": true, "otherText": "Other (specify)", "description": "Select the types of information you do NOT want disclosed if you chose 'partial' disclosure above." } ] } ] }, { "name": "section3", "title": "Section III - Reason for Disclosure", "elements": [ { "type": "comment", "name": "reasonOfDataSharingRequest", "title": "Please detail the reasons why information is being shared. If you are initiating the request and do not wish to list the reasons, write 'at my request'", "rows": 5 } ] }, { "name": "section4", "title": "Section IV - Who Can Receive My Health Information", "elements": [ { "type": "paneldynamic", "name": "authorizedParties", "title": "I give authorization for the health information detailed in Section II of this document to be shared with the following individual(s) or organization(s)", "description": "Provide the details of the person(s)/organization(s) who may receive your health information. Note that they may not be covered by state/federal privacy rules and may share the information further.", "templateElements": [ { "type": "multipletext", "name": "authorizedParty", "titleLocation": "hidden", "items": [ { "name": "name", "title": "Name" }, { "name": "organization", "title": "Organization" }, { "name": "address", "title": "Address" } ] } ], "templateTitle": "Authorized party #{panelIndex}", "panelsState": "firstExpanded", "panelCount": 3 } ] }, { "name": "section5", "title": "Section V - Duration of Authorization", "elements": [ { "type": "boolean", "name": "authValidIndefinitely", "title": "I authorize the sharing of my health information for all past, present, and future periods", "displayMode": "checkbox" }, { "type": "multipletext", "name": "revokeAuthParty", "title": "Authorization validity period", "description": "Fill in the fields below if you did not check the previous box.", "itemTitleWidth": "170px", "items": [ { "name": "eventName", "title": "From the date of signature until the following event:" }, { "type": "text", "name": "authValidFrom", "title": "From date:", "titleLocation": "hidden", "inputType": "date" }, { "type": "text", "name": "authValidTo", "title": "To date:", "inputType": "date" } ] }, { "type": "multipletext", "name": "revokeAuthParty", "title": "I understand that I am permitted to revoke this authorization at any time by submitting a written request to:", "itemTitleWidth": "170px", "items": [ { "name": "name", "title": "Name" }, { "name": "organization", "title": "Organization" }, { "name": "address", "title": "Address" } ] }, { "type": "html", "name": "question2", "html": "

I understand that:

If my information has already been shared before revocation, it may be too late to cancel permission to share my health data.

I do not need to give additional permission for the information detailed in Section II to be shared with the person(s) or organization(s) listed in Section IV.

Refusing to sign or cancelling this authorization will not prevent me from receiving treatment or benefits, unless this information is required to determine eligibility or payment.

" } ] }, { "name": "section6", "title": "Section VI - Signature", "elements": [ { "type": "signaturepad", "name": "signature", "title": "Signature", "signatureHeight": "100px" }, { "type": "text", "name": "date", "startWithNewLine": false, "title": "Date", "inputType": "date" }, { "type": "text", "name": "userNameConfirmation", "title": "Your name" }, { "type": "panel", "name": "panel1", "title": "If this form is completed by someone with legal authority to act on the individual's behalf (for example, a parent, legal guardian, or healthcare agent), please provide the following information:", "elements": [ { "type": "text", "name": "question9", "title": "Name of the person completing this form" }, { "type": "signaturepad", "name": "question8", "title": "Signature of the person completing this form", "signatureHeight": "100px", "startWithNewLine": false }, { "type": "comment", "name": "question10", "title": "Describe the legal authority that allows this person to sign this form" } ] } ] } ], "questionErrorLocation": "bottom", "questionsOnPageMode": "singlePage" }; ``` ### `src/app/components/pdf.component.css` ```css /* You can add your custom CSS here. */ ``` ### `src/app/components/pdf.component.html` ```html ``` ### `src/app/components/theme.js` ```js export const themeJson = { "themeName": "plain", "colorPalette": "light", "isPanelless": true, "backgroundImage": "", "backgroundOpacity": 1, "backgroundImageAttachment": "scroll", "backgroundImageFit": "cover", "cssVariables": { "--sjs2-color-bg-basic-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-utility-property-grid": "rgba(255, 255, 255, 1)", "--sjs2-color-utility-tabs": "rgba(255, 255, 255, 1)", "--sjs2-color-utility-toolbox": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-basic-primary-dim": "rgba(248, 248, 248, 1)", "--sjs2-color-bg-neutral-tertiary-dim": "rgba(255, 255, 255, 1)", "--sjs2-color-utility-surface-survey-panelless": "rgba(255, 255, 255, 1)", "--sjs2-color-utility-surface-survey": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-basic-secondary": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-basic-secondary-dim": "rgba(243, 243, 243, 1)", "--sjs2-color-fg-basic-primary": "rgba(0, 0, 0, 0.91)", "--sjs2-color-fg-basic-secondary": "rgba(0, 0, 0, 0.45)", "--sjs2-color-project-brand-600": "rgba(68, 68, 68, 1)", "--sjs2-color-bg-brand-secondary": "rgba(68, 68, 68, 0.1)", "--sjs2-color-bg-brand-primary-dim": "rgba(68, 68, 68, 1)", "--sjs2-color-fg-brand-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-fg-brand-primary-disabled": "rgba(255, 255, 255, 0.25)", "--sjs2-base-unit-size": "5.2px", "--sjs2-base-unit-spacing": "5.2px", "--sjs2-base-unit-radius": "4px", "--sjs2-color-bg-accent-primary": "rgba(255, 152, 20, 1)", "--sjs2-color-bg-accent-secondary": "rgba(255, 152, 20, 0.1)", "--sjs2-color-bg-accent-secondary-dim": "rgba(255, 152, 20, 0.25)", "--sjs2-color-fg-accent-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-fg-accent-primary-disabled": "rgba(255, 255, 255, 0.25)", "--sjs2-border-effect-surface-default": "inset 0px 0px 0px 1px rgba(68, 68, 68, 0.2)", "--sjs2-border-effect-floating-default": "0px 0px 0px 1px rgba(0, 0, 0, 0.1),0px 8px 16px 0px rgba(0, 0, 0, 0.05)", "--sjs2-border-effect-component-formbox-default": "1px 1px 1px 1px rgba(68, 68, 68, 0.2), inset 1px 1px 1px 1px rgba(68, 68, 68, 0.2)", "--sjs2-color-border-basic-secondary": "rgba(68, 68, 68, 0.15)", "--sjs2-color-component-input-default-line": "rgba(68, 68, 68, 0.15)", "--sjs2-color-border-basic-secondary-overlay": "rgba(0, 0, 0, 0.16)", "--sjs2-color-bg-alert-primary": "rgba(229, 10, 62, 1)", "--sjs2-color-bg-alert-secondary": "rgba(229, 10, 62, 0.1)", "--sjs2-color-fg-alert-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-positive-primary": "rgba(25, 179, 148, 1)", "--sjs2-color-bg-positive-secondary": "rgba(25, 179, 148, 0.1)", "--sjs2-color-fg-positive-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-note-primary": "rgba(67, 127, 217, 1)", "--sjs2-color-bg-note-secondary": "rgba(67, 127, 217, 0.1)", "--sjs2-color-fg-note-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-bg-warning-primary": "rgba(255, 152, 20, 1)", "--sjs2-color-bg-warning-secondary": "rgba(255, 152, 20, 0.1)", "--sjs2-color-fg-warning-on-primary": "rgba(255, 255, 255, 1)", "--sjs2-color-component-page-default-title": "rgba(68, 68, 68, 0.91)", "--sjs2-color-component-page-default-description": "rgba(68, 68, 68, 0.45)", "--sjs2-color-component-question-default-title": "rgba(68, 68, 68, 0.91)", "--sjs2-color-fg-basic-primary": "rgba(68, 68, 68, 0.91)", "--sjs2-color-component-question-default-description": "rgba(68, 68, 68, 0.45)", "--sjs2-color-component-input-default-value": "rgba(68, 68, 68, 0.91)", "--sjs2-color-component-input-default-placeholder": "rgba(68, 68, 68, 0.45)", "--sjs2-color-component-boolean-item-false-default-value": "rgba(68, 68, 68, 0.45)", "--sjs2-color-component-input-default-label": "rgba(68, 68, 68, 0.45)", "--sjs2-base-unit-font-size": "7.2px", "--sjs2-base-unit-line-height": "7.2px" }, "headerView": "advanced" }; ``` ### `src/app/components/pdf.component.ts` ```ts import { Component, OnInit } from "@angular/core"; import { Model } from "survey-core"; import { SurveyPDF } from "survey-pdf"; import { themeJson } from "./theme"; import { json } from "./json"; import "./pdf.component.css"; import "survey-core/survey-core.min.css"; function createSurveyPdfModel (surveyModel) { const surveyPDF = new SurveyPDF(json); if (surveyModel) { surveyPDF.data = surveyModel.data; surveyPDF.locale = surveyModel.locale; } surveyPDF.applyStyle({ question: { description: { fontColor: "black" } } }); return surveyPDF; } function saveSurveyToPdf (filename, surveyModel) { const pdfDoc = createSurveyPdfModel(surveyModel); if (!pdfDoc) return; pdfDoc.save(filename); } const previewDiv = document.getElementById("pdf-preview"); const previewEmbed = document.getElementById("pdf-preview-frame"); let pdfBlobUrl; function showPdfPreview(surveyModel) { if (!previewDiv || !previewEmbed) return; const pdfDoc = createSurveyPdfModel(surveyModel); if (!pdfDoc) return; pdfDoc.raw("blob").then((blob) => { if (pdfBlobUrl) { URL.revokeObjectURL(pdfBlobUrl); } pdfBlobUrl = URL.createObjectURL(blob); previewEmbed.setAttribute("src", pdfBlobUrl); previewDiv.style.display = "block"; }); } function previewPdf(surveyModel) { if (!previewDiv) return; if (previewDiv.style.display !== "none") { previewDiv.style.display = "none"; return; } showPdfPreview(surveyModel); } @Component({ // tslint:disable-next-line:component-selector selector: "component-survey", templateUrl: "./pdf.component.html", styleUrls: ["./pdf.component.css"] }) export class SurveyPdfComponent implements OnInit { model: Model; ngOnInit() { const survey = new Model(json); survey.showCompleteButton = false; survey.navigationButtonsLocation = "topBottom"; survey.addNavigationItem({ id: "survey_save_as_file", title: "Download PDF", action: () => { saveSurveyToPdf("surveyResult.pdf", survey); } }); survey.addNavigationItem({ id: "survey_pdf_preview", title: "Preview PDF", visible: window.navigator.pdfViewerEnabled, action: () => { previewPdf(survey); } }); survey.applyTheme(themeJson); this.model = survey; } } ``` ### `src/app/components/theme.ts` ```ts export const themeJson = {}; ``` ### `src/app/app.component.css` ```css ``` ### `src/app/app.component.html` ```html ``` ### `src/app/app.component.ts` ```ts import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title = "CodeSandbox"; } ``` ### `src/app/app.module.ts` ```ts import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { SurveyModule } from "survey-angular-ui"; import { SurveyPdfComponent } from "./components/pdf.component"; @NgModule({ declarations: [AppComponent, SurveyPdfComponent], imports: [BrowserModule, SurveyModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` ### `src/environments/environment.prod.ts` ```ts export const environment = { production: true }; ``` ### `src/environments/environment.ts` ```ts // The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses `environment.ts`, but if you do // `ng build --env=prod` then `environment.prod.ts` will be used instead. // The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { production: false }; ``` ### `src/index.html` ```html
``` ### `src/main.ts` ```ts import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule } from "./app/app.module"; import { environment } from "./environments/environment"; if (environment.production) { enableProdMode(); } platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => console.log(err)); ``` ### `src/polyfills.ts` ```ts /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ /*************************************************************************************************** * BROWSER POLYFILLS */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol'; // import 'core-js/es6/object'; // import 'core-js/es6/function'; // import 'core-js/es6/parse-int'; // import 'core-js/es6/parse-float'; // import 'core-js/es6/number'; // import 'core-js/es6/math'; // import 'core-js/es6/string'; // import 'core-js/es6/date'; // import 'core-js/es6/array'; // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/weak-map'; // import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ // import 'classlist.js'; // Run `npm install classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ // import 'core-js/es6/reflect'; /** Evergreen browsers require these. **/ // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. import "core-js/proposals/reflect-metadata"; /** * Required to support Web Animations `@angular/platform-browser/animations`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ // import 'web-animations-js'; // Run `npm install web-animations-js`. /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ import "zone.js/dist/zone"; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ ``` ### `src/styles.css` ```css ``` ### `src/typings.d.ts` ```ts /* SystemJS module definition */ declare var module: NodeModule; interface NodeModule { id: string; } ``` ### `.angular-cli.json` ```json { "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "prefix": "app", "styles": [ "styles.css" ], "scripts": [ ], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ] } ``` ### `_tsconfig.json` ```json { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "allowSyntheticDefaultImports": true, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "resolveJsonModule": true, "target": "es2015", "module": "es2020", "lib": [ "es2018", "dom" ] } } ``` ### `package.json` ```json { "name": "surveyjs-angular", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "14.1.1", "@angular/cdk": "14.1.1", "@angular/common": "14.1.1", "@angular/compiler": "14.1.1", "@angular/core": "14.1.1", "@angular/forms": "14.1.1", "@angular/platform-browser": "14.1.1", "@angular/platform-browser-dynamic": "14.1.1", "@angular/router": "14.1.1", "core-js": "3.6.4", "rxjs": "6.5.4", "survey-core": "latest", "survey-angular-ui": "latest", "survey-pdf": "latest", "tslib": "1.13.0", "zone.js": "0.11.7" }, "devDependencies": { "@angular/cli": "1.6.6", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/core-js": "0.9.46", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "3.9.7" }, "keywords": [ "angular", "surveyjs" ], "description": "SurveyJS-Angular example project" } ``` ## Other Frameworks - [React](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-hipaa-release-form-template/reactjs.md) - [Vue 3](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-hipaa-release-form-template/vue3js.md) - [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-hipaa-release-form-template/jquery.md) - [Vanilla JS](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-hipaa-release-form-template/vanillajs.md)