Visual class

Reference

Package:: powerbi-client

The Power BI Visual embed component

Extends: Report

Inherited Properties

Methods

getFilters(FiltersLevel)	Gets filters that are applied to the filter level. Default filter level is visual level. `visual.getFilters(filtersLevel) .then(filters => { ... });`
getPages()	Gets the list of pages within the report - not supported in visual
getVisualDescriptor()	Gets the embedded visual descriptor object that contains the visual name, type, etc. `visual.getVisualDescriptor() .then(visualDetails => { ... });`
removeFilters(FiltersLevel)	Removes all filters from the current filter level. Default filter level is visual level. `visual.removeFilters(filtersLevel);`
setFilters(IFilter[], FiltersLevel)	Sets filters at the filter level. Default filter level is visual level. `const filters: [ ... ]; visual.setFilters(filters, filtersLevel) .catch(errors => { ... });`
setPage(string)	Sets the active page of the report - not supported in visual
updateFilters(FiltersOperations, IFilter[], FiltersLevel)	Updates filters at the filter level. Default filter level is visual level. `const filters: [ ... ]; visual.updateFilters(FiltersOperations.Add, filters, filtersLevel) .catch(errors => { ... });`

Inherited Methods

addContextMenuCommand(string, string, string, MenuLocation, string, string, string)	Add context menu extension command. `report.addContextMenuCommand(commandName, commandTitle, contextMenuTitle, menuLocation, visualName, visualType, groupName) .catch(error => { ... });`
addOptionsMenuCommand(string, string, string, MenuLocation, string, string, string, string)	Add options menu extension command. `report.addOptionsMenuCommand(commandName, commandTitle, optionsMenuTitle, menuLocation, visualName, visualType, groupName, commandIcon) .catch(error => { ... });`
addPage(string)	Add an empty page to the report `// Add a page to the report with "Sales" as the page display name report.addPage("Sales");`
applyTheme(IReportTheme)	Apply a theme to the report `report.applyTheme(theme);`
arePersistentFiltersApplied()	Returns if there are user's filters, slicers, or other data view changes applied on the report. If persistent filters is disable, returns false. `report.arePersistentFiltersApplied();`
clearSelectedVisuals(boolean)	Clears selected not popped out visuals, if flag is passed, all visuals selections will be cleared. `report.clearSelectedVisuals() .then(() => { ... });`
closeAllOverlays()	Closes all open context menus and tooltips. `report.closeAllOverlays() .then(() => { ... });`
configChanged(boolean)	Handle config changes.
deletePage(string)	Delete a page from a report `// Delete a page from a report by pageName (PageName is different than the display name and can be acquired from the getPages API) report.deletePage("ReportSection145");`
exitFullscreen()	Requests the browser to exit fullscreen mode.
fullscreen()	Requests the browser to render the component's iframe in fullscreen mode.
getActivePage()	Gets the active report page. `report.getActivePage() .then(activePage => { ... });`
getCorrelationId()	Get the correlationId for the current embed session. `// Get the correlationId for the current embed session report.getCorrelationId() .then(correlationId => { ... });`
getId()	Gets the report ID from the first available location: options, attribute, embed url.
getPageByName(string)	Gets a report page by its name. `report.getPageByName(pageName) .then(page => { ... });`
getTheme()	get the theme of the report `report.getTheme();`
getZoom()	Return the current zoom level of the report.
isSaved()	checks if the report is saved. `report.isSaved()`
moveVisual(string, string, number, number, number)	Updates the position of a visual in a page. `report.moveVisual(pageName, visualName, x, y, z) .catch(error => { ... });`
off<T>(string, IEventHandler<T>)	Removes one or more event handlers from the list of handlers. If a reference to the existing handle function is specified, remove the specific handler. If the handler is not specified, remove all handlers for the event name specified. `report.off('pageChanged') or const logHandler = function (event) { console.log(event); }; report.off('pageChanged', logHandler);`
on<T>(string, IEventHandler<T>)	Adds an event handler for a specific event. `report.on('pageChanged', (event) => { console.log('PageChanged: ', event.page.name); });`
print()	Prints the active page of the report by invoking `window.print()` on the embed iframe component.
refresh()	Refreshes data sources for the report. `report.refresh();`
reload()	Reloads embed using existing configuration. E.g. For reports this effectively clears all filters and makes the first page active which simulates resetting a report back to loaded state. `report.reload();`
removeComponentTabIndex(number)	Removes element's tabindex attribute
removeContextMenuCommand(string, string)	Remove context menu extension command. `report.removeContextMenuCommand(commandName, contextMenuTitle) .catch(error => { ... });`
removeOptionsMenuCommand(string, string)	Remove options menu extension command. `report.removeOptionsMenuCommand(commandName, optionsMenuTitle) .then({ ... });`
renamePage(string, string)	Rename a page from a report `// Rename a page from a report by changing displayName (pageName is different from the display name and can be acquired from the getPages API) report.renamePage("ReportSection145", "Sales");`
resetPersistentFilters()	Reset user's filters, slicers, and other data view changes to the default state of the report `report.resetPersistentFilters();`
resetTheme()	Reset and apply the default theme of the report `report.resetTheme();`
resizeActivePage(PageSizeType, number, number)	Updates the size of active page in report. `report.resizeActivePage(pageSizeType, width, height) .catch(error => { ... });`
resizeVisual(string, string, number, number)	Resize a visual in a page. `report.resizeVisual(pageName, visualName, width, height) .catch(error => { ... });`
save()	Saves Report.
saveAs(ISaveAsParameters)	SaveAs Report.
savePersistentFilters()	Save user's filters, slicers, and other data view changes of the report `report.savePersistentFilters();`
setAccessToken(string)	Set accessToken.
setComponentTabIndex(number)	Sets element's tabindex attribute
setComponentTitle(string)	Set the component title for accessibility. In case of iframes, this method will change the iframe title.
setVisualDisplayState(string, string, VisualContainerDisplayMode)	Updates the display state of a visual in a page. `report.setVisualDisplayState(pageName, visualName, displayState) .catch(error => { ... });`
setZoom(number)	Sets the report's zoom level.
switchLayout(LayoutType)	Updates the report layout `report.switchLayout(layoutType);`
switchMode(string \| ViewMode)	Switch Report view mode.
updateSettings(ISettings)	Updates visibility settings for the filter pane and the page navigation pane. `const newSettings = { panes: { filters: { visible: false } } }; report.updateSettings(newSettings) .catch(error => { ... });`

Inherited Property Details

bookmarksManager

bookmarksManager: BookmarksManager

Property Value

BookmarksManager

Inherited From Report.bookmarksManager

Method Details

getFilters(FiltersLevel)

Gets filters that are applied to the filter level. Default filter level is visual level.

visual.getFilters(filtersLevel)
  .then(filters => {
    ...
  });

function getFilters(filtersLevel?: FiltersLevel): Promise<IFilter[]>

Parameters

filtersLevel: FiltersLevel

Returns

Promise<IFilter[]>

getPages()

Gets the list of pages within the report - not supported in visual

function getPages(): Promise<Page[]>

Returns

Promise<Page[]>

getVisualDescriptor()

Gets the embedded visual descriptor object that contains the visual name, type, etc.

visual.getVisualDescriptor()
  .then(visualDetails => { ... });

function getVisualDescriptor(): Promise<VisualDescriptor>

Returns

Promise<VisualDescriptor>

removeFilters(FiltersLevel)

Removes all filters from the current filter level. Default filter level is visual level.

visual.removeFilters(filtersLevel);

function removeFilters(filtersLevel?: FiltersLevel): Promise<IHttpPostMessageResponse<void>>

Parameters

filtersLevel: FiltersLevel

Returns

Promise<IHttpPostMessageResponse<void>>

setFilters(IFilter[], FiltersLevel)

Sets filters at the filter level. Default filter level is visual level.

const filters: [
   ...
];

visual.setFilters(filters, filtersLevel)
 .catch(errors => {
   ...
 });

function setFilters(filters: IFilter[], filtersLevel?: FiltersLevel): Promise<IHttpPostMessageResponse<void>>

Parameters

filters: IFilter[]

filtersLevel: FiltersLevel

Returns

Promise<IHttpPostMessageResponse<void>>

setPage(string)

Sets the active page of the report - not supported in visual

function setPage(_pageName: string): Promise<IHttpPostMessageResponse<void>>

Parameters

_pageName: string

Returns

Promise<IHttpPostMessageResponse<void>>

updateFilters(FiltersOperations, IFilter[], FiltersLevel)

Updates filters at the filter level. Default filter level is visual level.

const filters: [
   ...
];

visual.updateFilters(FiltersOperations.Add, filters, filtersLevel)
 .catch(errors => {
   ...
 });

function updateFilters(operation: FiltersOperations, filters: IFilter[], filtersLevel?: FiltersLevel): Promise<IHttpPostMessageResponse<void>>

Parameters

operation: FiltersOperations

filters: IFilter[]

filtersLevel: FiltersLevel

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited Method Details

addContextMenuCommand(string, string, string, MenuLocation, string, string, string)

Add context menu extension command.

report.addContextMenuCommand(commandName, commandTitle, contextMenuTitle, menuLocation, visualName, visualType, groupName)
 .catch(error => {
     ...
 });

function addContextMenuCommand(commandName: string, commandTitle: string, contextMenuTitle: string, menuLocation: MenuLocation, visualName: string, visualType: string, groupName?: string): Promise<IHttpPostMessageResponse<void>>

Parameters

commandName: string

commandTitle: string

contextMenuTitle: string

menuLocation: MenuLocation

visualName: string

visualType: string

groupName: string

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.addContextMenuCommand

addOptionsMenuCommand(string, string, string, MenuLocation, string, string, string, string)

Add options menu extension command.

report.addOptionsMenuCommand(commandName, commandTitle, optionsMenuTitle, menuLocation, visualName, visualType, groupName, commandIcon)
 .catch(error => {
     ...
 });

function addOptionsMenuCommand(commandName: string, commandTitle: string, optionsMenuTitle?: string, menuLocation?: MenuLocation, visualName?: string, visualType?: string, groupName?: string, commandIcon?: string): Promise<IHttpPostMessageResponse<void>>

Parameters

commandName: string

commandTitle: string

optionsMenuTitle: string

menuLocation: MenuLocation

visualName: string

visualType: string

groupName: string

commandIcon: string

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.addOptionsMenuCommand

addPage(string)

Add an empty page to the report

// Add a page to the report with "Sales" as the page display name
report.addPage("Sales");

function addPage(displayName?: string): Promise<Page>

Parameters

displayName: string

Returns

Promise<Page>

Inherited From Report.addPage

applyTheme(IReportTheme)

Apply a theme to the report

report.applyTheme(theme);

function applyTheme(theme: IReportTheme): Promise<void>

Parameters

theme: IReportTheme

Returns

Promise<void>

Inherited From Report.applyTheme

arePersistentFiltersApplied()

Returns if there are user's filters, slicers, or other data view changes applied on the report. If persistent filters is disable, returns false.

report.arePersistentFiltersApplied();

function arePersistentFiltersApplied(): Promise<boolean>

Returns

Promise<boolean>

Inherited From Report.arePersistentFiltersApplied

clearSelectedVisuals(boolean)

Clears selected not popped out visuals, if flag is passed, all visuals selections will be cleared.

report.clearSelectedVisuals()
 .then(() => {
     ...
 });

function clearSelectedVisuals(clearPopOutState?: boolean): Promise<void>

Parameters

clearPopOutState: boolean

If false / undefined visuals selection will not be cleared if one of visuals is in popped out state (in focus, show as table, spotlight...)

Returns

Promise<void>

Inherited From Report.clearSelectedVisuals

closeAllOverlays()

Closes all open context menus and tooltips.

report.closeAllOverlays()
 .then(() => {
     ...
 });

function closeAllOverlays(): Promise<void>

Returns

Promise<void>

Inherited From Report.closeAllOverlays

configChanged(boolean)

Handle config changes.

function configChanged(isBootstrap: boolean)

Parameters

isBootstrap: boolean

Inherited From Report.configChanged

deletePage(string)

Delete a page from a report

// Delete a page from a report by pageName (PageName is different than the display name and can be acquired from the getPages API)
report.deletePage("ReportSection145");

function deletePage(pageName: string): Promise<void>

Parameters

pageName: string

Returns

Promise<void>

Inherited From Report.deletePage

exitFullscreen()

Requests the browser to exit fullscreen mode.

function exitFullscreen()

Inherited From Report.exitFullscreen

fullscreen()

Requests the browser to render the component's iframe in fullscreen mode.

function fullscreen()

Inherited From Report.fullscreen

getActivePage()

Gets the active report page.

report.getActivePage()
 .then(activePage => {
     ...
 });

function getActivePage(): Promise<Page>

Returns

Promise<Page>

Inherited From Report.getActivePage

getCorrelationId()

Get the correlationId for the current embed session.

// Get the correlationId for the current embed session
report.getCorrelationId()
  .then(correlationId => {
    ...
  });

function getCorrelationId(): Promise<string>

Returns

Promise<string>

Inherited From Report.getCorrelationId

getId()

Gets the report ID from the first available location: options, attribute, embed url.

function getId(): string

Returns

string

Inherited From Report.getId

getPageByName(string)

Gets a report page by its name.

report.getPageByName(pageName)
 .then(page => {
     ...
 });

function getPageByName(pageName: string): Promise<Page>

Parameters

pageName: string

Returns

Promise<Page>

Inherited From Report.getPageByName

getTheme()

get the theme of the report

report.getTheme();

function getTheme(): Promise<IReportTheme>

Returns

Promise<IReportTheme>

Inherited From Report.getTheme

getZoom()

Return the current zoom level of the report.

function getZoom(): Promise<number>

Returns

Promise<number>

Inherited From Report.getZoom

isSaved()

checks if the report is saved.

report.isSaved()

function isSaved(): Promise<boolean>

Returns

Promise<boolean>

Inherited From Report.isSaved

moveVisual(string, string, number, number, number)

Updates the position of a visual in a page.

report.moveVisual(pageName, visualName, x, y, z)
  .catch(error => { ... });

function moveVisual(pageName: string, visualName: string, x: number, y: number, z?: number): Promise<IHttpPostMessageResponse<void>>

Parameters

pageName: string

visualName: string

x: number

y: number

z: number

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.moveVisual

off<T>(string, IEventHandler<T>)

Removes one or more event handlers from the list of handlers. If a reference to the existing handle function is specified, remove the specific handler. If the handler is not specified, remove all handlers for the event name specified.

report.off('pageChanged')

or

const logHandler = function (event) {
   console.log(event);
};

report.off('pageChanged', logHandler);

function off<T>(eventName: string, handler?: IEventHandler<T>)

Parameters

eventName: string

handler: IEventHandler<T>

Inherited From Report.off

on<T>(string, IEventHandler<T>)

Adds an event handler for a specific event.

report.on('pageChanged', (event) => {
  console.log('PageChanged: ', event.page.name);
});

function on<T>(eventName: string, handler: IEventHandler<T>)

Parameters

eventName: string

handler: IEventHandler<T>

Inherited From Report.on

print()

Prints the active page of the report by invoking window.print() on the embed iframe component.

function print(): Promise<void>

Returns

Promise<void>

Inherited From Report.print

refresh()

Refreshes data sources for the report.

report.refresh();

function refresh(): Promise<void>

Returns

Promise<void>

Inherited From Report.refresh

reload()

Reloads embed using existing configuration. E.g. For reports this effectively clears all filters and makes the first page active which simulates resetting a report back to loaded state.

report.reload();

function reload(): Promise<void>

Returns

Promise<void>

Inherited From Report.reload

removeComponentTabIndex(number)

Removes element's tabindex attribute

function removeComponentTabIndex(_tabIndex?: number)

Parameters

_tabIndex: number

Inherited From Report.removeComponentTabIndex

removeContextMenuCommand(string, string)

Remove context menu extension command.

report.removeContextMenuCommand(commandName, contextMenuTitle)
 .catch(error => {
     ...
 });

function removeContextMenuCommand(commandName: string, contextMenuTitle: string): Promise<IHttpPostMessageResponse<void>>

Parameters

commandName: string

contextMenuTitle: string

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.removeContextMenuCommand

removeOptionsMenuCommand(string, string)

Remove options menu extension command.

report.removeOptionsMenuCommand(commandName, optionsMenuTitle)
 .then({
     ...
 });

function removeOptionsMenuCommand(commandName: string, optionsMenuTitle: string): Promise<IHttpPostMessageResponse<void>>

Parameters

commandName: string

optionsMenuTitle: string

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.removeOptionsMenuCommand

renamePage(string, string)

Rename a page from a report

// Rename a page from a report by changing displayName (pageName is different from the display name and can be acquired from the getPages API)
report.renamePage("ReportSection145", "Sales");

function renamePage(pageName: string, displayName: string): Promise<void>

Parameters

pageName: string

displayName: string

Returns

Promise<void>

Inherited From Report.renamePage

resetPersistentFilters()

Reset user's filters, slicers, and other data view changes to the default state of the report

report.resetPersistentFilters();

function resetPersistentFilters(): Promise<IHttpPostMessageResponse<void>>

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.resetPersistentFilters

resetTheme()

Reset and apply the default theme of the report

report.resetTheme();

function resetTheme(): Promise<void>

Returns

Promise<void>

Inherited From Report.resetTheme

resizeActivePage(PageSizeType, number, number)

Updates the size of active page in report.

report.resizeActivePage(pageSizeType, width, height)
  .catch(error => { ... });

function resizeActivePage(pageSizeType: PageSizeType, width?: number, height?: number): Promise<IHttpPostMessageResponse<void>>

Parameters

pageSizeType: PageSizeType

width: number

height: number

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.resizeActivePage

resizeVisual(string, string, number, number)

Resize a visual in a page.

report.resizeVisual(pageName, visualName, width, height)
  .catch(error => { ... });

function resizeVisual(pageName: string, visualName: string, width: number, height: number): Promise<IHttpPostMessageResponse<void>>

Parameters

pageName: string

visualName: string

width: number

height: number

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.resizeVisual

save()

Saves Report.

function save(): Promise<void>

Returns

Promise<void>

Inherited From Report.save

saveAs(ISaveAsParameters)

SaveAs Report.

function saveAs(saveAsParameters: ISaveAsParameters): Promise<void>

Parameters

saveAsParameters: ISaveAsParameters

Returns

Promise<void>

Inherited From Report.saveAs

savePersistentFilters()

Save user's filters, slicers, and other data view changes of the report

report.savePersistentFilters();

function savePersistentFilters(): Promise<IHttpPostMessageResponse<void>>

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.savePersistentFilters

setAccessToken(string)

Set accessToken.

function setAccessToken(accessToken: string): Promise<void>

Parameters

accessToken: string

Returns

Promise<void>

Inherited From Report.setAccessToken

setComponentTabIndex(number)

Sets element's tabindex attribute

function setComponentTabIndex(tabIndex?: number)

Parameters

tabIndex: number

Inherited From Report.setComponentTabIndex

setComponentTitle(string)

Set the component title for accessibility. In case of iframes, this method will change the iframe title.

function setComponentTitle(title: string)

Parameters

title: string

Inherited From Report.setComponentTitle

setVisualDisplayState(string, string, VisualContainerDisplayMode)

Updates the display state of a visual in a page.

report.setVisualDisplayState(pageName, visualName, displayState)
  .catch(error => { ... });

function setVisualDisplayState(pageName: string, visualName: string, displayState: VisualContainerDisplayMode): Promise<IHttpPostMessageResponse<void>>

Parameters

pageName: string

visualName: string

displayState: VisualContainerDisplayMode

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.setVisualDisplayState

setZoom(number)

Sets the report's zoom level.

function setZoom(zoomLevel: number): Promise<void>

Parameters

zoomLevel: number

zoom level to set

Returns

Promise<void>

Inherited From Report.setZoom

switchLayout(LayoutType)

Updates the report layout

report.switchLayout(layoutType);

function switchLayout(layoutType: LayoutType): Promise<IHttpPostMessageResponse<void>>

Parameters

layoutType: LayoutType

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.switchLayout

switchMode(string | ViewMode)

Switch Report view mode.

function switchMode(viewMode: string | ViewMode): Promise<void>

Parameters

viewMode: string | ViewMode

Returns

Promise<void>

Inherited From Report.switchMode

updateSettings(ISettings)

Updates visibility settings for the filter pane and the page navigation pane.

const newSettings = {
  panes: {
    filters: {
      visible: false
    }
  }
};

report.updateSettings(newSettings)
  .catch(error => { ... });

function updateSettings(settings: ISettings): Promise<IHttpPostMessageResponse<void>>

Parameters

settings: ISettings

Returns

Promise<IHttpPostMessageResponse<void>>

Inherited From Report.updateSettings