Record Detail

Components > Displaying Data > Record Detail

Use this component to...

Partition view content into top-level containers

See this component in action...

Test out this component in a hosted version of the sample app

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.

Record detail example

Nancy Davolio

111-22-3333

04/01/1976

Yes

8.750%

Vandelay Industries

$65,000.00

Silver

123 Main St

Springfield

65807-1234

123 Main St

Springfield

65807-1234

417-888-9631

417-230-4581

417-626-8827

ndavolio@gmail.com

$829.40

$2,459.23

$10,000.00

$0.00

Development

Web component development

Component reference

rui-record-detail

Module: rui-record-detail - Package: @jkhy/responsive-ui-wc

Outermost container for a group of record detail blocks and fields

Name	Type	Default	Description
width	string	'medium'	One of “narrow”, “medium”, “wide”, and “full”. Specifies the width of the record detail columns: “narrow” = 250 pixels “medium” = 350 pixels “wide” = 450 pixels “full” = 100%

Name

Type

Default

Description

width

string

'medium'

One of “narrow”, “medium”, “wide”, and “full”.

Specifies the width of the record detail columns:

“narrow” = 250 pixels
“medium” = 350 pixels
“wide” = 450 pixels
“full” = 100%

rui-record-detail-block

Module: rui-record-detail - Package: @jkhy/responsive-ui-wc

Container for a group of related record detail fields that display together in a block

No properties or events

rui-record-detail-field

Module: rui-record-detail - Package: @jkhy/responsive-ui-wc

Displays a label and value for a record detail field

Name	Type	Default	Description
labelText	string	''	Content displayed as the field label.
orientation	string	'horizontal'	One of “horizontal” or “vertical”. Determines whether field is displayed horizontally with the label and value on the same row or vertically where the label and value are stacked.
isHighlighted	boolean	false	Setting to true highlights the label and value with a distinct background color.
isValueAtypical	boolean	false	Setting to true highlights the value with a distinct foreground color. This is used to bring attention to the value if it falls outside of a range that is typically expected.

rui-record-detail-subheader

Module: rui-record-detail - Package: @jkhy/responsive-ui-wc

Displays a subheader above a group of record detail fields

Name	Type	Default	Description
text	string	''	Text displayed in the subheader

rui-record-detail-spacer

Module: rui-record-detail - Package: @jkhy/responsive-ui-wc

Displays a space between a group of record detail fields

No properties or events

Implementation

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

Import the module

// import into app.module
import '@jkhy/responsive-ui-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.

Record detail blocks

<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.

Record detail with wide columns

<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. 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.

Record detail field - horizontal layout

<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.

Record detail field - vertical layout

<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.

Record detail subheader

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

The rui-record-detail-subheader also contains a slot to allow the addition of an rui-info-tooltip if additional information is required.

Record detail subheader

<rui-record-detail-subheader text="Customer Information">
    <rui-info-tooltip location="left">
        This is an info tooltip.
    </rui-info-tooltip>
</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.

Record detail spacer

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

Angular wrapper development

Wrapper reference

jha-record-detail

Module: JhaRecordDetailModule - Package: @jkhy/responsive-ui-angular

Outermost container for a group of record detail blocks and fields

No properties or events

jha-record-detail-block

Module: JhaRecordDetailModule - Package: @jkhy/responsive-ui-angular

Container for a group of related record detail fields that display together in a block

Name	Type	Default	Description
jhaWidth	string	'Medium'	One of “Narrow”, “Medium”, “Wide”, and “Full”. Specifies the width of the block: “Narrow” = 250 pixels “Medium” = 350 pixels “Wide” = 450 pixels “Full” = 100%

Name

Type

Default

Description

jhaWidth

string

'Medium'

One of “Narrow”, “Medium”, “Wide”, and “Full”.

Specifies the width of the block:

“Narrow” = 250 pixels
“Medium” = 350 pixels
“Wide” = 450 pixels
“Full” = 100%

jha-record-detail-field

Module: JhaRecordDetailModule - Package: @jkhy/responsive-ui-angular

Displays a label and value for a record detail field

Name	Type	Default	Description
jhaLabel	string	''	Content displayed as the field label.
jhaOrientation	string	'Horizontal'	One of “Horizontal” or “Vertical”. Determines whether field is displayed horizontally with the label and value on the same row or vertically where the label and value are stacked.
jhaIsHighlighted	boolean	false	Setting to true highlights the label and value with a distinct background color.
jhaIsValueAtypical	boolean	false	Setting to true highlights the value with a distinct foreground color. This is used to bring attention to the value if it falls outside of a range that is typically expected.

jha-record-detail-subheader

Module: JhaRecordDetailModule - Package: @jkhy/responsive-ui-angular

Displays a subheader above a group of record detail fields

Name	Type	Default	Description
jhaText	string	''	Text displayed in the subheader

jha-record-detail-spacer

Module: JhaRecordDetailModule - Package: @jkhy/responsive-ui-angular

Displays a space between a group of record detail fields

No properties or events

Implementation

Begin by importing the JhaRecordDetailModule module into your application.

Import the module

// import into app.module
import { JhaRecordDetailModule } from '@jkhy/responsive-ui-angular/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.

Record detail blocks

<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.

Record detail with wide columns

<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.

Record detail field - horizontal layout

<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.

Record detail field - vertical layout

<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.

Record detail subheader

<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.

Record detail spacer

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

Component playground

Design

Figma design

Figma design info

You can find this component in the Components - Record Detail page in the Figma UI Kit.

Dev Component	Design Component Name
Record detail field label	Add text and apply the “rui-regular” text style and “rui-pacific/text-regular” color style. Suffix the field label text with a colon.
Record detail field value	Add text and apply the “rui-semibold” text style and “rui-pacific/text-bright” color style. Right-justify the text and position it to the right of the field label, unless this a “long” field value, in which case you should left-justify the text and place it below the field label. Long field values are the exception, not the rule.
Record detail 'atypical' field value	Add text and apply the “rui-semibold” text style and “rui-pacific/text-error” color style. Right-justify the text and position it to the right of the field label, unless this a “long” field value, in which case you should left-justify the text and place it below the field label. Long field values are the exception, not the rule.
Record detail subheader	RUI / Record Detail / Subheader
Record detail field highlight	RUI / Record Detail / Field Highlight Place this below the field label and field value in the Layers panel, then stretch it to fully fit below both.

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

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Record Detail

Dev Component	Design Component Name
Record detail field label	Add text and apply the “JHA / Text / Regular” character style. Suffix the field label text with a colon.
Record detail field value	Add text and apply the “JHA / Text / Bright” character style. Right-justify the text and position it to the right of the field label, unless this a “long” field value, in which case you should left-justify the text and place it below the field label. Long field values are the exception, not the rule.
Record detail 'atypical' field value	Add text and apply the “JHA / Text / Error” character style. Right-justify the text and position it to the right of the field label, unless this a “long” field value, in which case you should left-justify the text and place it below the field label. Long field values are the exception, not the rule.
Record detail subheader	JHA / Record Detail / Subheader
Record detail field highlight	JHA / Record Detail / Field Highlight Place this below the field label and field value in the Layers panel, then stretch it to fully fit below both.

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.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Wed Sep 25 2024