0.1.0

SASReportElement

SASReportElement is a custom HTML element that renders an entire report. This element extends HTMLElement.

See the Getting Started page to learn how to find the correct values for url and reportUri.

Custom Element Tag

<sas-report
  authenticationType="guest"
  url="http://my-viya-server.com"
  reportUri="/reports/reports/c3c6befb-3981-4c9e-b011-7dc11dec5e37"
  hideNavigation
></sas-report>

Attributes

authenticationType: string

Choose the method to authenticate requests to the SAS Viya server.

Currently, the only valid value is "guest". This attribute is required to support a future update where "credential" will be the default.

url: string

Specify the URL of the SAS Viya server that hosts the report. This is the full context root, including the protocol, optional port, and host.

reportUri: string

Specify the report URI.

hideNavigation: boolean | 'auto'

Indicate whether page navigation tabs ought to be hidden. false provides an application-like experience, whereas true provides a clean look which displays a single page. The 'auto' option displays tabs only for reports with more than one section.

default value: 'auto'

Styles

SASReportElement supports styling certain parts of the report via CSS variables.

--sas-report-background-color

Specify the background color of the area surrounding the report content. This includes the report controls area, the area behind the tab bar, and the padding.

default value: comes from the report theme

--sas-report-padding

Specify the padding between the report content and the boundary of the custom element.

default value: 0

Example: inline styles on the custom element

To customize the style of a sas-report, add inline styles.

<sas-report
  style="--sas-report-background-color: #0074BE; --sas-report-padding: 1rem;"
  authenticationType="guest"
  url="http://my-viya-server.com"
  reportUri="/reports/reports/c3c6befb-3981-4c9e-b011-7dc11dec5e37"
></sas-report>

Example: CSS

Any selector that targets the sas-report element can be used to apply style variables.

<style>
  .my-report {
    --sas-report-background-color: transparent;
    --sas-report-padding: 10px;
  }
</style>
<sas-report
  class="my-report"
  authenticationType="guest"
  url="http://my-viya-server.com"
  reportUri="/reports/reports/c3c6befb-3981-4c9e-b011-7dc11dec5e37"
></sas-report>
← API ReferenceSASReportObjectElement →