Getting Started

Atlas is hosted on the CenturyLink Platform assets server for anyone to you. The Atlas library adds CenturyLink Platform specific business logic on top of Cyclops. For more information about how to setup up and use Cyclops visit it’s documentation.

To get started you will need to include and setup Cyclops. Then include the Atlas JavaScript file and StyleSheet and call config. Information on how to configure Atlas can be found on it's documentation page.

          
<!DOCTYPE html>
<html class="cyclops">
  <head>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
    <link href="https://assets.ctl.io/cyclops/1.5.0/css/cyclops.min.css" rel="stylesheet" type="text/css" />
    <link href="https://assets.ctl.io/atlas/1.0.1/css/atlas.min.css" rel="stylesheet" type="text/css" />
    <!-- your styles here -->
  </head>
  <body>
    <!-- Your Content Here -->

    <script src="https://code.jquery.com/jquery-2.1.4.min.js" ></script>
    <script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js" ></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script src="https://assets.ctl.io/cyclops/1.5.0/scripts/cyclops.min.js" ></script>
    <script src="https://assets.ctl.io/atlas/1.0.1/scripts/atlas.min.js" ></script>
    <script>
      $(function(){
        atlas.config({
          apiBaseUrl: "https://api.ctl.io",
          controlBaseUrl: "https://control.ctl.io",
          bearerToken: "Provided from SSO",
          rootAccountAlias: "Provided from SSO",
          userName: "Provided from SSO"
        });
      })
    </script>
    <!-- your scripts here -->
  </body>
</html>
          
        

Rendering A Basic "shell"

One big advantage of Atlas is its ability to render a satellite application’s shell, or in other terms all the common components that every satellite application must have. It adds support for things like account impersonation and branding. For more information consult the launch documentation

          
  <!DOCTYPE html>
  <html lang="en" class="cyclops">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Atlas Template</title>
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
      <link href="https://assets.ctl.io/cyclops/1.5.0/css/cyclops.css" rel="stylesheet" type="text/css" />
      <link href="https://assets.ctl.io/atlas/1.0.1/css/atlas.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <account-switcher></account-switcher>
      <brand-bar></brand-bar>
      <main-nav></main-nav>
      <main>
        <!-- Your Content Here -->
      </main>

      <script src="https://code.jquery.com/jquery-2.1.4.min.js" ></script>
      <script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" ></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js" ></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
      <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
      <script src="https://assets.ctl.io/cyclops/1.5.0/scripts/cyclops.js" ></script>
      <script src="https://assets.ctl.io/atlas/1.0.1/scripts/atlas.min.js" ></script>
      <script>
        $(function(){
          atlas.config({
            apiBaseUrl: "https://api.ctl.io",
            controlBaseUrl: "https://control.ctl.io",
            bearerToken: "Provided from SSO",
            rootAccountAlias: "Provided from SSO",
            userName: "Provided from SSO"
          });
          atlas.launch({mainNavId: "Assgined by Platform"});
        })
      </script>
    </body>
  </html>