How to customize SmartDocs so that I can test against different environments from the same page

[gitesh]

If you want the ability to change the target URL of the SmartDocs page so that you can target Dev or Staging or Live environment you can do that by changing the SmartDocs template from the settings page of the model.

To change the template Navigate to the SmartDocs listing page and select settings from the dropdown.

You will see the current template that the model is using.

Add the following code snippet to the section where you want the switcher to show up:

Change the data-target to your endpoints

<div id='environment-selector' class="btn-group" role="group">
  <button type="button" class="btn btn-default" data-target="dev-api.customer.com">Dev</button>
  <button type="button" class="btn btn-default" data-target="test-api.customer.com">Staging</button>
  <button type="button" class="btn btn-default" data-target="api.customer.com">Production</button>
</div>

Add this code at the end of the template.

<script>
(function ($) {
  $('#environment-selector button').click(function(){
    $target = $(this).data('target');
    $host = $('[data-role="method_url_container"] [data-role="host"]');
    $url = $host.text();
    $start = $url.indexOf("//")+2;
    $host.text($url.substr(0, $start) + $target + $url.substr($url.indexOf("/", $start))); 
  });
})(jQuery);
</script>

This should let your end users target any backend they want to test against.