Intersystems IRIS for Health has excellent support for the FHIR industry standard. The main features are: 1. FHIR Server 2. FHIR Database 3. REST and ObjectScript API for CRUD operations on FHIR resources (patient, questionnaire, vaccines, etc.) This article demonstrates how to use each of these features, as well as presenting an angular frontend for creating and viewing Quiz-like FHIR resources. ## Step 1 - deploying your FHIR Server using InterSystems IRIS for Health To create your FHIR Server, you must add the following instructions into iris.script file (from: https://openexchange.intersystems.com/package/iris-fhir-template)
    <span class="hljs-keyword">zn</span> <span class="hljs-string">"HSLIB"</span>
    <span class="hljs-keyword">set</span> namespace=<span class="hljs-string">"FHIRSERVER"</span>
    <span class="hljs-keyword">Set</span> appKey = <span class="hljs-string">"/fhir/r4"</span>
    <span class="hljs-keyword">Set</span> strategyClass = <span class="hljs-string">"HS.FHIRServer.Storage.Json.InteractionsStrategy"</span>
    <span class="hljs-keyword">set</span> metadataPackages = <span class="hljs-built_in">$lb</span>(<span class="hljs-string">"hl7.fhir.r4.core@4.0.1"</span>)
    <span class="hljs-keyword">set</span> importdir=<span class="hljs-string">"/opt/irisapp/src"</span>

    <span class="hljs-comment">//Install a Foundation namespace and change to it</span>
    <span class="hljs-keyword">Do</span> <span class="hljs-keyword">##class</span>(HS.HC.Util.Installer).InstallFoundation(namespace)
    <span class="hljs-keyword">zn</span> namespace

    <span class="hljs-comment">// Install elements that are required for a FHIR-enabled namespace</span>
    <span class="hljs-keyword">Do</span> <span class="hljs-keyword">##class</span>(HS.FHIRServer.Installer).InstallNamespace()

    <span class="hljs-comment">// Install an instance of a FHIR Service into the current namespace</span>
    <span class="hljs-keyword">Do</span> <span class="hljs-keyword">##class</span>(HS.FHIRServer.Installer).InstallInstance(appKey, strategyClass, metadataPackages)

    <span class="hljs-comment">// Configure FHIR Service instance to accept unauthenticated requests</span>
    <span class="hljs-keyword">set</span> strategy = <span class="hljs-keyword">##class</span>(HS.FHIRServer.API.InteractionsStrategy).GetStrategyForEndpoint(appKey)
    <span class="hljs-keyword">set</span> config = strategy.GetServiceConfigData()
    <span class="hljs-keyword">set</span> config.DebugMode = <span class="hljs-number">4</span>
    <span class="hljs-keyword">do</span> strategy.SaveServiceConfigData(config)

    <span class="hljs-keyword">zw</span> <span class="hljs-keyword">##class</span>(HS.FHIRServer.Tools.DataLoader).SubmitResourceFiles(<span class="hljs-string">"/opt/irisapp/fhirdata/"</span>, <span class="hljs-string">"FHIRServer"</span>, appKey)

    <span class="hljs-keyword">do</span> <span class="hljs-built_in">$System</span>.OBJ.LoadDir(<span class="hljs-string">"/opt/irisapp/src"</span>,<span class="hljs-string">"ck"</span>,,<span class="hljs-number">1</span>)

    <span class="hljs-keyword">zn</span> <span class="hljs-string">"%SYS"</span>
    <span class="hljs-keyword">Do</span> <span class="hljs-keyword">##class</span>(Security.Users).UnExpireUserPasswords(<span class="hljs-string">"*"</span>)

    <span class="hljs-keyword">zn</span> <span class="hljs-string">"FHIRSERVER"</span>
    zpm <span class="hljs-string">"load /opt/irisapp/ -v"</span>:<span class="hljs-number">1</span>:<span class="hljs-number">1</span>

    <span class="hljs-comment">//zpm "install fhir-portal"</span>
    <span class="hljs-keyword">halt</span>
Using the utility class HS.FHIRServer.Installer, you can create your FHIR Server. ## Step 2 - Use the FHIR REST or ObjectScript API to read, update, delete and find FHIR data I like to use the ObjectScript class HS.FHIRServer.Service to do all CRUD operations. ### To get all FHIR data from a resource type (like questionnaire):
<span class="hljs-comment">/// Retreive all the records of questionnaire</span>
<span class="hljs-keyword">ClassMethod</span> GetAllQuestionnaire() <span class="hljs-keyword">As</span> <span class="hljs-built_in">%Status</span>
{

    <span class="hljs-keyword">set</span> tSC = <span class="hljs-built_in">$$$OK</span>
    <span class="hljs-keyword">Set</span> <span class="hljs-built_in">%response.ContentType</span> = ..#CONTENTTYPEJSON
    <span class="hljs-keyword">Set</span> <span class="hljs-built_in">%response.Headers</span>(<span class="hljs-string">"Access-Control-Allow-Origin"</span>)=<span class="hljs-string">"*"</span>

    <span class="hljs-keyword">Try</span> {
        <span class="hljs-keyword">set</span> fhirService = <span class="hljs-keyword">##class</span>(HS.FHIRServer.Service).EnsureInstance(..#URL)
        <span class="hljs-keyword">set</span> request = <span class="hljs-keyword">##class</span>(HS.FHIRServer.API.Data.Request).<span class="hljs-built_in">%New</span>()
        <span class="hljs-keyword">set</span> request.RequestPath = <span class="hljs-string">"/Questionnaire/"</span>
        <span class="hljs-keyword">set</span> request.RequestMethod = <span class="hljs-string">"GET"</span>
        <span class="hljs-keyword">do</span> fhirService.DispatchRequest(request, .pResponse)
        <span class="hljs-keyword">set</span> json = pResponse.Json
        <span class="hljs-keyword">set</span> resp = []
        <span class="hljs-keyword">set</span> iter = json.entry.<span class="hljs-built_in">%GetIterator</span>()
        <span class="hljs-keyword">while</span> iter.<span class="hljs-built_in">%GetNext</span>(.key, .value) { 
          <span class="hljs-keyword">do</span> resp.<span class="hljs-built_in">%Push</span>(value.resource)
        }
        
        <span class="hljs-keyword">write</span> resp.<span class="hljs-built_in">%ToJSON</span>()    
    } <span class="hljs-keyword">Catch</span> Err {
        <span class="hljs-keyword">set</span> tSC = <span class="hljs-number">1</span>
        <span class="hljs-keyword">set</span> message = {}
        <span class="hljs-keyword">set</span> message.type= <span class="hljs-string">"ERROR"</span>
        <span class="hljs-keyword">set</span> message.details = <span class="hljs-string">"Error on get all questionnairies"</span>       
    }
    
    <span class="hljs-keyword">Quit</span> tSC
}
### To get a specific data item from the FHIR data repository (like a questionnaire ocurrence):
<span class="hljs-comment">/// Retreive a questionnaire by id</span>
<span class="hljs-keyword">ClassMethod</span> GetQuestionnaire(id <span class="hljs-keyword">As</span> <span class="hljs-built_in">%String</span>) <span class="hljs-keyword">As</span> <span class="hljs-built_in">%Status</span>
{

    <span class="hljs-keyword">set</span> tSC = <span class="hljs-built_in">$$$OK</span>
    <span class="hljs-keyword">Set</span> <span class="hljs-built_in">%response.ContentType</span> = ..#CONTENTTYPEJSON
    <span class="hljs-keyword">Set</span> <span class="hljs-built_in">%response.Headers</span>(<span class="hljs-string">"Access-Control-Allow-Origin"</span>)=<span class="hljs-string">"*"</span>

    <span class="hljs-keyword">Try</span> {
        <span class="hljs-keyword">set</span> fhirService = <span class="hljs-keyword">##class</span>(HS.FHIRServer.Service).EnsureInstance(..#URL)
        <span class="hljs-keyword">set</span> request = <span class="hljs-keyword">##class</span>(HS.FHIRServer.API.Data.Request).<span class="hljs-built_in">%New</span>()
        <span class="hljs-keyword">set</span> request.RequestPath = <span class="hljs-string">"/Questionnaire/"</span>_id
        <span class="hljs-keyword">set</span> request.RequestMethod = <span class="hljs-string">"GET"</span>
        <span class="hljs-keyword">do</span> fhirService.DispatchRequest(request, .pResponse)
        <span class="hljs-keyword">write</span> pResponse.Json.<span class="hljs-built_in">%ToJSON</span>()    
    } <span class="hljs-keyword">Catch</span> Err {
        <span class="hljs-keyword">set</span> tSC = <span class="hljs-number">1</span>
        <span class="hljs-keyword">set</span> message = {}
        <span class="hljs-keyword">set</span> message.type= <span class="hljs-string">"ERROR"</span>
        <span class="hljs-keyword">set</span> message.details = <span class="hljs-string">"Error on get the questionnaire"</span>       
    }
    
    <span class="hljs-keyword">Quit</span> tSC
}
### To create a new FHIR resource ocurrence (like a new questionnaire):
<span class="hljs-comment">/// Create questionnaire</span>
<span class="hljs-keyword">ClassMethod</span> CreateQuestionnaire() <span class="hljs-keyword">As</span> <span class="hljs-built_in">%Status</span>
{
  <span class="hljs-keyword">set</span> tSC = <span class="hljs-built_in">$$$OK</span>
  <span class="hljs-keyword">Set</span> <span class="hljs-built_in">%response.ContentType</span> = ..#CONTENTTYPEJSON
  <span class="hljs-keyword">Set</span> <span class="hljs-built_in">%response.Headers</span>(<span class="hljs-string">"Access-Control-Allow-Origin"</span>)=<span class="hljs-string">"*"</span>

  <span class="hljs-keyword">Try</span> {
    <span class="hljs-keyword">set</span> fhirService = <span class="hljs-keyword">##class</span>(HS.FHIRServer.Service).EnsureInstance(..#URL)
    <span class="hljs-keyword">set</span> request = <span class="hljs-keyword">##class</span>(HS.FHIRServer.API.Data.Request).<span class="hljs-built_in">%New</span>()
    <span class="hljs-keyword">set</span> request.RequestPath = <span class="hljs-string">"/Questionnaire/"</span>
    <span class="hljs-keyword">set</span> request.RequestMethod = <span class="hljs-string">"POST"</span>
    <span class="hljs-keyword">set</span> data = {}.<span class="hljs-built_in">%FromJSON</span>(<span class="hljs-built_in">%request.Content</span>)
    <span class="hljs-keyword">set</span> data.resourceType = <span class="hljs-string">"Questionnaire"</span>
    <span class="hljs-keyword">set</span> request.Json = data
    <span class="hljs-keyword">do</span> fhirService.DispatchRequest(request, .response)
    <span class="hljs-keyword">write</span> response.Json.<span class="hljs-built_in">%ToJSON</span>()
  } <span class="hljs-keyword">Catch</span> Err {
    <span class="hljs-keyword">set</span> tSC = <span class="hljs-number">1</span>
    <span class="hljs-keyword">set</span> message = {}
    <span class="hljs-keyword">set</span> message.type= <span class="hljs-string">"ERROR"</span>
    <span class="hljs-keyword">set</span> message.details = <span class="hljs-string">"Error on create questionnaire"</span>
  }
  
  <span class="hljs-keyword">Return</span> tSC
}
### To Update a FHIR resource (like a questionnaire):
<span class="hljs-comment">/// Update a questionnaire</span>
<span class="hljs-keyword">ClassMethod</span> UpdateQuestionnaire(id <span class="hljs-keyword">As</span> <span class="hljs-built_in">%String</span>) <span class="hljs-keyword">As</span> <span class="hljs-built_in">%Status</span>
{
  <span class="hljs-keyword">set</span> tSC = <span class="hljs-built_in">$$$OK</span>
  <span class="hljs-keyword">Set</span> <span class="hljs-built_in">%response.ContentType</span> = ..#CONTENTTYPEJSON
  <span class="hljs-keyword">Set</span> <span class="hljs-built_in">%response.Headers</span>(<span class="hljs-string">"Access-Control-Allow-Origin"</span>)=<span class="hljs-string">"*"</span>

  <span class="hljs-keyword">Try</span> {
    <span class="hljs-keyword">set</span> fhirService = <span class="hljs-keyword">##class</span>(HS.FHIRServer.Service).EnsureInstance(..#URL)
    <span class="hljs-keyword">set</span> request = <span class="hljs-keyword">##class</span>(HS.FHIRServer.API.Data.Request).<span class="hljs-built_in">%New</span>()
    <span class="hljs-keyword">set</span> request.RequestPath = <span class="hljs-string">"/Questionnaire/"</span>_id
    <span class="hljs-keyword">set</span> request.RequestMethod = <span class="hljs-string">"PUT"</span>
    <span class="hljs-keyword">set</span> data = {}.<span class="hljs-built_in">%FromJSON</span>(<span class="hljs-built_in">%request.Content</span>)
    <span class="hljs-keyword">set</span> data.resourceType = <span class="hljs-string">"Questionnaire"</span>
    <span class="hljs-keyword">set</span> request.Json = data
    <span class="hljs-keyword">do</span> fhirService.DispatchRequest(request, .response)
    <span class="hljs-keyword">write</span> response.Json.<span class="hljs-built_in">%ToJSON</span>()
  }<span class="hljs-keyword">Catch</span> Err {
    <span class="hljs-keyword">set</span> tSC = <span class="hljs-number">1</span>
    <span class="hljs-keyword">set</span> message = {}
    <span class="hljs-keyword">set</span> message.type= <span class="hljs-string">"ERROR"</span>
    <span class="hljs-keyword">set</span> message.details = <span class="hljs-string">"Error on update questionnaire"</span>
  }
  <span class="hljs-keyword">Return</span> tSC
}
### To delete a FHIR resource ocurrency (like a questionnary):
<span class="hljs-comment">/// Delete a questionnaire by id</span>
<span class="hljs-keyword">ClassMethod</span> DeleteQuestionnaire(id <span class="hljs-keyword">As</span> <span class="hljs-built_in">%String</span>) <span class="hljs-keyword">As</span> <span class="hljs-built_in">%Status</span>
{

    <span class="hljs-keyword">set</span> tSC = <span class="hljs-built_in">$$$OK</span>
    <span class="hljs-keyword">Set</span> <span class="hljs-built_in">%response.ContentType</span> = ..#CONTENTTYPEJSON
    <span class="hljs-keyword">Set</span> <span class="hljs-built_in">%response.Headers</span>(<span class="hljs-string">"Access-Control-Allow-Origin"</span>)=<span class="hljs-string">"*"</span>

    <span class="hljs-keyword">Try</span> {
        <span class="hljs-keyword">set</span> fhirService = <span class="hljs-keyword">##class</span>(HS.FHIRServer.Service).EnsureInstance(..#URL)
        <span class="hljs-keyword">set</span> request = <span class="hljs-keyword">##class</span>(HS.FHIRServer.API.Data.Request).<span class="hljs-built_in">%New</span>()
        <span class="hljs-keyword">set</span> request.RequestPath = <span class="hljs-string">"/Questionnaire/"</span>_id
        <span class="hljs-keyword">set</span> request.RequestMethod = <span class="hljs-string">"DELETE"</span>
        <span class="hljs-keyword">do</span> fhirService.DispatchRequest(request, .pResponse)
    } <span class="hljs-keyword">Catch</span> Err {
        <span class="hljs-keyword">set</span> tSC = <span class="hljs-number">1</span>
        <span class="hljs-keyword">set</span> message = {}
        <span class="hljs-keyword">set</span> message.type= <span class="hljs-string">"ERROR"</span>
        <span class="hljs-keyword">set</span> message.details = <span class="hljs-string">"Error on delete the questionnaire"</span>       
    }
    
    <span class="hljs-keyword">Quit</span> tSC
}
As you can see with you want to create use POST, to update use PUT, to delete use DELETE and to query use GET verb. ## Step 3 - Create an Angular client to consume your FHIR Server App I created an angular app using PrimeNG and installing the package npm install --save @types/fhir. This package has all FHIR types mapped to TypeScript. ### Angular controller class:
import { Component, OnInit, ViewEncapsulation } from '@angular/core'<span class="hljs-comment">;</span>
import { ActivatedRoute, Router } from '@angular/router'<span class="hljs-comment">;</span>
import { Period, Questionnaire } from 'fhir/r4'<span class="hljs-comment">;</span>
import { ConfirmationService, MessageService, SelectItem } from 'primeng/api'<span class="hljs-comment">;</span>
import { QuestionnaireService } from './questionnaireservice'<span class="hljs-comment">;</span>

const QUESTIONNAIREID = 'questionnaireId'<span class="hljs-comment">;</span>

@Component({
    selector: 'app-questionnaire',
    templateUrl: './questionnaire.component.html',
    providers: [MessageService, ConfirmationService],
    styleUrls: ['./questionnaire.component.css'],
    encapsulation: ViewEncapsulation.None
})
export <span class="hljs-keyword">class</span> QuestionnaireComponent implements OnInit {

    public questionnaire: Questionnaire<span class="hljs-comment">;</span>
    public questionnairies: Questionnaire[]<span class="hljs-comment">;</span>
    public selectedQuestionnaire: Questionnaire<span class="hljs-comment">;</span>
    public questionnaireId: string<span class="hljs-comment">;</span>
    public sub: any<span class="hljs-comment">;</span>
    public publicationStatusList: SelectItem[]<span class="hljs-comment">;</span>
    
    constructor(
        private questionnaireService: QuestionnaireService,
        private router: Router,
        private route: ActivatedRoute,
        private confirmationService: ConfirmationService,
        private messageService: MessageService){
            this.publicationStatusList = [
                {label: 'Draft', value: 'draft'},
                {label: 'Active', value: 'active'},
                {label: 'Retired', value: 'retired'},
                {label: 'Unknown', value: 'unknown'}
            ]
        }

    ngOnInit() {
        this.reset()<span class="hljs-comment">;</span>
        this.listQuestionnaires()<span class="hljs-comment">;</span>
        this.sub = this.route.params.subscribe(params => {

            this.questionnaireId = String(+params[QUESTIONNAIREID])<span class="hljs-comment">;</span>

            <span class="hljs-keyword">if</span> (!Number.isNaN(this.questionnaireId)) {
                this.loadQuestionnaire(this.questionnaireId)<span class="hljs-comment">;</span>
            }
        })<span class="hljs-comment">;</span>
    }

    private loadQuestionnaire(questionnaireId) {
        this.questionnaireService.load(questionnaireId).subscribe(response => {
            this.questionnaire = response<span class="hljs-comment">;</span>
            this.selectedQuestionnaire = this.questionnaire<span class="hljs-comment">;</span>
            <span class="hljs-keyword">if</span>(!response.effectivePeriod) {
                this.questionnaire.effectivePeriod = <Period>{}<span class="hljs-comment">;</span>
            }
        }, error => {
            console.log(error)<span class="hljs-comment">;</span>
            this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Error on load questionnaire.' })<span class="hljs-comment">;</span>
        })<span class="hljs-comment">;</span>
    }

    public loadQuestions() {
        <span class="hljs-keyword">if</span>(this.questionnaire && this.questionnaire.id) {
            this.router.navigate(['/question', this.questionnaire.id])<span class="hljs-comment">;</span>
        } <span class="hljs-keyword">else</span> {
            this.messageService.add({ severity: 'warn', summary: 'Warning', detail: 'Choose a questionnaire.' })<span class="hljs-comment">;</span>
        }
    }

    private listQuestionnaires() {
        this.questionnaireService.list().subscribe(response => {
            this.questionnairies = response<span class="hljs-comment">;</span>
            this.reset()<span class="hljs-comment">;</span>
        }, error => {
            console.log(error)<span class="hljs-comment">;</span>
            this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Error on load the questionnaries.' })<span class="hljs-comment">;</span>
        })<span class="hljs-comment">;</span>
    }

    public onChangeQuestionnaire() {
        <span class="hljs-keyword">if</span> (this.selectedQuestionnaire && !this.selectedQuestionnaire.id) {
            this.messageService.add({ severity: 'warn', summary: 'Warning', detail: 'Select a questionnaire.' })<span class="hljs-comment">;</span>
        } <span class="hljs-keyword">else</span> {
            <span class="hljs-keyword">if</span>(this.selectedQuestionnaire && this.selectedQuestionnaire.id) {
                this.loadQuestionnaire(this.selectedQuestionnaire.id)<span class="hljs-comment">;</span>
            }
        }
    }

    public reset() {
        this.questionnaire = <Questionnaire>{}<span class="hljs-comment">;</span>
        this.questionnaire.effectivePeriod = <Period>{}<span class="hljs-comment">;</span>
    }

    public save() {

        <span class="hljs-keyword">if</span>(this.questionnaire.id && this.questionnaire.id != <span class="hljs-string">""</span>) {
            this.questionnaireService.update(this.questionnaire).subscribe(
                (resp) => {
                    this.messageService.add({
                        severity: 'success',
                        summary: 'Success', detail: 'Questionnaire saved.'
                    })<span class="hljs-comment">;</span>
                    this.listQuestionnaires()
                    this.loadQuestionnaire(this.questionnaire.id)<span class="hljs-comment">;</span>
                },
                error => {
                    console.log(error)<span class="hljs-comment">;</span>
                    this.messageService.add({
                        severity: 'error',
                        summary: 'Error', detail: 'Error on save the questionnaire.'
                    })<span class="hljs-comment">;</span>
                }
            )<span class="hljs-comment">;</span>
        } <span class="hljs-keyword">else</span> {
            this.questionnaireService.save(this.questionnaire).subscribe(
                (resp) => {
                    this.messageService.add({
                        severity: 'success',
                        summary: 'Success', detail: 'Questionnaire saved.'
                    })<span class="hljs-comment">;</span>
                    this.listQuestionnaires()
                    this.loadQuestionnaire(resp.id)<span class="hljs-comment">;</span>
                },
                error => {
                    console.log(error)<span class="hljs-comment">;</span>
                    this.messageService.add({
                        severity: 'error',
                        summary: 'Error', detail: 'Error on save the questionnaire.'
                    })<span class="hljs-comment">;</span>
                }
            )<span class="hljs-comment">;</span>
        }
        
    }
    
    public delete(id: string) {

        <span class="hljs-keyword">if</span> (!this.questionnaire || !this.questionnaire.id) {
            this.messageService.add({ severity: 'warn', summary: 'Warning', detail: 'Select a questionnaire.' })<span class="hljs-comment">;</span>
        } <span class="hljs-keyword">else</span> {
            this.confirmationService.confirm({
                message: '<span class="hljs-keyword">Do</span> you confirm?',
                accept: () => {
                    this.questionnaireService.delete(id).subscribe(
                        () => {
                            this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Questionnaire deleted.' })<span class="hljs-comment">;</span>
                            this.listQuestionnaires()<span class="hljs-comment">;</span>
                            this.reset()<span class="hljs-comment">;</span>
                        },
                        error => {
                            console.log(error)<span class="hljs-comment">;</span>
                            this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Error on delete questionnaire.' })<span class="hljs-comment">;</span>
                        }
                    )<span class="hljs-comment">;</span>
                }
            })<span class="hljs-comment">;</span>
        }
    }

    
}
Angular HTML file
<p-toast [style]=<span class="hljs-string">"{marginTop: '80px', width: '320px'}"</span>></p-toast>

<p-card>

    <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"p-fluid p-formgrid grid"</span>>
        <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"field col-12 lg:col-12 md:col-12"</span>>
            <p-dropdown id=<span class="hljs-string">"dropquestions1"</span> [options]=<span class="hljs-string">"questionnairies"</span> [(ngModel)]=<span class="hljs-string">"selectedQuestionnaire"</span>
                (onChange)=<span class="hljs-string">"onChangeQuestionnaire()"</span> placeholder=<span class="hljs-string">"Select a Questionnaire"</span> optionLabel=<span class="hljs-string">"title"</span>
                 [filter]=<span class="hljs-string">"true"</span> [showClear]=<span class="hljs-string">"true"</span>></p-dropdown>
        </div>
    </div>

    <p-tabView>

        <p-tabPanel leftIcon=<span class="hljs-string">"fa fa-question"</span> header=<span class="hljs-string">"Basic Data"</span>>
            <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"p-fluid p-formgrid grid"</span>>
                <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"field col-3 lg:col-3 md:col-12"</span>>
                    <label <span class="hljs-keyword">for</span>=<span class="hljs-string">"txtname"</span>>Name</label>
                    <input <span class="hljs-keyword">class</span>=<span class="hljs-string">"inputfield w-full"</span> id=<span class="hljs-string">"txtname"</span> required type=<span class="hljs-string">"text"</span> [(ngModel)]=<span class="hljs-string">"questionnaire.name"</span> pInputText placeholder=<span class="hljs-string">"Name"</span>>
                </div>

                <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"field col-7 lg:col-7 md:col-12"</span>>
                    <label <span class="hljs-keyword">for</span>=<span class="hljs-string">"txttitle"</span>>Title</label>
                    <input <span class="hljs-keyword">class</span>=<span class="hljs-string">"inputfield w-full"</span> id=<span class="hljs-string">"txttitle"</span> required type=<span class="hljs-string">"text"</span> [(ngModel)]=<span class="hljs-string">"questionnaire.title"</span> pInputText placeholder=<span class="hljs-string">"Title"</span>>
                </div>

                <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"field col-2 lg:col-2 md:col-12"</span>>
                    <label <span class="hljs-keyword">for</span>=<span class="hljs-string">"txtdate"</span>>Date</label>
                    <p-inputMask id=<span class="hljs-string">"txtdate"</span> mask=<span class="hljs-string">"9999-99-99"</span> [(ngModel)]=<span class="hljs-string">"questionnaire.date"</span> placeholder=<span class="hljs-string">"9999-99-99"</span> slotChar=<span class="hljs-string">"yyyy-mm-dd"</span>></p-inputMask>
                </div>

                <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"field col-2 lg:col-2 md:col-12"</span>>
                    <label <span class="hljs-keyword">for</span>=<span class="hljs-string">"txtstatus"</span>>Status</label>
                    <p-dropdown [options]=<span class="hljs-string">"publicationStatusList"</span> [(ngModel)]=<span class="hljs-string">"questionnaire.status"</span>></p-dropdown>
                </div>

                <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"field col-3 lg:col-3 md:col-12"</span>>
                    <label <span class="hljs-keyword">for</span>=<span class="hljs-string">"txtpublisher"</span>>Publisher</label>
                    <input <span class="hljs-keyword">class</span>=<span class="hljs-string">"inputfield w-full"</span> id=<span class="hljs-string">"txtpublisher"</span> required type=<span class="hljs-string">"text"</span> [(ngModel)]=<span class="hljs-string">"questionnaire.publisher"</span> pInputText placeholder=<span class="hljs-string">"Publisher"</span>>
                </div>

                
                <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"field col-2 lg:col-2 md:col-12"</span>>
                    <label <span class="hljs-keyword">for</span>=<span class="hljs-string">"txtstartperiod"</span>>Start Period</label>
                    <p-inputMask id=<span class="hljs-string">"txtstartperiod"</span> mask=<span class="hljs-string">"9999-99-99"</span> [(ngModel)]=<span class="hljs-string">"questionnaire.effectivePeriod.start"</span> placeholder=<span class="hljs-string">"9999-99-99"</span> slotChar=<span class="hljs-string">"yyyy-mm-dd"</span>></p-inputMask>
                </div>

                <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"field col-2 lg:col-2 md:col-12"</span>>
                    <label <span class="hljs-keyword">for</span>=<span class="hljs-string">"txtendperiod"</span>>End Period</label>
                    <p-inputMask id=<span class="hljs-string">"txtendperiod"</span> mask=<span class="hljs-string">"9999-99-99"</span> [(ngModel)]=<span class="hljs-string">"questionnaire.effectivePeriod.end"</span> placeholder=<span class="hljs-string">"9999-99-99"</span> slotChar=<span class="hljs-string">"yyyy-mm-dd"</span>></p-inputMask>
                </div>

                <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"field col-12 lg:col-12 md:col-12"</span>>
                    <label <span class="hljs-keyword">for</span>=<span class="hljs-string">"txtcontent"</span>>Description</label>
                    <p-editor [(ngModel)]=<span class="hljs-string">"questionnaire.description"</span> [style]=<span class="hljs-string">"{'height':'100px'}"</span>></p-editor>
                </div>

            </div>

            <div <span class="hljs-keyword">class</span>=<span class="hljs-string">"grid justify-content-end"</span>>
                <button pButton pRipple type=<span class="hljs-string">"button"</span> label=<span class="hljs-string">"New Record"</span> (click)=<span class="hljs-string">"reset()"</span>
                        <span class="hljs-keyword">class</span>=<span class="hljs-string">"p-button-rounded p-button-success mr-2 mb-2"</span>></button>
                <button pButton pRipple type=<span class="hljs-string">"button"</span> label=<span class="hljs-string">"Save"</span> (click)=<span class="hljs-string">"save()"</span>
                        <span class="hljs-keyword">class</span>=<span class="hljs-string">"p-button-rounded p-button-info mr-2 mb-2"</span>></button>
                <button pButton pRipple type=<span class="hljs-string">"button"</span> label=<span class="hljs-string">"Delete"</span> (click)=<span class="hljs-string">"delete(questionnaire.id)"</span>
                        <span class="hljs-keyword">class</span>=<span class="hljs-string">"p-button-rounded p-button-danger mr-2 mb-2"</span>></button>
                <button pButton pRipple type=<span class="hljs-string">"button"</span> label=<span class="hljs-string">"Questions"</span> (click)=<span class="hljs-string">"loadQuestions()"</span>
                        <span class="hljs-keyword">class</span>=<span class="hljs-string">"p-button-rounded p-button-info mr-2 mb-2"</span>></button>
            </div>
        </p-tabPanel>
    </p-tabView>
</p-card> 

<p-confirmDialog #cd header=<span class="hljs-string">"Atenção"</span> icon=<span class="hljs-string">"pi pi-exclamation-triangle"</span>>
    <p-footer>
        <button type=<span class="hljs-string">"button"</span> pButton icon=<span class="hljs-string">"pi pi-times"</span> label=<span class="hljs-string">"Não"</span> (click)=<span class="hljs-string">"cd.reject()"</span>></button>
        <button type=<span class="hljs-string">"button"</span> pButton icon=<span class="hljs-string">"pi pi-check"</span> label=<span class="hljs-string">"Sim"</span> (click)=<span class="hljs-string">"cd.accept()"</span>></button>
    </p-footer>
</p-confirmDialog>
### Angular Service class
import { Injectable } from '@angular/core'<span class="hljs-comment">;</span>
import { HttpClient, HttpHeaders } from '@angular/common/http'<span class="hljs-comment">;</span>
import { Observable } from 'rxjs'<span class="hljs-comment">;</span>
import { environment } from 'src/environments/environment'<span class="hljs-comment">;</span>
import { take } from 'rxjs/operators'<span class="hljs-comment">;</span>
import { Questionnaire } from 'fhir/r4'<span class="hljs-comment">;</span>

@Injectable({
  providedIn: 'root'
})
export <span class="hljs-keyword">class</span> QuestionnaireService {

  private url = environment.host2 + 'questionnaire'<span class="hljs-comment">;</span>

  constructor(private http: HttpClient) { }

  public save(Questionnaire: Questionnaire): Observable<Questionnaire> {
    <span class="hljs-keyword">return</span> this.http.post<Questionnaire>(this.url, Questionnaire).pipe(take(<span class="hljs-number">1</span>))<span class="hljs-comment">;</span>
  }

  public update(Questionnaire: Questionnaire): Observable<Questionnaire> {
    <span class="hljs-keyword">return</span> this.http.put<Questionnaire>(`${this.url}/${Questionnaire.id}`, Questionnaire).pipe(take(<span class="hljs-number">1</span>))<span class="hljs-comment">;</span>
  }

  public load(id: string): Observable<Questionnaire> {
    <span class="hljs-keyword">return</span> this.http.get<Questionnaire>(`${this.url}/${id}`).pipe(take(<span class="hljs-number">1</span>))<span class="hljs-comment">;</span>
  }

  public delete(id: string): Observable<any> {
    <span class="hljs-keyword">return</span> this.http.delete(`${this.url}/${id}`).pipe(take(<span class="hljs-number">1</span>))<span class="hljs-comment">;</span>
  }

  public list(): Observable<Questionnaire[]> {
    <span class="hljs-keyword">return</span> this.http.get<Questionnaire[]>(this.url).pipe(take(<span class="hljs-number">1</span>))<span class="hljs-comment">;</span>
  }

}
## Step 4 - Application in action 1. Go to https://openexchange.intersystems.com/package/FHIR-Questionnaires application.

2. Clone/git pull the repo into any local directory

$ git clone https://github.com/yurimarx/fhir-questions.git

3. Open the terminal in this directory and run:

$ docker-compose up -d
4. Open the webapp: http://localhost:52773/fhirquestions/index.html See some pictures: ![](/sites/default/files/inline/images/images/image(5086).png) ![](/sites/default/files/inline/images/images/image(5087).png)