Patterns

Development patterns are described here.

Client

Dynamic tabs

Dynamic tabs are when a user can add an item, which results in additional tabs. Dynamic tabs can be added and removed by the user. The tabs should repeat for every item, and an extra tab should be present containing a button to add additional items. Each tab should have a heading that includes a remove icon, to remove the tab.

HTML

<ngb-tabset *ngIf="capabilityStatement.hasOwnProperty('rest')" justify="center" #restTabSet>
    <!-- each tab has an id of "rest-INDEX" -->
    <ngb-tab *ngFor="let r of capabilityStatement.rest; let ri = index" id="rest-{{ri}}">
        <ng-template ngbTabTitle>
            <span>REST {{ri + 1}} </span>
            <!-- use globals.promptForRemove() so that event.preventDefault() is called and the UI does not redirect the user to the home screen -->
            <i class="fa fa-remove" title="Remove this REST entry" (click)="globals.promptForRemove(capabilityStatement.rest, ri, 'Are you sure you want to remove this item?', $event)"></i>
        </ng-template>
        <ng-template ngbTabContent>
            ....
        </ng-template>
    </ngb-tab>
    <!-- This is the extra tab - disabled - to add new items to the array -->
    <ngb-tab [disabled]="true">
        <ng-template ngbTabTitle>
            <button type="button" class="btn btn-default" title="Add a REST entry" (click)="addRestEntry(restTabSet)">Add</button>
        </ng-template>
        <ng-template ngbTabContent></ng-template>
    </ngb-tab>
</ngb-tabset>

TypeScript

public addRestEntry(restTabSet) {
    this.capabilityStatement.rest.push({ mode: 'client' });
    // The UI takes a moment to reflect the addition of an item in the array,
    // so we must call restTabSet.select() in a timeout so that the UI can catch up.
    setTimeout(() => {
        const lastIndex = this.capabilityStatement.rest.length - 1;
        const newRestTabId = 'rest-' + lastIndex.toString();
        restTabSet.select(newRestTabId);
    }, 50);    // 50ms timeout... should occur pretty quickly
}

RAW tab

The "RAW" tab should be included on every resource that can be edited, to show the RAW JSON/XML for the resource.

<!-- RAW -->
<ngb-tab title="RAW">
    <ng-template ngbTabContent>
        <ngb-tabset [justify]="'fill'">
            <ngb-tab title="Pretty JSON">
                <ng-template ngbTabContent>
                    <t-json-viewer [json]="capabilityStatement"></t-json-viewer>
                </ng-template>
            </ngb-tab>
            <ngb-tab title="Plain JSON">
                <ng-template ngbTabContent>
                    <pre>{{capabilityStatement | json}}</pre>
                </ng-template>
            </ngb-tab>
            <ngb-tab title="Plain XML">
                <ng-template ngbTabContent>
                    <pre>{{fhirService.serialize(capabilityStatement) | xml}}</pre>
                </ng-template>
            </ngb-tab>
        </ngb-tabset>
    </ng-template>
</ngb-tab>

Tooltips

Simple tooltips can be displayed by putting an entry in the Globals class's tooltips dictionary, and then using app-tooltip-icon with a @tooltipKey attribute to reference the item in the tooltip dictionary.

<app-tooltip-icon
    tooltipKey="some.key.in.the.dictionary">
</app-tooltip-icon>

You can also have it lookup the "short" (property) description in the base FHIR profile's elements like so:

<app-tooltip-icon
   tooltipPath="CapabilityStatement.rest.mode"
</app-tooltip-icon>

This will show the "short" value (the value displayed in the table on the FHIR page for capability statements's .rest.mode.

The tooltipPath must be a full FHIR Path, starting with the resource type.

Many fhir-edit directives also support tooltips, such as string:

<app-fhir-string
    [parentObject]="theCapabilityStatement.rest[0]"
    propertyName="mode"
    tooltipPath="CapabilityStatement.rest.mode"
</app-fhir-string>

This creates a FHIR-based string for the rest entry at index 0's mode property, and displays the tooltip for that element according the base spec.