#LOCAL("Digits","")
<form action="?ViewAction=#INPUT.ViewAction&amp;ObjectID=#ObjectID" method="post" class="ep-js" data-js=".uiForm()">
  <div class="Dialog">
#IF(#FormError)
  <div class="DialogMessage MessageWarning">
    <h3>{InputError}</h3>
    {PleaseCorrectErrors}
  </div>
#ENDIF
<br />
<div>
  <span class="Bold">{FormatsForAutoGeneratedNumbers}</span>
  <span class="LeftPadding AdditionalInfo">({NoteForExitingNumbers})</span>
</div>
<br /><br />
<input type="hidden" name="ChangeAction" value="SaveNumberFormats" />
 #WITH_ERROR(#FormError)
  <table class="InnerGrid NumberFormats">
  <tbody>
  #LOCAL("NumberFormats",#Shop.NumberFormats)
    <tr>
      <td></td>
      <td>{NextNumber}</td>
      <td>{Prefix}</td>
      <td>{Infix}</td>
      <td>{Separator}</td>
      <td colspan="2">{RunningNumber}</td>
    </tr>
    <tr>
      <td colspan="7">&nbsp;</td>
    </tr>
    #MENU("NumberFormats")
      #INCLUDE(#Template)
    #ENDMENU
  #ENDLOCAL
  </tbody>
  </table>
 #ENDWITH_ERROR
  <div class="DialogButtonbar ep-js" data-js=".holdOnTop('bottom', {inheritDimensions: true})">
    <button class="Button SaveButton" type="submit">{Save}</button>
  </div>
  </div>
</form>
#ENDLOCAL #REM <!-- #Digits --> #ENDREM
<script type="text/javascript">
 jQuery.ready({plugin: "ep.date", DOM:true}, function($){
  var customerNumberPreview = $("#NumberPreviewRow0"),
    orderNumberPreview = $("#NumberPreviewRow1"),
    numberPreview = "",
    inputs = $('table.NumberFormats input,table.NumberFormats select'),
    epDate = new ep.Date(),
    fullYear = epDate.getFormat('yyyy'),
    shortYear = epDate.getFormat('yy'),
    fullMonth = epDate.getFormat('MMM'),
    shortMonth = epDate.getFormat('MM'),
    days = epDate.getFormat('dd');

  inputs.on('change blur',function(){
    // trigger validation manually to prevent bad timing issue
    $(this).trigger('validate');
    refresh(this);
    refresh('[id*="Prefix"]');
  });

  function refresh (elementSelector) {
    $(elementSelector).each(function(){
      var parentElement = $(this).parents('tr'),
        inputRow = parentElement.find('input,select'),
        targetArea = parentElement.find('span[id^="NumberPreviewRow"]'),

        prefixValue = inputRow.filter('[id*="_Prefix"]').val(),
        additionValue = inputRow.filter('[id*="Infix"]').val(),
        seperatorValue = inputRow.filter('[id*="Separator"]').val(),
        sequentialNumer = inputRow.filter('[id*="Next"]').val(),
        digitsSequentialNumber = inputRow.filter('[id*="Suffix"]').val(),
        digitsDiff = digitsSequentialNumber - sequentialNumer.length,
        addition = "";

        switch (additionValue) {
          case "YYYYMMMDD" : addition = fullYear+fullMonth+days;
          break;
          case "YYYYMMDD" : addition = fullYear+shortMonth+days;
          break;
          case "YYYYMM" : addition = fullYear+shortMonth;
          break;
          case "YYMMDD" : addition = shortYear+shortMonth+days
          break;
          case "MMMDD" : addition = fullMonth+days;
          break;
          case "MMDD" : addition = shortMonth+days;
          break;
          case "YYYY" : addition = fullYear;
          break;
          case "YY" :  addition = shortYear;
          break;
          case "YYMM" :  addition = shortYear + shortMonth;
          break;
          case "MMM" : addition = fullMonth;
          break;
          case "MM" : addition = shortMonth;
          break;
          case "CustomerNo" : addition = $("#NumberPreviewRow0").html();
          break;
          case "OrderNo": addition = $("#NumberPreviewRow1").html();
          break;
        }

        if (sequentialNumer) {
          digitsSequentialNumber = parseInt(digitsSequentialNumber.toString().slice(0,1));
          while (digitsDiff > 0){
            sequentialNumer="0"+sequentialNumer;
            digitsDiff--;
          }
        }

        if (!inputRow.filter(":invalid").length) {
          numberPreview = prefixValue+addition+seperatorValue+sequentialNumer || "{Empty[js]}";
          targetArea.html(numberPreview);
        }

    });
  }

  refresh('[id*="Prefix"]');
});
</script>