Configure Journey Space Page Markup

   Journey Manager (JM) The transaction engine for the platform. |   System Manager / DevOps |  All versions This feature is related to all versions.

Manager allows you to configure specific properties of your Journey Space pages and customize their markup.

To customize the pages' markup:

1. Remove the Last dropdown list by finding and deleting these lines:

<span class="searchSelect smallDivider">
 Last
 <br/>
 $form.fields.startDate
 </span>

2. Add the Form dropdown list and the Start Date and End Date pickers as shown below:

## A new field for form select has been added  <span class="searchSelect smallDivider"> Form <br/> $form.fields.formSelect </span> 
## A new field for start date has been added <span class="searchSelect smallDivider"> Start Date <br/> $form.fields.startDateField </span> 
## A new field for end date has been added <span class="searchSelect smallDivider"> End Date <br/> $form.fields.endDateField </span>

3. Add the Groups dropdown list to include the authenticated user forms as shown below:

#if ($form.fields.groupSelect)
 <span class="searchSelect smallDivider">
 Groups <br/>
 $form.fields.groupSelect
 </span>
 #end

The complete example of the help desk page markup is shown below.

<style type="text/css">
.searchSelect {
    display: inline-block;
    margin-right:10px;
}
#form_startDate {
    width: 110px;
}
#form_formStatus {
    width: 110px;
}
#form_startDateField {
    width: 120px;
}
#form_endDateField {
    width: 120px;
}
#form_groupSelect {
    width: 330px;
} 
#form_formSelect {
    width: 240px;
}
.calendar td {
    min-width: 0px;
}
</style>
 
## If using the startDateField or endDateField, ensure the two lines below are not commented out
<script src="$context/click/jscalendar/calendar.js" type="text/javascript"></script>
<script src="$context/click/jscalendar/calendar-en.js" charset="UTF-8" type="text/javascript"></script>
<script src="$context/resources/js/searchTable.js" type="text/javascript"></script>
<!-- find-form.htm-->
<div class="row" id="findform">
    <!-- Header -->
    <div class="span12 topSpace divider">
        <h1>Help Desk</h1>
        <p>Search for forms saved or completed by your customers.</p>
    </div>
    <!-- Search panel -->
    <div class="row">
        $form.startTag()
        <div class="row span6">
            <span class="searchField smallDivider">
                <br>
                $form.fields.search
            </span>
            <span class="searchButton smallDivider">
                $form.fields.go
            </span>
            <span class="searchSelect smallDivider">
                Status
                <br/>
                $form.fields.formStatus
            </span>     
 
## A new field for form select has been added
            <span class="searchSelect smallDivider">
                Form
                <br/>
                $form.fields.formSelect
            </span>
 
## A new field for start date has been added
            <span class="searchSelect smallDivider">
                Start Date
                <br/>
                $form.fields.startDateField
            </span>
 
## A new field for end date has been added
            <span class="searchSelect smallDivider">
                End Date
                <br/>
                $form.fields.endDateField
            </span>
 
## New fields for group select and group filter have been added
            #if ($form.fields.groupSelect)
            <span class="searchSelect smallDivider">
                Groups <br/>
                $form.fields.groupSelect
            </span>
            #end
            #if ($form.fields.groupFilter)
            <span class="searchSelect smallDivider">
                Group Items <br/>
                $form.fields.groupFilter
            </span>
            #end 
                         
        </div>
        $form.endTag()
    </div>
</div>
<div class="row"><hr></div>
 
## See template in: /resources/includes/account/tile.htm
<div id="tableHolder" class="row">
    $tileList
</div>

Next, learn how to configure Journey Space page properties.