🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Form Flow Step 3 - Solution

HTML Markup

<section class="facility-form">
    <section>
        <details class="hoo-accordion"  name="issue-tracking">
            <summary class="hoo-accordion-header">
                <div class="hoo-accordion-summary"><span class="hoo-icon">
                    <svg class="hoo-icon-svg icon-arrow-right" aria-hidden="true">
                        <title>Fluent UI / Fluent Design by hTWOo UI Framework</title>
                        <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-right">
                        </use>
                    </svg></span>
                <h3>Reported issue</h3>
            </div>
        </summary>
        <div>
            <fieldset id="new-item-form" class="hoo-fieldset no-outline">
                <div class="hoo-field" role="group">
                    <label class="hoo-label " for="toggle-97">Issue Type</label>Electrical</div>
                <div class="hoo-field stretched" role="group">
                    <label class="hoo-label " for="toggle-97">Location</label>A104 - Breakout Space - Casual</div>
                <div class="hoo-field" role="group">
                    <label class="hoo-label " for="toggle-97">Equipment/Asset ID</label>ACME-2049-0819</div>
                <div class="hoo-field" role="group">
                    <label class="hoo-label " for="toggle-97">Priority Level</label>Low</div>
                <div class="hoo-field" role="group">
                    <label class="hoo-label " for="toggle-97">Issue Description</label>Late last night, the coffee machine decided to take a vacation. It now only dispenses lukewarm water and
                        stares blankly at anyone who dares approach.<br><br>The ‘Brew’ button is still intact, but no amount of button-mashing seems to convince it to do its job.
                        Please send help before we resort to using the office kettle and turning into tea drinkers.</div>
                <div class="hoo-field" role="group">
                    <label class="hoo-label " for="toggle-97">Reported By</label>Dwight Schrute</div>
                <div class="hoo-field" role="group">
                    <label class="hoo-label " for="toggle-97">Date/Time Reported</label><time id="current-time" datetime=""></time>
            </div>
        </fieldset>
    </div>
</details>
<details class="hoo-accordion" open name="issue-tracking">
    <summary class="hoo-accordion-header">
        <div class="hoo-accordion-summary"><span class="hoo-icon">
            <svg class="hoo-icon-svg icon-arrow-right" aria-hidden="true">
                <title>Fluent UI / Fluent Design by hTWOo UI Framework</title>
                <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-right">
                </use>
            </svg></span>
        <h3>Review Result</h3>
    </div>
</summary>
<div>
    <fieldset id="issue-verification" class="hoo-fieldset no-outline">
        <div class="hoo-field" role="group">
            <label class="hoo-label " for="toggle-97">Assign To</label>Jim Halpert</div>
        <div class="hoo-field" role="group">
            <label class="hoo-label " for="toggle-97">Verification Date</label><time id="next-time" datetime=""></time>
    </div>
    <div class="hoo-field" role="group">
        <label class="hoo-label " for="toggle-97">Comments</label>Upon investigation, the issue is likely related to a failure in the heating element or a malfunction in the
                        machine’s brewing cycle, both common problems for this type of coffee machine. To resolve the issue, a
                        technician will need to inspect the internal components, particularly the heating element, water pump, and
                        circuit board responsible for activating the brewing process.<br><br>In cases where this fault has occurred
                        previously, a reset procedure or replacement of the faulty components has successfully restored normal
                        operation. If the issue is more severe, a full machine replacement may be necessary. Regular maintenance and
                        occasional cleaning of the internal mechanisms are recommended to prevent similar occurrences in the future.</div>
    <div class="hoo-field" role="group">
        <label class="hoo-label " for="toggle-97">Estimated Time to Resolve</label>5 hours</div>
</fieldset>
</div>
</details>
</section>
<section class="review">
    <h2>Issue Resolution</h2>
    <fieldset id="resolution" class="hoo-fieldset no-outline">
        <div class="hoo-field" role="group">
            <label class="hoo-label " for="toggle-97">Resolution Description</label>
            <p class="hoo-input-description" >Please provide a detailed explanation of the resolution to the issue. Include any relevant actions taken to address the problem. Remember to include any necessary documentation or updates to the asset's inventory. Also, be sure to include any follow-up steps or recommendations for future maintenance.</p>
            <textarea class="hoo-input-text" id="toggle-97"   maxlength='500' minlength='500' style='max-width: 65ch; width: 100%; height: 5lh;'>
            </textarea>
        </div>
        <div class="hoo-field" role="group">
            <label class="hoo-label " for="toggle-97">Parts/Materials used:</label>
            <p class="hoo-input-description" >Please list any parts or materials used to resolve the issue. Include the quantity, part number, and any other relevant information. If no parts or materials were used, please indicate 'None'.</p>
            <textarea class="hoo-input-text" id="toggle-97"   maxlength='500' minlength='500' style='max-width: 65ch; width: 100%; height: 5lh;'>
            </textarea>
        </div>
        <div class="hoo-field" role="group">
            <label class="hoo-label " for="toggle-97">Actual time to resolve</label>
            <div class="hoo-input-group">
                <input class="hoo-input-text" type="number"  id="toggle-97" 
                        placeholder="" data-suffix="hours"  aria-labelledby="suffix-label-toggle-97" size='10'>
                <div id="suffix-label-toggle-97" class="hoo-input-suffix">hours</div>
            </div>
            <p class="hoo-input-description" id="actual-time-to-resolve-input-97">The actual time spent on this issue</p>
        </div>
        <div class="hoo-field" role="group">
            <label class="hoo-label " for="toggle-97">Follow up Required?</label>
            <div class="hoo-toggle">
                <input type="checkbox" class="hoo-toggle-cb" name="toggleName" id="toggle-22" >
                <label for="toggle-22" class="hoo-toggle-label"><span class="hoo-toggle-slider"></span><span class="hoo-toggle-checked">Yes</span><span class="hoo-toggle-unchecked">No</span>
    </label>
</div>
</div>
<div class="actions">
    <button class="hoo-button"><span class="hoo-button-label">Unable to resolve</span>
</button>
<button class="hoo-button-primary"><span class="hoo-button-label">Completed</span>
</button>
</div>
</fieldset>
</section>
</section>
<script>// Get the current date and time
    const now = new Date();

    // Format the date and time based on the user's locale
    const formattedDateTime = now.toLocaleString();  // Automatically uses the system's locale

    // Insert the current date and time into the first<time>field
    document.getElementById('current-time').setAttribute('datetime', now.toISOString());
    document.getElementById('current-time').textContent = formattedDateTime;

    // Calculate the next time (one hour later)
    const nextTime = new Date(now.getTime() + 60 * 60 * 1000);  // Adds one hour (60 minutes * 60 seconds * 1000 ms)

    // Format the next time based on the user's locale
    const formattedNextTime = nextTime.toLocaleString();

    // Insert the next time into the second<time>field
    document.getElementById('next-time').setAttribute('datetime', nextTime.toISOString());
    document.getElementById('next-time').textContent = formattedNextTime;</script>

Form Flow: Step 3 - Solution

This component demonstrates the third step of a multi-step form flow, where users define solutions or resolutions to the issue identified in previous steps.

Overview

The third step builds on the information collected in the previous steps, focusing on action planning and resolution. It guides users toward completing the process by defining specific outcomes or solutions.

Features

Solution definition and planning fields
Integration with previously entered information
Back/forward navigation controls
Progress indication showing near-completion
Structured input for resolution details
Option to assign responsibilities or next actions

Usage

This pattern is beneficial when:

Process requires defining specific outcomes or solutions
Different stakeholders need to be assigned actions
Documentation of resolution plans is required
Form follows a problem-analysis-solution structure

The step 3 form includes navigation controls:

Back button to return to step 2 and edit previous entries
Next button to proceed to the final confirmation step

HTML Markup

Form Flow: Step 3 - Solution

Overview

Features

Usage

Navigation