---
title: Pain Assessment Form
product: PDF Generator
description: Download a printable pain assessment form in PDF. Create editable or prefilled patient pain evaluation forms with SurveyJS PDF Generator.
framework: Angular
source: https://surveyjs.io/pdf-generator/examples/pdf-healthcare-pain-assessment-form-template/angular
index: https://surveyjs.io/pdf-generator/examples/overview.md
---
# Pain Assessment Form (Angular)
## Files
### `src/app/components/json.ts`
```ts
export const json = {
"title": "Pain Assessment Form",
"description": "Cognitively Intact",
"pages": [
{
"name": "patient-details",
"questionTitleWidth": "110px",
"questionTitleLocation": "left",
"title": "Patient details",
"elements": [
{
"type": "text",
"name": "full-name",
"title": "Full name"
},
{
"type": "text",
"name": "id-number",
"startWithNewLine": false,
"title": "ID #"
},
{
"type": "text",
"name": "health-care-provider",
"title": "Health care provider"
},
{
"type": "text",
"name": "room-number",
"startWithNewLine": false,
"title": "Room #"
},
{
"type": "text",
"name": "assessment-date",
"title": "Assessment date",
"inputType": "date"
},
{
"type": "text",
"name": "time",
"startWithNewLine": false,
"title": "Time",
"inputType": "time"
}
]
},
{
"name": "pain-assessment",
"title": "Pain assessment",
"elements": [
{
"type": "radiogroup",
"name": "pain-control-goal",
"title": "Individual's pain control goal",
"choices": [
"Sleep comfortably",
"Comfort at rest",
"Comfort with movement",
"Total pain control",
"Stay alert",
"Perform desired activities"
],
"showOtherItem": true,
"otherText": "Other (please specify)",
"colCount": 2
},
{
"type": "rating",
"name": "pain-intensity-goal",
"title": "Individual's pain intensity goal",
"rateCount": 10,
"rateMax": 10,
"minRateDescription": "No pain",
"maxRateDescription": "Worst pain imaginable"
},
{
"type": "text",
"name": "current-diagnosis",
"title": "Current pain-related diagnosis(es)"
},
{
"type": "radiogroup",
"name": "assessment-reason",
"title": "Reason for assessment",
"choices": [
"MDS admission",
"MDS significant change",
"MDS readmission",
"MDS quarterly",
"MDS annual",
"New condition",
"Routine monitoring"
],
"colCount": 2
},
{
"type": "radiogroup",
"name": "pain-type",
"title": "Type of pain",
"choices": [
"Nociceptive (Joint/bone/soft tissue)",
"Neuropathic",
"Mixed"
],
"colCount": 2
},
{
"type": "panel",
"name": "depression-panel",
"title": "Depression",
"description": "Please provide details regarding depression symptoms if applicable.",
"elements": [
{
"type": "radiogroup",
"name": "depression-scale",
"title": "Scale",
"choices": [
"1-5 (no depression)",
"6-10 (mild)",
"11-15 (moderate)",
"16-20 (severe)"
],
"colCount": 2
},
{
"type": "radiogroup",
"name": "depression-score",
"title": "Score",
"choices": [
"0 to 4 points",
"5 to 9 points",
"10 to 14 points",
"15 to 19 points",
"20 to 27 points"
],
"colCount": 2
},
{
"type": "text",
"name": "depression-diagnosis-date",
"title": "Diagnosis date",
"inputType": "date"
}
]
},
{
"type": "rating",
"name": "rate-severity",
"title": "Intensity of Pain",
"description": "Rate the severity of your pain.",
"rateCount": 11,
"rateMin": 0,
"rateMax": 10,
"minRateDescription": "No pain",
"maxRateDescription": "Worst pain possible"
},
{
"type": "imagepicker",
"name": "faces-pain-scale",
"title": "Faces pain scale",
"description": "Choose the face that best describes how you are feeling.",
"choices": [
{
"value": "Item 1",
"imageLink": "https://api.surveyjs.io/private/Surveys/files?name=952dd683-462a-4903-a33b-d35492c36a43"
},
{
"value": "Item 2",
"imageLink": "https://api.surveyjs.io/private/Surveys/files?name=f95c1e74-8404-4d95-bf18-66ea0bd437fc"
},
{
"value": "Item 3",
"imageLink": "https://api.surveyjs.io/private/Surveys/files?name=053e9a2f-9f43-42e1-8f40-214372a63efd"
},
{
"value": "Item 4",
"imageLink": "https://api.surveyjs.io/private/Surveys/files?name=afa9a3a8-d07e-4c7d-b24b-785387ec6bab"
},
{
"value": "Item 5",
"imageLink": "https://api.surveyjs.io/private/Surveys/files?name=2fee0fae-1af2-47cd-88fd-b99f6cd99946"
},
{
"value": "Item 6",
"imageLink": "https://api.surveyjs.io/private/Surveys/files?name=df1906f8-d7c5-4507-96e2-b43e9c05270f"
}
],
"imageFit": "cover",
"minImageWidth": 120,
"minImageHeight": 100,
"maxImageWidth": 240,
"maxImageHeight": 200
},
{
"type": "radiogroup",
"name": "verbal-descriptor",
"title": "Verbal descriptor scale",
"description": "Select the words that best represent the intensity of your pain now.",
"choices": [
"No pain",
"Mild pain",
"Moderate pain",
"Severe pain",
"Extreme pain",
"Pain as bad as could be"
],
"colCount": 2
},
{
"type": "panel",
"name": "pain-location-panel",
"questionTitleLocation": "hidden",
"title": "Pain location",
"description": "Mark the areas where you feel pain. If you feel more than one sensation in the same area, mark that area with all applicable symbols. Make sure to mark all affected areas.",
"elements": [
{
"type": "signaturepad",
"name": "pain-type-marks",
"maxWidth": "30%",
"signatureWidth": 213,
"signatureHeight": 292,
"showPlaceholder": false,
"backgroundImage": "https://api.surveyjs.io/private/Surveys/files?name=6de9d008-5f99-459f-a01b-3c8e272666ef",
"waitForUpload": true
},
{
"type": "signaturepad",
"name": "pain-location-body",
"startWithNewLine": false,
"signatureWidth": 957,
"signatureHeight": 676,
"signatureAutoScaleEnabled": true,
"showPlaceholder": false,
"backgroundImage": "https://api.surveyjs.io/private/Surveys/files?name=4fa86ea3-7a97-4344-9857-06ee6c9fe630",
"penColor": "#f01919",
"waitForUpload": true
}
]
}
]
},
{
"name": "pain-history",
"elements": [
{
"type": "panel",
"name": "pain-history-panel",
"title": "History of pain",
"elements": [
{
"type": "radiogroup",
"name": "pain-onset",
"title": "Onset of pain",
"choices": [
"New (last 7 days)",
"Recent (last 3 months)",
"More distant (> 3 months)",
"Unknown"
],
"colCount": 2
},
{
"type": "radiogroup",
"name": "pain-frequency",
"title": "Frequency of pain",
"choices": [
"Constant",
"Frequent",
"Infrequent",
"Unknown"
],
"colCount": 2
},
{
"type": "checkbox",
"name": "pain-description",
"title": "Description of pain",
"choices": [
"Aching",
"Burning",
"Cramping",
"Crushing",
"Dull",
"Numbness",
"Pins & Needles",
"Sharp",
"Shooting",
"Throbbing"
],
"showOtherItem": true,
"otherText": "Other (please describe)",
"colCount": 2,
"maxSelectedChoices": 3,
"minSelectedChoices": 1
},
{
"type": "radiogroup",
"name": "pattern-change",
"title": "Change in pattern of pain",
"description": "Has the pain changed in description or intensity the last 7 days?",
"choices": [
"Yes",
"No",
"Unknown"
],
"otherText": "Other (please describe)",
"colCount": 2
},
{
"type": "comment",
"name": "pattern-change-description",
"title": "Describe how your pain pattern has changed if you indicated 'Yes' above",
"rows": 2,
"autoGrow": true
},
{
"type": "radiogroup",
"name": "what-increases-pain",
"title": "What causes or increases the pain?",
"choices": [
"Movement",
"Coughing",
"Cold",
"Heat",
"Fatigue",
"Anxiety"
],
"showOtherItem": true,
"otherText": "Other (please describe)",
"colCount": 2
},
{
"type": "radiogroup",
"name": "what-relieves-pain",
"title": "What relieves the pain?",
"choices": [
"Cold",
"Heat",
"Exercise",
"Eating",
"Opioids",
"Non-opioid meds",
"Adjuvants",
"Herbals",
"Massage",
"Relaxation",
"Rest",
"Repositioning",
"Distraction"
],
"showOtherItem": true,
"otherText": "Other (please specify)",
"colCount": 2
},
{
"type": "comment",
"name": "pain-medication-history",
"title": "Pain medication history",
"maxLength": 250,
"rows": 2,
"autoGrow": true
},
{
"type": "matrix",
"name": "pain-effects",
"title": "Effects of pain",
"description": "Using the following scale, rate how the pain has had an effect in each area in the past 24 hours.",
"showCommentArea": true,
"commentText": "",
"alternateRows": true,
"rowTitleWidth": "250px",
"columns": [
{
"value": "Column 1",
"text": "0 (no effect)"
},
{
"value": "Column 2",
"text": "2 (mild effect)"
},
{
"value": "Column 3",
"text": "5 (moderate effect)"
},
{
"value": "Column 4",
"text": "10 (severe effect)"
}
],
"rows": [
{
"value": "Row 1",
"text": "Accompanying symptoms (e.g., nausea)"
},
{
"value": "Row 2",
"text": "Sleep disturbance"
},
{
"value": "Row 3",
"text": "Appetite change"
},
{
"value": "Row 4",
"text": "Physical activity change"
},
{
"value": "Row 5",
"text": "Mood/behavior"
},
{
"value": "Row 6",
"text": "Concentration"
},
{
"value": "Row 7",
"text": "Relationship with others"
},
{
"value": "Row 8",
"text": "Other (please describe below)"
}
],
"eachRowRequired": true
},
{
"type": "rating",
"name": "worst-pain-lately",
"title": "Worst pain in 24 hours",
"rateCount": 11,
"rateMin": 0,
"rateMax": 10,
"minRateDescription": "No pain",
"maxRateDescription": "Worst pain possible"
},
{
"type": "rating",
"name": "recent-medication-effectiveness",
"title": "In the past 24 hours, how much have the medications or treatments eased your pain?",
"rateCount": 11,
"rateMin": 0,
"rateMax": 10,
"minRateDescription": "No relief",
"maxRateDescription": "Complete relief"
},
{
"type": "radiogroup",
"name": "plan",
"title": "Plan for addressing pain",
"showCommentArea": true,
"commentText": "Comments:",
"choices": [
"Initiate pain management flow sheet",
"Call Prescriber",
"Refer to pain team",
"Rehab referral (PT, OT, ST)",
"Non-med intervention",
"Medications prescribed",
"Spiritual counseling",
"Staff education/communication"
],
"showOtherItem": true,
"colCount": 2
}
]
},
{
"type": "signaturepad",
"name": "signature",
"maxWidth": "50%",
"title": "Signature of person completing assessment",
"signatureHeight": 100,
"waitForUpload": true
},
{
"type": "text",
"name": "title",
"maxWidth": "30%",
"startWithNewLine": false,
"title": "Title"
},
{
"type": "text",
"name": "date",
"maxWidth": "20%",
"startWithNewLine": false,
"title": "Date",
"inputType": "date"
}
]
}
],
"showPrevButton": false,
"questionsOnPageMode": "singlePage",
"headerView": "advanced"
};
```
### `src/app/components/pdf.component.css`
```css
/* You can add your custom CSS here. */
```
### `src/app/components/pdf.component.html`
```html
```
### `src/app/components/pdf.component.ts`
```ts
import { Component, OnInit } from "@angular/core";
import { Model } from "survey-core";
import { SurveyPDF } from "survey-pdf";
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;
}
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);
}
});
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-pain-assessment-form-template/reactjs.md)
- [Vue 3](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-pain-assessment-form-template/vue3js.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-pain-assessment-form-template/jquery.md)
- [Vanilla JS](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-pain-assessment-form-template/vanillajs.md)