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>

PasswordEditModal

Description
Component renders modal that allow user change password. Modal might be opened with "Change password" option in <a href="#NavUserMenu">NavUserMenu</a> </br><strong>Note!</strong> 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>