Rapid Portal Documentation

BackgroundVisual

Description

Displays selected background.

Example

<z-background-visual/>

Props

Name	Description	Type	Default	Values
src	Defines background image or video	string	null	Any
`<z-background-visual src="https://example.com/image.png" ></z-background-visual>`
color	Defines background color in hex form	string	null	Any
`<z-background-visual color="#FFFFFF" ></z-background-visual>`

Customizer

Description

Component provides GUI to edit basic appearence of the Rapid Portal.

Example

<z-customizer/>

FileUpload

Description

Drag'n'Drop area to upload files to local server.

Example

<z-file-upload/>

Events

Name	Description	Properties
uploaded	Fired when file have been uploaded.	file: object - File model.
`<z-file-upload @uploaded="eventHandler" ></z-file-upload>`

LoginError

Description

Component displays error on login page.

Example

<z-login-error/>

LoginPasswordInput

Description

Component displays input that allow user to enter password.

Example

<z-login-password-input/>

Props

Name	Description	Type	Default	Values
required	Makes input required.	boolean	true	Any
`<z-login-password-input required ></z-login-password-input>`
label	Text will be displayed as input's placeholder.	string	'Password'	Any
`<z-login-password-input label="Example" ></z-login-password-input>`
myClass	Adds class to input element.	string	—	Any
`<z-login-password-input my-class="Example" ></z-login-password-input>`

LoginSubmitButton

Description

Component sends login request.

Example

<z-login-submit-button/>

Props

Name	Description	Type	Default	Values
buttonText	Text will be displied on the button.	string	'Log in'	Any
`<z-login-submit-button button-text="Sign In" ></z-login-submit-button>`
textColor	Color of the text.	string	'black'	Any
`<z-login-submit-button text-color="#FFFFFF" ></z-login-submit-button>`
myClass	Adds class to button element.	string	—	Any
`<z-login-submit-button my-class="Example" ></z-login-submit-button>`

LoginTableauServerSiteInput

Description

Component displays input that allow user to enter Tableau's Server Site.

Example

<z-login-tableau-server-site-input/>

Props

Name	Description	Type	Default	Values
required	Makes input required.	boolean	false	Any
`<z-login-tableau-server-site-input required ></z-login-tableau-server-site-input>`
label	Text will be displayed as input's placeholder.	string	'Tableau Site'	Any
`<z-login-tableau-server-site-input label="Example" ></z-login-tableau-server-site-input>`
myClass	Adds class to input element.	string	—	Any
`<z-login-tableau-server-site-input my-class="Example" ></z-login-tableau-server-site-input>`

LoginTableauServerUrlInput

Description

Component displays input that allow user to enter Tableau's Server Url.

Example

<z-login-tableau-server-url-input/>

Props

Name	Description	Type	Default	Values
required	Makes input required.	boolean	false	Any
`<z-login-tableau-server-url-input required ></z-login-tableau-server-url-input>`
label	Text will be displayed as input's placeholder.	string	'Tableau Server URL'	Any
`<z-login-tableau-server-url-input label="Example" ></z-login-tableau-server-url-input>`
myClass	Adds class to input element.	string	—	Any
`<z-login-tableau-server-url-input my-class="Example" ></z-login-tableau-server-url-input>`

LoginUsernameInput

Description

Component displays input that allow user to enter username.

Example

<z-login-username-input/>

Props

Name	Description	Type	Default	Values
required	Makes input required.	boolean	true	Any
`<z-login-username-input required ></z-login-username-input>`
label	Text will be displayed as input's placeholder.	string	'Username'	Any
`<z-login-username-input label="Example" ></z-login-username-input>`
myClass	Adds class to input element.	string	—	Any
`<z-login-username-input my-class="Example" ></z-login-username-input>`

Logo

Description

Component displays image that was selected as logo in Customizer component.

Example

<z-logo/>

Props

Name	Description	Type	Default	Values
width	Width of the image.	number	—	Any
`<z-logo width="100" ></z-logo>`
height	Height of the image.	number	—	Any
`<z-logo height="100" ></z-logo>`

NavDownloadButton

Description

Component displays button with dropdown that contain multiple download options.

Example

<z-nav-download-button/>

Props

Name	Description	Type	Default	Values
variant	Bootstrap button variant.	string	'primary'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-nav-download-button variant="primary" ></z-nav-download-button>`
crosstabToCsv	Should "CrossTab to CSV" item be visible	boolean	true	Any
`<z-nav-download-button crosstab-to-csv="false" ></z-nav-download-button>`
crosstabToExcel	Should "CrossTab to Excel" item be visible	boolean	true	Any
`<z-nav-download-button crosstab-to-excel="false" ></z-nav-download-button>`
data	Should "Data" item be visible	boolean	true	Any
`<z-nav-download-button data="false" ></z-nav-download-button>`
image	Should "Image" item be visible	boolean	true	Any
`<z-nav-download-button image="false" ></z-nav-download-button>`
pdf	Should "PDF" item be visible	boolean	true	Any
`<z-nav-download-button pdf="false" ></z-nav-download-button>`
powerpoint	Should "PowerPoint" item be visible	boolean	true	Any
`<z-nav-download-button powerpoint="false" ></z-nav-download-button>`

NavDownloadDialogButton

Description

Component displays button taht invoke Tableau download dialog.

Example

<z-nav-download-dialog-button/>

Props

Name	Description	Type	Default	Values
variant	Bootstrap button variant.	string	'primary'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-nav-download-dialog-button variant="primary" ></z-nav-download-dialog-button>`

NavFullscreenButton

Description

Component displays button that open current Tableau Viz in fullsreen mode.

Example

<z-nav-fullscreen-button/>

Props

Name	Description	Type	Default	Values
variant	Bootstrap button variant.	string	'primary'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-nav-fullscreen-button variant="primary" ></z-nav-fullscreen-button>`

NavPlayPauseButton

Description

Component displays button that pauses or resume Tableau's automatic updates.

Example

<z-nav-play-pause-button/>

Props

Name	Description	Type	Default	Values
variant	Bootstrap button variant.	string	'primary'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-nav-play-pause-button variant="primary" ></z-nav-play-pause-button>`

NavRedoButton

Description

Component displays button that redo Tableau's action.

Example

<z-nav-redo-button/>

Props

Name	Description	Type	Default	Values
variant	Bootstrap button variant.	string	'primary'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-nav-redo-button variant="primary" ></z-nav-redo-button>`

NavRefreshButton

Description

Component displays button that refresh Tableau Viz data.

Example

<z-nav-refresh-button/>

Props

Name	Description	Type	Default	Values
variant	Bootstrap button variant.	string	'primary'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-nav-refresh-button variant="primary" ></z-nav-refresh-button>`

NavRevertButton

Description

Component displays button that revert Tableau Viz action.

Example

<z-nav-revert-button/>

Props

Name	Description	Type	Default	Values
variant	Text will be displayed as input's placeholder.	string	'primary'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-nav-revert-button label="primary" ></z-nav-revert-button>`

NavShareButton

Description

Component displays button that open dropdown with share link.

Example

<z-nav-share-button/>

Props

Name	Description	Type	Default	Values
variant	Bootstrap button variant.	string	'primary'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-nav-share-button variant="primary" ></z-nav-share-button>`

NavUndoButton

Description

Component displays button that undo Tableau Viz action.

Example

<z-nav-undo-button/>

Props

Name	Description	Type	Default	Values
variant	Bootstrap button variant.	string	'primary'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-nav-undo-button variant="primary" ></z-nav-undo-button>`

NavUserMenu

Description

Component displays button with dropdown that provides list users action. Note! Some options require user to be an Admin or some specific component to be presented on the same page.

Example

<z-nav-user-menu/>

Props

Name	Description	Type	Default	Values
variant	Bootstrap button variant.	string	'primary'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-nav-user-menu variant="primary" ></z-nav-user-menu>`

PasswordEditModal

Description

Component renders modal that allow user change password. Modal might be opened with "Change password" option in <a href="#NavUserMenu">NavUserMenu</a> Note! This component is required to "Change password" option appear in <a href="#NavUserMenu">NavUserMenu</a> component.

Example

<z-password-edit-modal/>

TableauViz

Description

Component uses TableauJS API to render Dashboards.

Example

<z-tableau-viz/>

Props

Name	Description	Type	Default	Values
initialViz	Tableau's Dashboard Url that will be use as initial value.	string	null	Any
`<z-tableau-viz initial-viz="https://tableau.server.com/dashboard_url" ></z-tableau-viz>`
view	Tableau's Dashboard Url that will be use as initial value.	string	null	Any
`<z-tableau-viz view="https://tableau.server.com/dashboard_url" ></z-tableau-viz>`
hideTabs	Passes this values to TableauJS Viz <a href="https://help.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_ref.htm#vizcreateoptions_record" target="_blank">options</a>	boolean	true	Any
`<z-tableau-viz hide-tabs="true" ></z-tableau-viz>`
hideToolbar	Passes this values to TableauJS Viz <a href="https://help.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_ref.htm#vizcreateoptions_record" target="_blank">options</a>	boolean	true	Any
`<z-tableau-viz hide-toolbar="true" ></z-tableau-viz>`
alignment	Passes this values to TableauJS Viz <a href="https://help.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_ref.htm#vizcreateoptions_record" target="_blank">options</a>	string	'left'	left, center
`<z-tableau-viz alignment="left" ></z-tableau-viz>`

UserEditModal

Description

Component renders modal that allow user change account data. Modal might be opened with clicking username in <a href="#NavUserMenu">NavUserMenu</a>

Example

<z-user-edit-modal/>

ViewList

Description

Component displays list of dashboards.

Example

<z-view-list/>

Props

Name	Description	Type	Default	Values
listType	Style of list items.	string	'cards'	cards, vertical
`<z-view-list list-type="cards" ></z-view-list>`
tags	List of tags separated by coma to filter dashboards by. Leave empty to apply tags specified in <a href="#Customizer">Customizer</a>	string	''	<any string>
`<z-view-list tags="tag1,tag2,tag3" ></z-view-list>`
favoriteIconVariant	Bootstrap variant styles applies to favorite icon.	string	'warning'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-view-list favorite-icon-variant="warning" ></z-view-list>`
groupBy	Method for grouping dashboards in the menu. Requires list-type="vertical".	string	'none'	none, project
`<z-view-list group-by="project" ></z-view-list>`

WorkbookList

Description

Component displays list of dashboards. Note: In order to work properly workbooks should have `showTabs` property to be enabled.

Example

<z-workbook-list/>

Props

Name	Description	Type	Default	Values
tags	List of tags separated by coma to filter dashboards by. Leave empty to apply tags specified in <a href="#Customizer">Customizer</a>	string	''	<any string>
`<z-workbook-list tags="tag1,tag2,tag3" ></z-workbook-list>`
favoriteIconVariant	Bootstrap variant styles applies to favorite icon.	string	'warning'	primary, secondary, success, danger, warning, info, light, dark, link
`<z-workbook-list favorite-icon-variant="warning" ></z-workbook-list>`
groupBy	Method for grouping workbooks in the menu.	string	'none'	none, project
`<z-workbook-list group-by="project" ></z-workbook-list>`