Toggle menu

Additional Details Tab Examples

Simple Single Page Form

This first example displays some information from the case and lets a case manager fill out and save some additional details.

The form design looks like this:

Additional Details Form - Simple

"Site" is a text field set as read-only. It's named SITE matching a field on the form used to raise the case. This maps it's value to that of the form_SITE process variable, so it will display what was entered into the original form.

All of the form_ variables in your case, including those set by tasks, are available to use via field mapping.

The remaining fields are simple input fields with some show-hide logic for the visit date. The form ends with the standard "Additional Information" snippet, which provides the buttons and workflow action field.

The form uses a simple custom read-only template, which generates the content displayed when the tab is first viewed:

<div class="icmformdata">
    <table class="icmformdatapagetable">
        <tbody>
            <tr>
                <td colspan="2" class="icmformdatacontainer">Site Details</td>
            </tr>
            <tr>
                <td class="icmformdatalabel">Site</td>
                <td class="icmformdatavalue">{{FIELD "SITE"}}</td>
            </tr>
            <tr>
                <td class="icmformdatalabel">Site Manager</td>
                <td class="icmformdatavalue">{{FIELD "SITEMANAGER"}}</td>
            </tr>
            <tr>
                <td class="icmformdatalabel">Site Postcode</td>
                <td class="icmformdatavalue">{{FIELD "FIELD3"}}</td>
            </tr>
            <tr>
                <td class="icmformdatalabel">Visit Required?</td>
                <td class="icmformdatavalue">{{FIELD "VISITREQUIRED"}}</td>
            </tr>
        </tbody>
    </table>
    <table class="icmformdatapagetable">
        <tbody>
            <tr>
                <td class="icmformdatalabel">Visit date</td>
                <td class="icmformdatavalue">{{FIELD "VISITDATE"}}</td>
            </tr>
        </tbody>
    </table>
</div>

Last modified on April 16, 2024

Share this page

Facebook icon Twitter icon email icon

Print

print icon