API Reference

Top-Level Exports

• ContentAreaElement
• ContentBreadcrumbElement
• ContentGroupElement
• ContentLocationsElement
• ContentSearchFieldElement
• ContentSelectorElement
• ContentTreeElement
• DataSelectorElement
• QuickDriveElement
• getSASJobExecutionUrl

Custom Element Tags

Each element is registered as a custom HTML element when the library loads.

• sas-content-area: ContentAreaElement
• sas-content-breadcrumb: ContentBreadcrumbElement
• sas-content-group: ContentGroupElement
• sas-content-locations: ContentLocationsElement
• sas-content-search: ContentSearchFieldElement
• sas-content-selector: ContentSelectorElement
• sas-content-tree: ContentTreeElement
• sas-data-selector: DataSelectorElement
• sas-quick-drive: QuickDriveElement

Loading with a script element

When you load the library with a script element, the Content SDK components are not ready to configure and use until all of the other assets are loaded. The contentSdkComponents.loaded event is dispatched once it is ready.

<script
  async
  src="https://cdn.developer.sas.com/packages/content-components/latest/dist/umd/content-sdk-components.js"
></script>
<script>
  window.addEventListener('contentSdkComponents.loaded', function () {
    // The SAS Content SDK is loaded and ready
  });
</script>

Once the library is loaded, the window.contentSdkComponents global provides access to the element classes and to getSASJobExecutionUrl.

Styling Components

The SAS Content SDK components accept CSS styles by setting the "class" or "style" attributes of a component. For example:

<style>
  .customClass {
    padding-top: 5rem;
  }
</style>

<sas-content-area
  url="http://my-viya-server.com"
  initial-selection-index="0"
  selection-mode="single"
  class="customClass"
  style="height: 30rem;"
></sas-content-area>