Form Output
Definition
Repeating sections consisting of a styled header followed by a description list. The term can have an info icon tooltip for a description of what the term means.
A description list is one consisting of a term and definition—think of where you might use a colon to separate information. Examples might include:
- Title: Harry Potter and the Sorcerer's Stone
- Author: JK Rowling
- Published date: 26 June 1997
Description
The Form Output is utilized by the React Form Library to publish the stored json from a completed Form. Examples of this are study details—input from TurboCurator and output in a Study Home Page, or input from a ReDMAS application and output for a reviewer.
The Form Output is programmatically created by the Form Library. A UX Engineer will not typically be creating this component by hand.
Example
Description
- Contributions
- Charles Leonard; John Jackson; Paul Simon Public Policy Institute
Versions
- Issued Date
- 2014-08-26
Form output example code
<section class="form-output stack container">
<section class="stack">
<h2 class="header-bg" id="description">Description</h2>
<dl class="row">
<dt class="col-sm-3">
<span>Subject Terms</span
>
<div>
<button
class="btn btn-stretch"
data-bs-toggle="modal"
data-bs-target="#subject-terms"
type="button"
>
<FontAwesomeIcon icon={faCircleInfo} />
</button>
</div>
</dt>
<div
class="modal fade"
id="subject-terms"
data-bs-backdrop="static"
data-bs-keyboard="false"
aria-labelledby="subject-terms-label"
aria-hidden="true"
tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="subject-terms-label">
Subject Terms
</h2>
<button
class="btn-close"
data-bs-dismiss="modal"
type="button"
aria-label="Close"
></button>
</div>
<div class="modal-body">A controlled list of Subject Terms are used to indicate what a data collection is about and to summarize its content. The subject terms serve to increase the collection’s discoverability by topic. Includes the term and the vocabulary source.</div>
<div class="modal-footer">
<button
class="btn btn-outline-primary"
data-bs-dismiss="modal"
type="button"
>
Cancel
</button>
</div>
</div>
</div>
</div>
<dd class="col-sm-9">
<span
><span
><a
href="https://www.icpsr.umich.edu/web/ICPSR/search/studies?KEYWORD_FACET=Illinois~~term limits~~campaign finance~~economy~~public opinion~~Illinois polling~~political polling~~Illinois political reform~~Simon Poll~~legislative redistricting~~Illinois courts~~quality of life~~judiciary~~taxes~~government services~~cuts~~Illinois budget~~"
>Illinois~~term limits~~campaign finance~~economy~~public
opinion~~Illinois polling~~political polling~~Illinois political
reform~~Simon Poll~~legislative redistricting~~Illinois
courts~~quality of life~~judiciary~~taxes~~government
services~~cuts~~Illinois budget~~</a
></span
></span
>
</dd>
</dl>
<dl class="row">
<dt class="col-sm-3">
<span>Contributions</span>
<div>
<button
class="btn btn-stretch"
data-bs-toggle="modal"
data-bs-target="#contributions"
type="button"
>
<FontAwesomeIcon icon={faCircleInfo} />
</button>
</div>
</dt>
<div
class="modal fade"
id="contributions"
data-bs-backdrop="static"
data-bs-keyboard="false"
aria-labelledby="contributionsLabel"
aria-hidden="true"
tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="contributionsLabel">
Contributions
</h2>
<button
class="btn-close"
data-bs-dismiss="modal"
type="button"
aria-label="Close"
></button>
</div>
<div class="modal-body">Agent (e.g., person or organization) contributions to the product</div>
<div class="modal-footer">
<button
class="btn btn-outline-primary"
data-bs-dismiss="modal"
type="button"
>
Cancel
</button>
</div>
</div>
</div>
</div>
<dd class="col-sm-9">
<span data-testid="semicolon"
><span>Charles Leonard</span><span>; </span></span
><span data-testid="semicolon"
><span>John Jackson</span><span>; </span></span
><span data-testid="semicolon"
><span>Paul Simon Public Policy Institute</span></span
>
</dd>
</dl>
</section>
<section class="stack">
<h2 class="header-bg" id="versions">Versions</h2>
<dl class="row">
<dt class="col-sm-3">
<span>Issued Date</span>
<div>
<button
class="btn btn-stretch"
data-bs-toggle="modal"
data-bs-target="#issued-date"
type="button"
>
<FontAwesomeIcon icon={faCircleInfo} />
</button>
</div>
</dt>
<div
class="modal fade"
id="issued-date"
data-bs-backdrop="static"
data-bs-keyboard="false"
aria-labelledby="issued-date-label"
aria-hidden="true"
tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="issued-date-label">
Issued Date
</h2>
<button
class="btn-close"
data-bs-dismiss="modal"
type="button"
aria-label="Close"
></button>
</div>
<div class="modal-body">Alternate name(s) by which a data collection may be commonly referred to, or as provided by the PI.</div>
<div class="modal-footer">
<button
class="btn btn-outline-primary"
data-bs-dismiss="modal"
type="button"
>
Cancel
</button>
</div>
</div>
</div>
</div>
<dd class="col-sm-9">
<span data-testid="text-display">2014-08-26</span>
</dd>
</dl>
</section>
</section>Variables
This pattern does not change any variables.
Guidelines
The Form Output is created programmatically from json.