Record Detail

Overview

Use the record detail pattern to display label/value pairs for a single record or data object.

Display the field label to the left of the field value, unless the field label or value are unusually long, in which case you can display the field label above the field value.

You can optionally display a record detail subheader above a block of fields to help identify them. This subheader spans the two columns containing the field labels and values.

Development

Web component development

Component reference

rui-record-detail

rui-record-detail-block

rui-record-detail-field

rui-record-detail-subheader

rui-record-detail-spacer

Implementation

Begin by importing the rui-record-detail module into your application.

// import into app.module
import '@jha/rui-wc/components/rui-record-detail/rui-record-detail-imports';

Record details consists of a wrapper, blocks, subheaders, fields, and spacers.

Each record detail is bound by its container. If there are multiple record detail blocks, and the horizontal space exists, the blocks will flow left to right to take up the available space.

Record detail blocks

Groups of record detail fields are contained in blocks. Blocks will flow left to right and take up any available horizontal space. Record detail block contain subheaders, fields and spacers.

• Start with a rui-record-detail component as the outer wrapper.
• Create a rui-record-detail-block for each group of record detail fields you wish to display.

<rui-record-detail>

    <rui-record-detail-block></rui-record-detail-block>

    <rui-record-detail-block></rui-record-detail-block>

    <rui-record-detail-block></rui-record-detail-block>

</rui-record-detail>

Wide and narrow record detail columns

By default, rui-record-detail displays each record detail column at a moderate fixed width.

• If you need wider columns — say your field labels or field values are extra long — you can set the width property to wide.
• If you need narrower columns, you can set the width property to narrow.
• If your blocks are stacked in a narrow container and having them expand the full width of the container works best, set the width property to full.

<rui-record-detail width="wide"></rui-record-detail>

Record detail fields

Each record detail field contains both a label and a value.

• Specify the field label using the labelText property. The CSS automatically suffixes the field label with a colon. Do not add a colon or other delimiter (including a question mark) to the end of the field label.
• Display the field value as content between the rui-record-detail-field opening/closing tags. If necessary, use Angular pipes for formatting data appropriately. The value is right-justified.
• You can optionally bind the isValueAtypical to true if the value is atypical and needs attention.
• You can also optionally bind the isHighlighted to true to call attention to both the label and value in this field.

<rui-record-detail-field labelText="Name">{{customerName}}</rui-record-detail-field>

If the field’s label or value are unusually long and/or the value shouldn’t wrap, you can set orientation to vertical to force the value to display on its own line; this also left-justifies the field value.

<rui-record-detail-field labelText="Email" orientation="vertical">{{customerEmail}}</rui-record-detail-field>

Record detail subheaders

A record detail subheader can optionally appear at the top of a block of fields, helping the user understand the high-level sections in the record detail.

Each subheader should be contained within a rui-record-detail-block. Specify the subheader text using the text property.

<rui-record-detail-subheader text="Customer Information"></rui-record-detail-subheader>

Record detail spacers

To separate different blocks of fields within the same record detail column, add a rui-record-detail-spacer.

<rui-record-detail-spacer></rui-record-detail-spacer>

Angular component development

Component reference

jha-record-detail

jha-record-detail-block

jha-record-detail-field

jha-record-detail-subheader

jha-record-detail-spacer

Implementation

Begin by importing the JhaRecordDetailModule module into your application.

// import into app.module
import { JhaRecordDetailModule } from '@jha/jharesponsive/jha-record-detail';

@NgModule({
    imports: [
        ...
        JhaRecordDetailModule,
        ...
    ]
})

export class AppModule(){}

Record details consists of a wrapper, blocks, subheaders, fields, and spacers.

Each record detail is bound by its container. If there are multiple record detail blocks, and the horizontal space exists, the blocks will flow left to right to take up the available space.

Record detail blocks

Groups of record detail fields are contained in blocks. Blocks will flow left to right and take up any available horizontal space. Record detail block contain subheaders, fields and spacers.

• Start with a jha-record-detail component as the outer wrapper.
• Create a jha-record-detail-block for each group of record detail fields you wish to display.

<jha-record-detail>

    <jha-record-detail-block></jha-record-detail-block>

    <jha-record-detail-block></jha-record-detail-block>

    <jha-record-detail-block></jha-record-detail-block>

</jha-record-detail>

Wide and narrow record detail columns

By default, jha-record-detail-block displays each record detail column at a moderate fixed width.

• If you need wider columns — say your field labels or field values are extra long — you can set the jhaWidth property to Wide.
• If you need narrower columns, you can set the jhaWidth property to Narrow.
• If your blocks are stacked in a narrow container and having them expand the full width of the container works best, set the jhaWidth property to Full.

<jha-record-detail-block jhaWidth="Wide"></jha-record-detail-block>

Record detail fields

Each record detail field contains both a label and a value.

• Specify the field label using the jhaLabel property. The CSS automatically suffixes the field label with a colon. Do not add a colon or other delimiter (including a question mark) to the end of the field label.
• Display the field value as content between the jha-record-detail-field opening/closing tags. If necessary, use Angular pipes for formatting data appropriately. The value is right-justified.
• You can optionally bind the jhaIsValueAtypical to true if the value is atypical and needs attention.
• You can also optionally bind the jhaIsHighlighted to true to call attention to both the label and value in this field.

<jha-record-detail-field jhaLabel="Name">Nancy Davolio</jha-record-detail-field>

If the field’s label or value are unusually long and/or the value shouldn’t wrap, you can set jhaOrientation to Vertical to force the value to display on its own line; this also left-justifies the field value.

<jha-record-detail-field jhaLabel="Email" jhaOrientation="Vertical">ndavolio@gmail.com</jha-record-detail-field>

Record detail subheaders

A record detail subheader can optionally appear at the top of a block of fields, helping the user understand the high-level sections in the record detail.

Each subheader should be contained within a jha-record-detail-block. Specify the subheader text using the jhaText property.

<jha-record-detail-subheader jhaText="Customer Information"></jha-record-detail-subheader>

Record detail spacers

To separate different blocks of fields within the same record detail column, add a jha-record-detail-spacer.

<jha-record-detail-spacer></jha-record-detail-spacer>

Component playground

Design

Figma design

Every record detail field label must include a colon suffix.

Each record detail column should be 350 pixels wide. Separate record detail columns by 66 pixels horizontally.

Adobe XD design

Every record detail field label must include a colon suffix.

Each record detail column should be 350 pixels wide. Separate record detail columns by 66 pixels horizontally.