API Reference

Top-Level Exports

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

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 the getSASJobExecutionUrl, setTheme, and setLocale functions.

Themes and Languages

Use setTheme to apply the SAS light, dark, or high-contrast theme, or a theme from the SAS Viya platform. Use setLocale to change the language, including right-to-left languages. Both functions update every component on the page without reloading it.

window.addEventListener('contentSdkComponents.loaded', function () {
  window.contentSdkComponents.setTheme('dark');
  window.contentSdkComponents.setLocale('fr-FR');
});

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>