Overview
Here you can check how to customize EF Portal interface.
Dynamic and interconnected dropdown menus
Here is an example about create a dynamic and interconnected dropdown menus (pulldowns) in a user interface, where selecting an option in one dropdown affects the available options in another dropdown. Specifically, an example where selecting a “queue” would automatically adjust the “number of available cores” shown in another dropdown or field.
The SDF snippet:
<ef:service id="abaqus.batch">
<ef:name>Abaqus</ef:name>
<ef:info>
<script type="text/javascript">initAbaqus()</script>
</ef:info>
<ef:option id="_username" type="hidden"/>
<ef:option id="_password" type="hidden"/>
<ef:option id="abq_jobname" label="Job name" width="50" type="text">New Abaqus job</ef:option>
<ef:option id="abq_version" label="Abaqus version" type="list">
<ef:option id="6142">6.14-2</ef:option>
<ef:option id="6111">6.11-1</ef:option>
<ef:option id="2016">2016</ef:option>
</ef:option>
<ef:option id="abq_jobtype" class="ncpu-toggle" label="Job type:" type="radio">
<ef:option label="Standard" selected="true">standard</ef:option>
<ef:option label="MPI">mpi</ef:option>
</ef:option>
<ef:option id="abq_explicit" label="Explicit" type="boolean">explicit</ef:option>
<ef:option id="abq_mp_host_split" label="MP Host Split" type="hidden">2</ef:option>
<ef:info>
<div id="standard_ncpus">
<ef:option id="abq_standard_ncpus" label="Number of CPUs" type="list">
<ef:option id="2">2</ef:option>
<ef:option id="4">4</ef:option>
<ef:option id="6">6</ef:option>
<ef:option id="8">8</ef:option>
<ef:option id="12">12</ef:option>
<!--<ef:option id="16">16</ef:option>-->
</ef:option>
</div>
<div id="mpi_ncpus">
<ef:option id="abq_mpi_ncpus" label="Number of CPUs" width="50" type="list">
<ef:option id="12">12</ef:option>
<ef:option id="24">24</ef:option>
<ef:option id="36">36</ef:option>
<ef:option id="48">48</ef:option>
<ef:option id="60">60</ef:option>
<ef:option id="72">72</ef:option>
<ef:option id="84">84</ef:option>
<ef:option id="96">96</ef:option>
</ef:option>
</div>
<div id="standard_queues">
<ef:option id="abq_queue" label="Execution queue" type="list">
<ef:option id="Abaqus_G7">Abaqus_G7</ef:option>
</ef:option>
</div>
<div id="mpi_queues">
<ef:option id="abq_queue_mpi" label="Execution queue" type="list" >
<ef:option id="Abaqus_G7_MPI">Abaqus_G7_MPI</ef:option>
<ef:option id="FEA_G9_MPI">FEA_G9_MPI</ef:option>
</ef:option>
</div>
</ef:info>
<ef:option id="abq_delay" class="delay-toggle" label="Start job" type="list">
<ef:option label="Immediately" selected="true">immediately</ef:option>
<ef:option label="After...">delay</ef:option>
</ef:option>
<ef:info>
<div id="abq-delay-container">
<ef:option id="abq_delay_hours" label="Hours" type="text" width="8" extra="(max 72)">8</ef:option>
<ef:option id="abq_delay_minutes" label="Minutes" type="text" width="8" extra="(0-59)">0</ef:option>
</div>
</ef:info>
<ef:option id="abq_ifile" label="Input file (.inp) or list file" width="50" type="rfb" base="/"
required="required" filter="type = 'folder' or name *= '*.inp'" />
<ef:option id="abq_rfile" label="Restart (.res)" width="50" type="rfb" base="/"
extra="(can be relative to input file directory)" filter="type = 'folder' or name *= '*.res'"/>
<ef:option id="abq_usub" label="User subroutine (.f)" width="50" type="rfb" base="/"
extra="(can be relative to input file directory)" filter="type = 'folder' or name *= '*.f'"/>
<ef:option id="abq_sfile" label="Input substructure file (.odb)" width="50" type="rfb" base="/"
filter="type = 'folder' or name *= '*.odb'" />
<ef:action id="submit" label="Submit job" result="text/xml"><![CDATA[
"${EF_ROOT}/[PATH_TO_YOUR_SCRIPT]
]]></ef:action>
</ef:service>The javascript snippet:
function initAbaqus() {
$(document).ready(function () {
toggleNcpu();
toggleDelay();
togglePythonHome();
$('.ncpu-toggle').click(function () {
toggleNcpu();
});
$('.delay-toggle').click(function () {
toggleDelay();
});
$('.pyhome-toggle').click(function () {
togglePythonHome();
});
$('#serviceform').submit(function () {
var hours, minutes;
if ($('#serviceopt_abq_delay option:selected').val() === 'delay') {
hours = $('#serviceopt_abq_delay_hours').val();
minutes = $('#serviceopt_abq_delay_minutes').val();
if (!isInt(hours) || (hours < 0 || hours > 72)) {
alert('Please specify a valid value for start delay hours');
return false;
}
if (!isInt(minutes) || (minutes < 0 || minutes > 59)) {
alert('Please specify a valid value for start delay minutes');
return false;
}
}
return true;
});
});
}
function toggleNcpu() {
if ($('#serviceopt_abq_jobtype_sid_standard').is(':checked')) {
$('#standard_ncpus').show();
$('#standard_queues').show();
//$('#row_serviceopt_abq_queue').show();
$('#row_serviceopt_abq_sfile').show();
$('#mpi_ncpus').hide();
$('#mpi_queues').hide();
}
else {
$('#mpi_ncpus').show();
$('#mpi_queues').show();
//$('#row_serviceopt_abq_queue').hide();
$('#row_serviceopt_abq_sfile').show();
$('#standard_ncpus').hide();
$('#standard_queues').hide();
}
}
function toggleDelay() {
if ($('#serviceopt_abq_delay option:selected').val() === 'immediately') {
$('#abq-delay-container').hide();
}
else {
$('#abq-delay-container').show();
}
}
function togglePythonHome() {
if ($('#serviceopt_abq_py_syspy').is(':checked')) {
$('#abq-py-syspy-container').show();
}
else {
$('#abq-py-syspy-container').hide();
}
}
var isInt = (function (value) {
return ((value) && (typeof +value === 'number') && ((+value % 1) === 0));
});The javascript must be included into the layout xsl of the specific SDF.
