<body>
<div class="sampleTitle"><i class="bi bi-file-earmark-ruled"></i>Test Driver for Rules Driven Dynamic Forms
</div>
<table width="100%">
<tr>
<td valign="top">
<div class="commandBar">
<div class="commandContainer">
<div class="sampleSelectLabel">Select Sample:</div>
<select class="sampleSelect" id="sampleSelectId" onchange="processSwitchSample(this)">
<option value="0">HHS Marketplace for 2025 Plans</option>
<option value="1">Job Application - I18N approach 1</option>
<option value="2">I18N with SCO - I18N approach 2</option>
<option value="3">Select Country, then State/Province, then City (JSON path example)
</option>
<option value="4">Select Vehicle Make, then Model, then Year (JSON path example)</option>
<option value="5">Foreign Travel Risk</option>
</select>
</div>
<div style="display: none;" id="languageContainerId">
<div class="commandVerticalSpacer"></div>
<div class="commandContainer">
<select class="sampleSelect" id="languageSelectId" onchange="processSwitchLanguage(this)">
</select>
</div>
</div>
<div class="commandVerticalSpacer"></div>
<div class="commandContainer">
<span class="commandButton" id="startActionId">
<a class="command" accesskey="s" title="Start Dynamic Form - Shortcut: Alt S (Windows) - CRTL Option S (Mac)" href="#" onclick="processClickStart(); return false;">
<i class="bi bi-box-arrow-in-right"></i><span style="text-decoration: underline">Start
</a>
</span>
<span class="commandButton commandButtonHidden" id="prevActionId">
<a class="command" accesskey="p" title="Previous Step - Shortcut: Alt P (Windows) - CRTL Option P (Mac)" href="#" onclick="processClickPrev(); return false;">
<i class="bi bi-arrow-left-square"></i><span style="text-decoration: underline">Previous
</a>
</span>
<div style="height: 0.6rem;"></div>
<span class="commandButton commandButtonHidden" id="nextActionId">
<a class="command" accesskey="n" title="Next Step - Shortcut: Alt N (Windows) - CRTL Option N (Mac)" href="#" onclick="processClickNext(); return false;">
<i class="bi bi-arrow-right-square"></i><span style="text-decoration: underline">Next
</a>
</span>
</div>
<div class="commandContainer showTraceContainer">
<span class="commandButton" id="showTraceId">
<a class="command" accesskey="t" title="Show Trace - Shortcut: Alt T (Windows) - CRTL Option T (Mac)" href="#" onclick="processShowTrace(); return false;">
Show <span style="text-decoration: underline">Trace
</a>
</span>
<span class="commandButton commandButtonHidden" id="hideTraceId">
<a class="command" accesskey="h" title="Hide Trace - Shortcut: Alt H (Windows) - CRTL Option H (Mac)" href="#" onclick="processHideTrace(); return false;">
<span style="text-decoration: underline">Hide Trace
</a>
</span>
</div>
<div class="commandContainer useHtmlKuiContainer">
<span class="commandButton" id="useHtmlId">
<a class="command" accesskey="t" title="Use Simple Html elements for rendering form" href="#" onclick="processUseHtml(); return false;">
Use Html
</a>
</span>
<span class="commandButton commandButtonHidden" id="useKuiId">
<a class="command" accesskey="h" title="Use KendoUI Components for rendering form elements" href="#" onclick="processUseKui(); return false;">
Use KendoUI
</a>
</span>
</div>
</div>
</td>
<td width="100%">
<div id="dynUIContainerId" class="dynUIContainer">
<div>Dynamic Form component</div>
<div style="margin: 2rem;">
<p>
In these samples the forms are generated on the fly based on rules from Corticon.js decision
services. It shows how the decision service acts as the model for a generic form component.
</div>
</div>
</td>
</tr>
</table>
<div class="allTracesContainer">
<div class="tracePanelTitle">Decision Service (Rules) Trace Panel</div>
<div class="stageTraceHistory" style="overflow-x: auto; overflow-y: hidden; padding: 0.8rem;">
<span style="width: 20px;" id="traceHistorySummaryId"><i class="bi bi-journal-text"></i></span>
<span style="margin-left: 0.6rem;" id="traceHistoryId"></span>
</div>
<table width="100%">
<tr>
<td>
<i class="bi bi-arrow-down-right-square"></i> Input to Decision Service Call <a href="#" title="Copy to clipboard" class="copyToClip" onclick="corticon.util.copyToClipboard('#decisionServiceInputId'); return false;"><i class="bi bi-clipboard-plus"></i></a>
</td>
<td>
<i class="bi bi-arrow-up-left-square"></i> Results From Decision Service Call <span id="execTimeId"></span> <a href="#" title="Copy to clipboard" class="copyToClip" onclick="corticon.util.copyToClipboard('#decisionServiceResultId'); return false;"><i class="bi bi-clipboard-plus"></i></a>
</td>
<td>
<i class="bi bi-clipboard-data"></i> Accrued Form Data <a href="#" title="Copy to clipboard" class="copyToClip" onclick="corticon.util.copyToClipboard('#formDataId'); return false;"><i class="bi bi-clipboard-plus"></i></a>
</td>
</tr>
<tr>
<td width="20%">
<textarea style="width: 100%; height: 300px;" id="decisionServiceInputId"></textarea>
</td>
<td width="40%">
<textarea style="width: 100%; height: 300px;" id="decisionServiceResultId"></textarea>
</td>
<td width="40%">
<textarea style="width: 100%; height: 300px;" id="formDataId"></textarea>
</td>
</tr>
</table>
</div>
</body>
External CSS
This Pen doesn't use any external CSS resources.