Skip to main content
Version: 1.0.0

Select Content and Data With Dialogs

The SAS Content SDK includes two modal dialogs that let a user pick something from the SAS Viya platform without giving up any of your page layout. The ContentSelectorElement selects content items such as reports and folders, and the DataSelectorElement selects data tables.

Both dialogs are hidden until you open them, so they can be placed anywhere in the page.

Selecting a content item​

<button id="chooseReport">Choose a report</button>
<sas-content-selector
  id="selector"
  url="{SAS-VIYA-URL}"
  mode="open"
  title="Choose a report"
></sas-content-selector>

The mode attribute determines what the dialog lets the user do. Use open to pick a file, selectLocation to pick a folder, or save to pick a folder and enter a name. See ContentSelectorElement for the full list.

const selector = document.getElementById('selector');

document.getElementById('chooseReport').onclick = () => selector.open();

selector.onCommit = (context) => {
  const item = context.selection;
  if (item) {
    document.getElementById('report').reportUri = item.resource.id;
  }
};

Calling open shows the dialog. When the user confirms their choice, onCommit receives a context object that contains the selected Item, the folder it came from, and the name and type of the selection. The dialog closes itself when the user cancels, unless you supply your own onDismiss handler.

Limiting the content that can be selected​

Wrap the dialog in a ContentGroupElement and set initialFilterValue to restrict the types that are displayed. See ContentFilterConfig.

cg.initialFilterValue = {
  filterTypes: [{ name: 'report' }],
  excludedFolderTypes: ['trashFolder'],
};

Selecting a data table​

<button id="chooseData">Choose data</button>
<sas-data-selector
  id="dataSelector"
  url="{SAS-VIYA-URL}"
  selection-mode="single"
></sas-data-selector>
const dataSelector = document.getElementById('dataSelector');

document.getElementById('chooseData').onclick = () => dataSelector.open();

dataSelector.onCommit = (items) => {
  const table = items[0];
  console.log(table.libraryId, table.tableName, table.resourceUri);
};

onCommit receives an array of CommitItems, one per selected table. The dialog closes itself after the callback runs.

Connecting the data selector to a viewer​

If the element you want to update accepts a resource-uri attribute, you can skip the JavaScript entirely by setting the linked-viewer attribute to a CSS selector for that element.

<sas-data-selector url="{SAS-VIYA-URL}" linked-viewer="#myViewer"></sas-data-selector>
<my-viewer id="myViewer"></my-viewer>

When the user commits a selection, the resource-uri attribute of #myViewer is set to the resourceUri of the first committed table.

Browsing without a dialog​

If you want a full browsing experience embedded directly in the page rather than in a dialog, use the QuickDriveElement. It combines a locations list, breadcrumb, search field, and content view into a single element.

<div style="height: 600px">
  <sas-quick-drive url="{SAS-VIYA-URL}" selection-mode="single"></sas-quick-drive>
</div>