Using jQuery-UI Controls in IO Docs

Table of Contents

• Step-by-step Procedure

IO Docs provides support for basic HTML controls such as input, text area, checkbox, and radio button. jQuery-UI cross-browser widgets can enhance the look-and-feel and usability of your interactive documentation. For example:

Note: This document assumes your portal is branded using Blackbeard. The instructions can be modified slightly to work with Sparrow-based portals (see https://www.youtube.com/watch?v=-t-i4WYJEpQfor details).

Step-by-step Procedure

1. Create a sample API definition (no need to define any endpoints).

2. Paste the following JSON to the new API's IO-Docs definition:

    {     "name": "jQuery UI Test",     "title": "jQuery UI Test",     "description": "Extending IO Docs with jQuery-UI Controls",     "version": "3",     "protocol": "rest",     "basePath": "",     "auth": {         "key": {             "param": "api_key",             "location": "query"         }     },     "resources": {         "Example Endpoint": {             "methods": {                 "exampleMethod": {                     "description": "",                     "httpMethod": "GET",                     "path": "",                     "parameters": {                         "sampleDate": {                             "type": "date",                             "description": "Sample date field in ISO-8601 format",                             "default": "",                             "required": true,                             "location": "query"                         },                         "sampleInteger": {                             "type": "integer",                             "description": "Whole numbers in the range of 1-20",                             "default": "",                             "required": true,                             "location": "query"                         },                         "anotherInteger": {                             "type": "integer",                             "description": "Whole numbers only",                             "default": "",                             "required": true,                             "location": "query"                         }                     }                 }             }         }     } }

3. Under Manage > Portal > Portal Setup, add the following line to the Head JavaScript section (between the closing </script> tag and the opening <script> tag):

    </script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" media="all"> ... <script>

4. Under Manage > Portal > Portal Setup, add the following code to the Body JavaScript section:

    window.addEventListener('portalAfterInit', function () {     // Load and initialize jQuery and jQuery-UI after the Main portal content renders     if (mashery.contentType === 'ioDocs') {         console.log("In IO-Docs");         m$.loadJS('https://code.jquery.com/jquery-1.12.4.js', function () {             console.log("jQuery loaded");             m$.loadJS('https://code.jquery.com/ui/1.12.1/jquery-ui.js', function () {                 console.log("jQuery-UI loaded");                 // add calendar control                 $('input[name="params[sampleDate]"]').datepicker({ dateFormat: 'yy-mm-dd' });                   // Add slider after integer field                 $('input[name="params[sampleInteger]"]').after('<div id="slider-range-max"></div>');                 $("#slider-range-max").slider( {                     range: "max",                     min: 1,                     max: 20,                     value: 1,                     slide: function( event, ui ) {                         $('input[name="params[sampleInteger]"]').val( ui.value );                     }                 });                 $('input[name="params[sampleInteger]"]').val($("#slider-range-max").slider( "value" ) );                   // Add spinner control                 var spinner = $('input[name="params[anotherInteger]"]').spinner();             });         });     } }, false);

The results should look like this: