Would you like to contribute to the Titanium docs? To get started, sign up for an account on the Appcelerator Wiki and sign our CLA.

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Made some minor grammar changes


  1. Create a file called app.js and place it in the ./web/public folder.
  2. Copy and paste the following content to into the app.js file: 

    Code Block
    (function () {
        // If we're not executing in an API Doc page, don't do anything
        if (!$('body').hasClass('apidoc')) {
        // Check if our header is here. If not, insert it.
        if ($('#company-header').length === 0) {
            $('body').prepend('<div id="company-header">ACME Corporation</div>');
        // Check if our footer is here. If not, insert it.
        if ($('#company-footer').length === 0) {
            $('body').append('<div id="company-footer">Copyright &copy; 2015 by ACME Corporation</div>');
  3. Create a file called app.css and place it in the ./web/public folder.
  4. Copy and paste the following content to into the app.css file:

    Code Block
    // Adjust the margin of the nav bar and container to make room for the header and footer
    body.apidoc #nav-secondary nav, body.apidoc #page-container {
        top: 50px;
        bottom: 25px;
    body.apidoc #company-header {
        background-color: darkblue;
        color: white;
        font-size: 36px;
        height: 50px;
        padding-left: 20px;
    body.apidoc #company-footer {
        background-color: darkorange;
        color: white;
        font-size: 12px;
        height: 30px;
        padding-right: 40px;
        text-align: right;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        width: 100%;
  5. Open the ./conf/default.js file and add the following keys to include the files in the web page: 

    Code Block
    module.exports = {
      admin: {
        // Include ./web/public/app.css
        css: [ '/app.css' ],
        // Include ./web/public/app.js
        js: [ '/app.js' ]


  1. Copy the contents of the https://github.com/swagger-api/swagger-ui/blob/5fa84ff5705de2b00e00528efe74a48fd9a49ab1/dist/ folder to the API Builder project's ./web/public/ folder. 

    Code Block
    ## Note that this will overwrite the index.html and content in the css, font and images folders
    cd ArrowProject/web/public
    git clone https://github.com/swagger-api/swagger-ui.git
    cp -r swagger-ui/dist/* .
    rm -rf swagger-ui
  2. Open ./web/public/index.html file and make the following modifications:
    1. At line 38, modify the url variable in the else condition to point to the application's API endpoint:

      Code Block
      // Find:
      url = "http://petstore.swagger.io/v2/swagger.json";
      // To test locally, change to:
      url = "";
      // For production, first publish the application to get the URL, replace the URL, then do a force republish
      url = "https://<APP_GUID>.cloudapp-enterprise.appcelerator.com/apidoc/swagger.json";
    2. At line 80, modify the SwaggerClient.ApiKeyAuthorization() method to add the API key for authorization. (Will not work for Internet Explorer 9 and earlier.): 

      Code Block
      // Find:
      var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
      // Change to:
      var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", 'Basic ' + btoa(key), "header");
    3. Optional. At lines 89 and 92, uncomment the apiKey variable and specify your API key to hardcode hard code the value.

  3. Run or publish the application, then in a browser, navigate to the API Builder application's base URL ( or https://<APP_GUID>.cloudapp-enterprise.appcelerator.com/) to display the Swagger interface.