<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Template</title> </head> <body> <div id="TemplateConfigPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox"> <div data-role="content"> <div class="content-primary"> <form id="TemplateConfigForm"> <div class="selectContainer"> <label class="selectLabel" for="Options">Several Options</label> <select is="emby-select" id="Options" name="Options" class="emby-select-withcolor emby-select"> <option id="optOneOption" value="OneOption">One Option</option> <option id="optAnotherOption" value="AnotherOption">Another Option</option> </select> </div> <div class="inputContainer"> <label class="inputeLabel inputLabelUnfocused" for="AnInteger">An Integer</label> <input id="AnInteger" name="AnInteger" type="number" is="emby-input" min="0" /> <div class="fieldDescription">A Description</div> </div> <div class="checkboxContainer checkboxContainer-withDescripton"> <label class="emby-checkbox-label"> <input id="TrueFalseSetting" name="TrueFalseCheckBox" type="checkbox" is="emby-checkbox" /> <span>A Checkbox</span> </label> </div> <div class="inputContainer"> <label class="inputeLabel inputLabelUnfocused" for="AString">A String</label> <input id="AString" name="AString" type="text" is="emby-input" /> <div class="fieldDescription">Another Description</div> </div> <div> <button is="emby-button" type="submit" class="raised button-submit block emby-button"> <span>Save</span> </button> </div> </form> </div> </div> <script type="text/javascript"> var TemplateConfig = { pluginUniqueId: 'eb5d7894-8eef-4b36-aa6f-5d124e828ce1' }; $('#TemplateConfigPage').on('pageshow', function () { Dashboard.showLoadingMsg(); ApiClient.getPluginConfiguration(TemplateConfig.pluginUniqueId).then(function (config) { $('#Options').val(config.Options).change(); $('#AnInteger').val(config.AnInteger).change(); document.getElementById('TrueFalseSetting').checked = config.TrueFalseSetting; $('#AString').val(config.AString).change(); Dashboard.hideLoadingMsg(); }); }); $('#TemplateConfigForm').on('submit', function () { Dashboard.showLoadingMsg(); ApiClient.getPluginConfiguration(TemplateConfig.pluginUniqueId).then(function (config) { config.Options = $('#Options').val(); config.AnInteger = $('#AnInteger').val(); config.TrueFalseSetting = document.getElementById('TrueFalseSetting').checked; config.AString = $('#AString').val(); ApiClient.updatePluginConfiguration(TemplateConfig.pluginUniqueId, config).then(function (result) { Dashboard.processPluginConfigurationUpdateResult(result); }); }); return false; }); </script> </div> </body> </html>