octoprint-customControl/octoprint_customControl/templates/octoprint_customControl.jinja2

<div id="customControlDialog" class="modal hide">
    <div class="modal-header">
        <h3 data-bind="text: title"></h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" data-bind="with: element">
            <!-- ko if: $root.type() == "command" || $root.type() == "container" -->
            <div class="control-group">
                <label class="control-label">{{ _('Name') }}</label>
                <div class="controls">
                    <input style="width: 97%" data-bind="value: name, valueAllowUnset: true"></input>
                </div>
            </div>
            <!-- /ko -->
            <!-- ko if: $root.type() == "container" -->
            <div class="control-group">
                <label class="control-label">{{ _('Layout') }}</label>
                <div class="controls">
                    <select data-bind="options: $root.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select>
                </div>
            </div>
            <!-- ko if: name && name() != "" -->
            <div class="control-group">
                <label class="control-label"><input type="checkbox" data-bind="checked: collapsable"></input>{{ _('Make Collapsable') }}</label>
            </div>
            <!-- /ko -->
            <!-- /ko -->

            <!-- ko if: $root.type() == "command" -->
            <div class="control-group">
                <label class="control-label">{{ _('Commands') }}</label>
                <div class="controls">
                    <textarea style="width: 97%; height: auto" data-bind="value: commands"></textarea>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label"><input type="checkbox" data-bind="checked: $root.useInputs"></input>{{ _('Use Inputs') }}</label>
            </div>
            <!-- ko if: $root.useInputs -->
            <div class="control-group">
                <label class="control-label">{{ _('Inputs') }}</label>
                <div class="row-fluid">
                    <div class="span12">
                        <div data-bind="css: $root.span('name')">{{ _('Name') }}</div>
                        <div data-bind="css: $root.span('parameter')">{{ _('Parameter') }}</div>
                        <div data-bind="css: $root.span('default')">{{ _('Default') }}</div>
                        <!-- ko if: $root.hasSlider -->
                        <div class="span2">{{ _('Min') }}</div>
                        <div class="span2">{{ _('Max') }}</div>
                        <div class="span2">{{ _('Step') }}</div>
                        <!-- /ko -->
                    </div>
                </div>
                <div data-bind="foreach: input">
                    <div class="row-fluid" style="margin-bottom: 5px">
                        <div data-bind="css: $root.span('name')"><input class="span12" data-bind="value: name"></input></div>
                        <div data-bind="css: $root.span('parameter')"><input class="span12" data-bind="value: parameter"></input></div>
                        <div data-bind="css: $root.span('default')"><input class="span12" data-bind="value: defaultValue"></input></div>
                        <!-- ko if: $root.hasSlider -->
                        <div class="span2"><input class="span12" data-bind="value: slide().min"></input></div>
                        <div class="span2"><input class="span12" data-bind="value: slide().max"></input></div>
                        <div class="span1"><input class="span12" data-bind="value: slide().step"></input></div>
                        <!-- /ko -->
                        <div class="span1"><a title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput($data)"><i class="icon-trash"></i></a></div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="offset11 span1"><a title="Add Input" class="btn btn-primary" data-bind="click: $root.addInput"><i class="icon-plus"></i></a></div>
                </div>
            </div>
            <!-- /ko -->
            <!-- /ko -->

            <!-- ko if: $root.type() == "output" -->
            <div class="control-group">
                <label class="control-label">{{ _('Regex') }}</label>
                <div class="controls">
                    <input style="width: 97%" data-bind="value: regex"></input>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{ _('Template') }}</label>
                <div class="controls">
                    <input style="width: 97%" data-bind="value: template"></input>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{ _('Default Message') }}</label>
                <div class="controls">
                    <input style="width: 97%" data-bind="value: deflt"></input>
                </div>
            </div>
            <!-- /ko -->

            <!-- ko if: $data.parent && $data.parent.layout && $data.parent.layout() == 'horizontal_grid' -->
            <div class="control-group">
                <label class="control-label">{{ _('Width') }}</label>
                <div class="controls">
                    <input data-bind="value: width, valueAllowUnset: false"></input>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{ _('Offset') }}</label>
                <div class="controls">
                    <input data-bind="value: offset, valueAllowUnset: true"></input>
                </div>
            </div>
            <!-- /ko -->
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">{{ _('Cancel') }}</a>
        <a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{ _('Confirm') }}</a>
    </div>
</div>