Skip to main content
Version: 1.0.0

DataSelectorElement

DataSelectorElement is a custom HTML element that displays a modal dialog for browsing and selecting SAS data tables. The dialog is hidden until it is opened with the open method. This element extends HTMLElement.

Custom Element Tag​

<button id="chooseData">Choose data</button>
<sas-data-selector
  id="dataSelector"
  url="http://my-viya-server.com"
  selection-mode="single"
></sas-data-selector>
const dataSelector = document.getElementById('dataSelector');
document.getElementById('chooseData').onclick = () => dataSelector.open();
dataSelector.onCommit = (items) => {
  console.log(items[0].tableName, items[0].libraryId);
};

Attributes​

selection-mode: string​

Specify how many data tables can be selected.

Values​

multiple

Multiple data tables can be selected.

single

Only one data table can be selected at a time.

title: string​

The title of the dialog. If it is not specified, a localized default is used.

commit-button-label: string​

The label of the commit button. If it is not specified, a localized default is used.

has-info-pane: boolean​

Specify whether the dialog suppresses its own information pane, so that the containing application can display item details instead. Since HTML attributes don't support booleans, only the presence of this attribute is required to enable it.

linked-viewer: string​

A CSS selector, such as #myViewer, that identifies an element on the page to update when a data table is committed. The resource-uri attribute of the target element is set to the resourceUri of the first committed table. See CommitItem. This is a convenient way to connect the data selector to a viewer without writing any JavaScript.

url​

See url.

authentication-type​

See authenticationType.

Properties​

isOpen: boolean​

Whether the dialog is currently open. Setting this property shows or hides the dialog, and is equivalent to calling the open and close methods.

onCommit: (items: CommitItem[]) => void​

A callback function that is called when the user confirms their data table selection. The dialog closes automatically after this callback runs.

Arguments​

items: CommitItem[]

The selected data tables. See CommitItem.

onDismiss: () => void​

A callback function that is called when the user cancels the dialog. The dialog closes automatically after this callback runs.

Methods​

open: () => void​

Opens the dialog.

close: () => void​

Closes the dialog.