<div class="card -with-sidebar">
<div class="card-content card-section -with-accordion">
<form class="js-auto-save" action="action.php" method="POST">
<div class="form-heading">
<h3>What type of Coversheet would you like to create?</h3>
<h4>Chief Investigator</h4>
</div>
<!-- data table ("excel style") -->
<div class="form-group -full-width">
<div class="form-field">
<label>Spreadsheet</label>
<table class="spreadsheet">
<tr class="table-header table-row">
<th class="table-cell ">
<span class="text">Description</span>
</th>
<th class="table-cell -align-right">
<span class="text">Year 1</span>
<span class="unit">$</span>
</th>
<th class="table-cell -align-right">
<span class="text">Year 2</span>
<span class="unit">$</span>
</th>
<th class="table-cell -align-right">
<span class="text">Year 3</span>
<span class="unit">$</span>
</th>
<th class="table-cell -align-right">
<span class="text">Year 4</span>
<span class="unit">$</span>
</th>
<th class="table-cell -align-right">
<span class="text">Year 5</span>
<span class="unit">$</span>
</th>
<th class="table-cell -align-right">
<span class="text">Total</span>
<span class="unit">$</span>
</th>
</tr>
<tr class="table-row">
<td class="table-cell ">
<input aria-label="Description for row 1" value="Grant ABC">
</td>
<td class="table-cell -align-right">
<input aria-label="Year 1 for row 1" value="99999999.99">
</td>
<td class="table-cell -align-right">
<input aria-label="Year 2 for row 1" value="99999999.99">
</td>
<td class="table-cell -align-right">
<input aria-label="Year 3 for row 1" value="99999999.99">
</td>
<td class="table-cell -align-right">
<input aria-label="Year 4 for row 1" value="99999999.99">
</td>
<td class="table-cell -align-right">
<input aria-label="Year 5 for row 1" value="99999999.99">
</td>
<td class="table-cell -align-right">
<input aria-label="Total for row 1" value="99999999.99">
</td>
</tr>
</table>
</div>
</div>
<!-- basic fields -->
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Text area</label>
<textarea name="chrText" rows="6"></textarea>
</div>
</div>
<!-- use data-col (max 12) on form-group and data-flex on form-field to adjust width of field -->
<div class="form-group" data-col="2">
<div class="form-field" data-flex="1">
<label for="chrFieldName">Short field</label>
<input type="text" name="chrFieldName">
</div>
</div>
<!-- valid field -->
<div class="form-group">
<div class="form-field -valid">
<label for="chrValid">Valid field</label>
<input type="text" name="chrValid">
</div>
</div>
<!-- invalid field -->
<div class="form-group">
<div class="form-field -invalid">
<label for="chrInvalid">
<span class="message">Please follow the rules</span>
<span>Invalid field<span>
</label>
<input type="text" name="chrInvalid">
</div>
</div>
<!-- dropdown -->
<div class="form-group">
<div class="form-field">
<label for="chrFormType">Dropdown</label>
<div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">
<div class="dropdown-label">
<label class="-hidden" for="chrFormType"></label>
<input type="hidden" name="chrFormType" value="Amend an application">
<span class="text">Amend an application</span>
</div>
<ul class="dropdown-options" aria-hidden="true">
<li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
<li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
</ul>
</div>
</div>
</div>
<!-- use data-col (max 12) on form-group and data-flex on form-field to place inputs side-by-side -->
<div class="form-group" data-col="8">
<div class="form-field" data-flex="5">
<label for="chrFormType">Dropdown</label>
<div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">
<div class="dropdown-label">
<label class="-hidden" for="chrFormType"></label>
<input type="hidden" name="chrFormType" value="Amend an application">
<span class="text">Amend an application</span>
</div>
<ul class="dropdown-options" aria-hidden="true">
<li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
<li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
</ul>
</div>
</div>
<div class="form-field" data-flex="3">
<label for="chrFormType">Dropdown</label>
<div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">
<div class="dropdown-label">
<label class="-hidden" for="chrFormType"></label>
<input type="hidden" name="chrFormType" value="Amend an application">
<span class="text">Amend an application</span>
</div>
<ul class="dropdown-options" aria-hidden="true">
<li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
<li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
</ul>
</div>
</div>
</div>
<div class="form-subheading">
<h4>Form subheading</h4>
</div>
<!-- advanced lookup -->
<div class="form-group">
<div class="form-field search-box" data-name="chrProject" data-advanced="people" data-advanced-crit="Surname" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<label for="chrProject">Advanced Lookup</label>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
</div>
<!-- advanced lookup with createMyRecord action -->
<div class="form-group">
<div class="form-field search-box" data-name="chrNewRecord" data-advanced="people" data-advanced-crit="Surname" data-parent="parentIDxyz" data-module="grants" data-return="chrStaffNumber" data-row-class="js-create-record" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<label for="chrProject">Advanced Lookup (CreateMyRecord)</label>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
</div>
<!-- advanced lookup with createMyRecord action -->
<div class="form-group">
<div class="form-field search-box" data-name="chrNewRecord" data-advanced="people" data-advanced-crit="Surname" data-parent="parentIDxyz" data-create="2309849" data-module="grants" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<label for="chrProject">Advanced Lookup (Create New Record)</label>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
</div>
<!-- date picker -->
<div class="form-group">
<div class="form-field date-field">
<label>Start Date</label>
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY" data-initial-value="03/04/1990">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrDate" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
</div>
<!-- two date fields of equal width -->
<div class="form-group" data-col="2">
<div class="form-field date-field" data-flex="1">
<label>Start Date</label>
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrStartDate" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
<div class="form-field date-field" data-flex="1">
<label>End Date</label>
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrEndDate" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
</div>
<!-- checkbox group (select multiple) -->
<div class="form-group">
<div class="form-field">
<label>Checkbox Group</label>
<div class="input-group checkbox-group">
<label for="option1">
<input name="option1" id="option1" type="checkbox" >
<div class="label">
<span class="text">Option 1</span>
</div>
</label>
</div>
<div class="input-group checkbox-group">
<label for="option2">
<input name="option2" id="option2" type="checkbox" >
<div class="label">
<span class="text">Option 2</span>
</div>
</label>
</div>
</div>
</div>
<!-- radio group (select one) -->
<div class="form-group">
<div class="form-field">
<label for="radioGroup">Radio Button Group</label>
<div class="input-group radio-group">
<label for="radio1">
<input id="radio1" name="radioGroup" value="option1" type="radio" >
<div class="label">
<span class="text">First choice</span>
</div>
</label>
<label for="radio2">
<input id="radio2" name="radioGroup" value="option2" type="radio" >
<div class="label">
<span class="text">Second choice</span>
</div>
</label>
</div>
</div>
</div>
<!-- single checkbox with check -->
<div class="form-group">
<div class="form-field">
<label>
<span class="text">Single checkbox</span>
<div class="form-help">
<button type="button" class="btn btn-help -to-right js-tooltip-help">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<div class="help-text">A small amount of info about this.</div>
</button>
<span class="help-text">Visible by default</span>
</div>
</label>
<div class="input-group checkbox-group -with-check">
<label for="singleCheck">
<input name="singleCheck" id="singleCheck" type="checkbox">
<div class="label">
<span class="text">Hide status</span>
</div>
</label>
</div>
</div>
</div>
<!-- WYSIWYG -->
<div class="form-group">
<div class="form-field">
<label for="editor-1">WYSIWYG</label>
<textarea class="js-wysiwyg" name="editor-1" id="editor-1" rows="10">
<p><span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span> </p>
</textarea>
</div>
</div>
<!-- toggle with multiple fields -->
<div class="form-group -full-width">
<label>Toggle field group</label>
<div class="compound-field">
<div class="form-field -fixed-width">
<div class="input-group toggle-group">
<label for="toggle1">
<input id="toggle1" type="checkbox" >
<div class="label"></div>
</label>
</div>
</div>
<label>by</label>
<div class="form-field search-box" data-name="chrCompound1" data-advanced="people" data-advanced-crit="Surname" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
<label>on</label>
<div class="date-field form-field">
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrCompound2" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
</div>
</div>
<!-- accordion -->
<div class="form-subheading">
<h4>Accordions</h4>
<div class="heading-links">
<div class="label">Accordions:</div>
<button type="button" class="btn link js-accordion-expand" data-accordion="group-name">Expand all</button>
<button type="button" class="btn link js-accordion-collapse" data-accordion="group-name">Collapse all</button>
</div>
</div>
<div class="accordion-group" data-accordion="group-name">
<div class="accordion">
<button type="button" class="btn accordion-header js-accordion">
<h4 class="accordion-title">
<span class="text">Accordion</span>
</h4>
</button>
<div class="accordion-content">
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
</div>
</div>
<div class="accordion -collapsed">
<button type="button" class="btn accordion-header js-accordion">
<h4 class="accordion-title">
<span class="text">Accordion Collapsed</span>
</h4>
</button>
<div class="accordion-content">
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
</div>
</div>
</div>
<!-- submit button -->
<div class="submit-group">
<div class="form-field">
<div class="input-group checkbox-group -with-check">
<label for="complete">
<input name="complete" id="complete" type="checkbox">
<div class="label">
<span class="text">Mark this section as complete</span>
</div>
</label>
</div>
</div>
<div class="dropdown-button">
<button type="submit" class="btn btn-default" formaction="/submit-and-redirect">Save and continue</button>
<div role="button" class="btn dropdown js-dropdown" data-role="button" role="menu" aria-haspopup="true" tabindex="0" aria-label="Select an action" tabindex="0">
<div class="icon"></div>
<ul class="dropdown-options" aria-hidden="true">
<li class="btn dropdown-item" data-action="" role="menuitem">
<button type="submit" class="btn link link-strong" formaction="/submit-and-stay">Save</button>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<button type="submit" class="btn link link-strong" formaction="/submit-and-redirect">Save and continue</button>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<button type="submit" class="btn link link-strong" formaction="/submit-and-exit">Save and exit</button>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<a href="/preview" title="Preview" class="link link-strong">Preview</a>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<a href="/restore" title="Restore" class="link link-strong">Restore</a>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<a href="/exit" title="Discard changes" class="link link-strong">Discard changes</a>
</li>
</ul>
</div>
</div>
</div>
<div class="autosave-label">
<span class="timestamp"></span>
</div>
<div class="modal modal-advanced-search js-modal js-modal-exit -nav-padded -with-overlay" data-modal="advanced-search">
<div class="modal-inner inner">
<div class="modal-panel advanced-search-container">
<div class="modal-header">
<button type="button" class="btn btn-default btn-modal-exit js-modal-exit svg-wrap" aria-label="Exit Modal">
<span class="fa fa-times"></span>
</button>
<h3 class="modal-title">
<span class="text">Advanced Lookup</span>
</h3>
</div>
<div class="modal-section advanced-search-form modal-advanced-form">
<div data-col="6">
<div class="form-field advanced-search-field" data-flex="4" data-col="4" data-required="true" data-min-length="2">
<label class="advanced-search-label" data-flex="1" for="SearchValue"></label>
<input data-flex="3" name="SearchValue" class="advanced-search-input"></input>
</div>
<div class="criteria-text form-field advanced-search-field" data-col="6" data-flex="2">
<div data-flex="2"></div>
<label class="advanced-search-label" data-flex="2" for="SearchValue"></label>
<input data-flex="2" name="SearchValue" class="advanced-search-input"></input>
</div>
</div>
<div class="advanced-search-criteria" data-col="6">
<div class="criteria-dropdown form-field advanced-search-field" data-col="6" data-flex="6"></div>
<div class="criteria-checkbox form-field advanced-search-field" data-col="3" data-flex="3"></div>
<div class="btn-container" data-flex="3">
<a class="btn btn-create-record js-parent-create-record">
<span class="fa fa-plus-circle"></span>
<span class="link link-strong">Create a new record</span>
</a>
<button type="button" class="btn btn-default btn-update-advanced js-btn-update-advanced">
<div class="text">Show Records</div>
</button>
</div>
</div>
</div>
<div class="modal-section modal-results advanced-search-results">
</div>
</div>
</div>
</div>
</form>
</div>
<div class="card-section card-sidebar">
<div class="card-heading">
<h4 class="card-subheading">Overview</h4>
<a class="link link-strong link-history" href="/history" title="View History">
<span class="text">History</span>
</a>
</div>
<aside class="progress-meter">
<ul class="progress-list">
<li class="progress-item" data-status="completed">
<div class="progress-title">
<a class="link" href="" title="">Overview</a>
</div>
<div class="progress-info">
<span class="progress-status">Completed</span>
<span class="progress-date">21 June 2017</span>
</div>
</li>
<li class="progress-item" data-status="completed">
<div class="progress-title">
<a class="link" href="" title="">Main Details</a>
</div>
<div class="progress-info">
<span class="progress-status">Completed</span>
<span class="progress-date">21 June 2017</span>
</div>
</li>
<li class="progress-item -subitem" data-status="unstarted">
<div class="progress-title">
<a class="link" href="" title="">Investigators</a>
</div>
<div class="progress-info">
<span class="progress-status">Not Started</span>
</div>
</li>
<li class="progress-item" data-status="draft">
<div class="progress-title">
<a class="link" href="" title="">Animal Usage</a>
</div>
<div class="progress-info">
<span class="progress-status">In draft</span>
</div>
</li>
<li class="progress-item" data-status="progress">
<div class="progress-title">
<a class="link" href="" title="">Documents</a>
</div>
<div class="progress-info">
<span class="progress-status">In Progress</span>
</div>
</li>
<li class="progress-item -active" data-status="progress">
<div class="progress-title">
<a class="link" href="" title="">Approvals</a>
</div>
<ul class="person-list sub-list">
<li class="person-item">
<a class="link" href="" title="">Katherine Dreibel</a>
</li>
<li class="person-item">
<a class="link" href="" title="">Jacob Gubb</a>
</li>
</ul>
</li>
<li class="progress-item -show-sections" data-status="progress">
<div class="progress-title">
<a class="link" href="" title="">Questionnaire</a>
</div>
<ul class="person-list sub-list">
<li class="person-item" data-status="completed">
<a class="link" href="" title="">Application</a>
</li>
<li class="person-item" data-status="unstarted">
<a class="link" href="" title="">Monitoring</a>
</li>
</ul>
</li>
</ul>
</aside>
</div>
</div>
<div class="card -with-sidebar">
<div class="card-content card-section -with-accordion">
{{render '@form' }}
</div>
<div class="card-section card-sidebar">
<div class="card-heading">
<h4 class="card-subheading">Overview</h4>
<a class="link link-strong link-history" href="/history" title="View History">
<span class="text">History</span>
</a>
</div>
{{> @progress-meter }}
</div>
</div>
{
"pageTitle": "Coversheet",
"pageClass": "coversheet",
"dataFormat": "expanded",
"dataChart": "pie",
"width": 238,
"fontSize": 47.6,
"projects": [
{
"title": "Breeding wheat strains to reduce the incidence macular degeneration",
"remaining": 435000,
"awarded": 445000,
"total": 580000,
"status": "on hold",
"notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
},
{
"title": "Assisted vision technologies",
"remaining": 90000,
"awarded": 340000,
"total": 430000,
"status": "active",
"notes": "no roadblocks"
},
{
"title": "Minimizing Carbon Emissions and Maximizing Carbon Sequestration and Storage by Seagrasses, Tidal Marshes, Mangroves",
"remaining": 130000,
"awarded": 155000,
"total": 285000,
"status": "active",
"notes": "no roadblocks"
},
{
"title": "Mitochondrial Turnover",
"remaining": 60000,
"awarded": 95000,
"total": 125000,
"status": "pending",
"notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
},
{
"title": "Crop resilience from complex genomes",
"remaining": 90000,
"awarded": 105000,
"total": 125000,
"status": "on hold",
"notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
}
],
"other": 225000,
"dataTotal": 2000000,
"baseTitle": "Coversheet"
}
There are no notes for this item.