Class: AppSkin

componyx .UI.AppSkin(id, properties) → {componyx.UI.AppSkin}

new AppSkin(id, properties) → {componyx.UI.AppSkin}

AppSkin class.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Properties:

Name	Type	Description
`ajax.authenticate`	componyx.UI.base.AjaxMethod	AJAX method used to authenticate.
`ajax.search`	componyx.UI.base.AjaxMethod	AJAX method used to load search results.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: componyx.UI.AppSkin

Extends

componyx.UI.base.Component

Classes

AppSkinEvents
MenuItem

Members

accountAction :function|String

Gets or sets the action of the account button.

Type:

function | String

accountButtonAvatar :Boolean

Gets or sets a value indicating if the account button is displayed as avatar when the user is authenticated.

Type:

Boolean

accountButtonId :String|null

Gets or sets the id of the button component used as base for the account button.

Type:

String | null

authenticated :Boolean

Gets a value indicating if the user is authenticated.

Type:

Boolean

authenticationFailureLabel :String

Gets or sets the default label for an authentication failure.

Type:

String

authenticationFailureReasonLabels :Array.<String>

Gets or sets the labels for the authentication failure reasons.

Type:

Array.<String>

authenticationRequired :Boolean

Gets or sets a value indicating if authentication is required.

Type:

Boolean

avatarImagePath :String

Gets or sets the account button avatar image path.

Type:

String

avatarInitials :String

Gets or sets the account button avatar initials.

Type:

String

(constant) classOption :Readonly.<Object.<string, string>>

Internal CSS class name constants. You can override any of these classes on the Component instance by defining a property named cssClass<Key> where is the PascalCase key from this object. Example: 'SEARCH_RESULT' -> 'cssClassSearchResult' Be cautious: overriding these classes without including the default names may break styling and functionality.

Type:

Readonly.<Object.<string, string>>

crsfToken :String|null

Gets or sets the CRSF Token to send with autorisation POST actions.

Type:

String | null

events :componyx.UI.AppSkin.AppSkinEvents

AppSkin events

Type:

componyx.UI.AppSkin.AppSkinEvents

footerDisplay :componyx.UI.AppSkin.FooterDisplayOption

Gets or sets a value indicating when the footer is displayed.

Type:

componyx.UI.AppSkin.FooterDisplayOption

footerMenuId :String|null

Gets or sets the id of the menu component used as base for the footer menu.

Type:

String | null

fullpage :Boolean

Gets or sets a value indicating if the page content utilizes the full-screen width when not in full-screen mode.

Type:

Boolean

fullscreen :Boolean

Gets or sets a value indicating if the contents of the app skin will utilize the full-screen width.

Type:

Boolean

headerMenuId :String|null

Gets or sets the id of the menu component used as base for the header menu.

Type:

String | null

hideMenuButtonOnLogin :Boolean

Gets a value indicating if the menu button is displayed when the app-skin login page is active.

Type:

Boolean

launchMenu :Boolean

Gets a value indicating if the menu is displayed on app launch.

Type:

Boolean

loadingLabel :String

Gets or sets the Loading text label.

Type:

String

loginButtonId :String|null

Gets or sets the id of the button component used as base for the login button.

Type:

String | null

loginButtonLabel :String

Gets or sets the text label of the login button.

Type:

String

mainCategoryLabel :String

Gets or sets the text label of the main category.

Type:

String

mainMenuId :String|null

Gets or sets the id of the menu component used as base for the main menu.

Type:

String | null

Gets or sets the list of menu-items.

Type:

Array.<componyx.UI.AppSkin.MenuItem>

menuButtonId :String|null

Gets or sets the id of the button component used as base for the menu button.

Type:

String | null

menuLeft :Boolean

Gets or sets a value indicating if the side-menu displays at the right side (false) or the left side (true) of the screen.

Type:

Boolean

menuRoutePathMatching :componyx.UI.AppSkin.RoutePathMatchingOption

Gets or sets a value indicating if menu-items are automatically selected if the item's route-path (partially) matches the current URL route-path.

Type:

componyx.UI.AppSkin.RoutePathMatchingOption

menuType :componyx.UI.AppSkin.MenuTypeOption

Gets or sets the menu navigation type (portal-menu or side-menu).

Type:

componyx.UI.AppSkin.MenuTypeOption

passwordFormFieldId :String|null

Gets or sets the id of the form-field component used as base for the password form field.

Type:

String | null

passwordLabel :String

Gets or sets the Password text label.

Type:

String

persistentMenuButton :Boolean

Gets or sets a value indicating if the menu button is always visible (true) or is hidden when the all menu-items are visible in the header-menu.

Type:

Boolean

persistentTopBar :Boolean

Gets or sets a value indicating if the top-bar in the header is always visible (true) or is hidden when the portal-menu is active (false).

Type:

Boolean

quickLaunchMenuId :String|null

Gets or sets the id of the menu component used as base for the quick launch menu.

Type:

String | null

rememberMeFormFieldId :String|null

Gets or sets the id of the form-field component used as base for the remember-me form field.

Type:

String | null

rememberMeLabel :String

Gets or sets the RememberMe text label.

Type:

String

searchCategoryLabels :Object

Gets or sets the category labels for the search-results. Use empty string key for root label.

Type:

Object

searchDelay :Number

Gets or sets the delay in milliseconds before the typed letter(s) in the search-box are sent to the server.

Type:

Number

searchLabel :String

Gets or sets the search-box placeholder label.

Type:

String

searchNoResultLabel :String

Gets or sets the label when no search results are found.

Type:

String

showRememberMe :Boolean

Gets or sets a value indicating if the rememeber me option is available for manual login.

Type:

Boolean

useBindary :Boolean

Gets or sets a value indicating if the Bindary framework is used for loading routes.

Type:

Boolean

useLoginTemplate :Boolean

Gets or sets a value indicating if the login template is created when rendering the app skin.

Type:

Boolean

username :String

Gets or sets the username of the authenticated user.

Type:

String

usernameFormFieldId :String|null

Gets or sets the id of the form-field component used as base for the username form field.

Type:

String | null

usernameLabel :String

Gets or sets the Username text label.

Type:

String

verificationButtonId :String|null

Gets or sets the id of the button component used as base for the login-verification button.

Type:

String | null

verificationButtonLabel :String

Gets or sets the text label of the login-verification button.

Type:

String

verificationCodeFormFieldId :String|null

Gets or sets the id of the form-field component used as base for the verification code form field.

Type:

String | null

verificationCodeLabel :String

Gets or sets the text label of the login verification code.

Type:

String

verificationCodeLength :Number

Gets or sets the input field length of the login verification code.

Type:

Number

verificationFailedReloadDelay :Number

Gets or sets the delay in milliseconds before the app is reloaded when the login verification failed.

Type:

Number

(static, readonly) AuthenticationStateOption :number

AuthenticationStateOption

Type:

number

Properties:

Name	Type	Description
`UNAUTHENTICATED`	number	The user is not authenticated.
`CREDENTIALS_VALIDATED`	number	The credentials have been successfully validated but the user is not yet authenticated (Step 1 in Two-Factor authentication).
`AUTHENTICATED`	number	The user is successfully authenticated.

(static, readonly) FailureReasonOption :number

FailureReasonOption

Type:

number

Properties:

Name	Type	Description
`CRSF_TOKEN_MISMATCH`	number	Provided CRSF Token does not match with token in Session object.
`MAX_SIGNIN_ATTEMPTS_EXCEEDED`	number	Total attempts exceeded configured max sign-in attempts.
`USERNAME_OR_PASSWORD_MISMATCH`	number	Provided username and/or password do not match.
`VERIFICATION_CODE_MISMATCH`	number	Provided verificatin code does not match.
`VERIFICATION_CODE_EXPIRED`	number	The generated verification-code has expired.
`MAX_VERIFY_ATTEMPTS_EXCEEDED`	number	Total attempts exceeded the configured max verify code attempts.
`OTHER`	number	Other reason
`getName`	number

(static, readonly) FooterDisplayOption :number

FooterDisplayOption

Type:

number

Properties:

Name	Type	Description
`DISABLED`	number	the footer is not visible
`MENU`	number	the footer is visible when the menu is visible
`PERSISTENT`	number	the footer is always visible

(static, readonly) MenuSectionOption :number

MenuSectionOption

Type:

number

Properties:

Name	Type	Description
`HEADER`	number	the menu-item will be rendered in the header and main menu-sections
`MAIN`	number	the menu-item will be rendered in the main menu-section
`FOOTER`	number	the menu-item will be rendered in the footer menu-section
`QUICKLAUNCH`	number	the menu-item will be rendered in the quick-launch menu-section

(static, readonly) MenuTypeOption :number

MenuTypeOption

Type:

number

Properties:

Name	Type	Description
`PORTALMENU`	number	the main menu is displayed as portal navigation
`SIDEMENU`	number	the main menu is displayed as side navigation

(static, readonly) RoutePathMatchingOption :number

RoutePathMatchingOption

Type:

number

Properties:

Name	Type	Description
`DISABLED`	number	there is no menu-item route-path matching
`EXACT`	number	matches if the item's route-path equals the current URL route-path exactly
`PARTIAL`	number	matches if the item's route-path equals the current URL route-path while ignoring possible parameters preceded by a question mark character.

(static, readonly) ScreenOption :number

ScreenOption

Type:

number

Properties:

Name	Type	Description
`LOGIN`	number	the login screen is visible
`LOGIN_VERIFICATION`	number	the login verification screen is visible
`PORTAL`	number	the portal navigation screen is visible
`PAGE`	number	the page is visible

(static, readonly) TileSizeOption :number

ButtonTileSizeOption

Type:

number

Properties:

Name	Type	Description
`SMALL`	number	renders the menu-item button as small tile in the portal-menu
`SMALL_WIDE`	number	renders the menu-item button as small-wide tile in the portal-menu
`MEDIUM`	number	renders the menu-item button as medium tile in the portal-menu
`MEDIUM_WIDE`	number	renders the menu-item button as medium-wide tile in the portal-menu
`LARGE`	number	renders the menu-item button as large tile in the portal-menu
`getName`	number

Methods

activeScreen() → {componyx.UI.AppSkin.ScreenOption}

Gets the active screen.

Returns:

The active screen.

Type: componyx.UI.AppSkin.ScreenOption

checkHeaderOverflow()

Processes the header overflow tasks.

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

getCssClass(cssClassValue) → {String}

Gets the css class if it exists and otherwise the default css class.

Parameters:

Name	Type	Description
`cssClassValue`	String	The default css class (a value of the classOption object).

Returns:

The css class.

Type: String

getFooterMenu() → {componyx.UI.Menu}

Gets the footer menu.

Returns:

The footer menu component.

Type: componyx.UI.Menu

getHeaderMenu() → {componyx.UI.Menu}

Gets the header menu.

Returns:

The header menu component.

Type: componyx.UI.Menu

getMainMenu() → {componyx.UI.Menu}

Gets the main menu.

Returns:

The main menu component.

Type: componyx.UI.Menu

getQuickLaunchMenu() → {componyx.UI.Menu}

Gets the quick-launch menu.

Returns:

The quick-launch menu component.

Type: componyx.UI.Menu

hasError() → {Boolean}

Checks if the error screen is active.

Returns:

A value indicating if an error occurred.

Type: Boolean

hideMenu(instantopt)

Hides the main menu.

Parameters:

Name	Type	Attributes	Description
`instant`	Boolean	<optional>	A value indicating if the menu should be shown instantly without animation. Only applicable for side menu.

launch()

Shows the intial page based upon the defined properties.

Log's the user in.

Parameters:

Name	Type	Attributes	Description
`settings`	Object	<optional>	The login settings to send to the authentication handler. By default input values (string username, string password, boolean persistent) from the login-screen are sent to the authentication handler.

logout(settingsopt)

Log's the user out.

Parameters:

Name	Type	Attributes	Description
`settings`	Object	<optional>	The logout settings to send to the authentication handler. By default boolean logout:true is sent to the authentication handler.

postRender()

Handles the post render procedure.

preloader() → {componyx.UI.Box}

Gets the preloader.

Returns:

The preloader box component.

Type: componyx.UI.Box

render()

Renders the component

search(terms)

Initiates a search request.

Parameters:

Name	Type	Description
`terms`	String	The search terms.

setErrorTemplate(content)

Sets the error template. The error template supports the below listed interpolations.

{message} This value will be replaced with the error message.
{timestamp} This value will be replaced with the error timestamp (optional).
{id} This value will be replaced with the error identifier (optional).
{stackTrace} This value will be replaced with the error stack trace (optional).

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setFooterTemplate(content)

Sets the footer template. This template supports the below listed interpolations. Default value: {menu}{username}{loginButton}

{logo} This value will be replaced with the figure element.
{accountButton} When authenticated this value will be replaced with the account button otherwise it will open the login screen.
{menu} This value will be replaced with the footer menu, containing all menu-items with menuSection set to FOOTER.
{quickLaunchMenu} This value will be replaced with the quick-launch menu, containing all menu-items with menuSection set to QUICKLAUNCH
{username} This value will be replaced with the username of the logged in user.
{searchBox} This value will be replaced with the search-box.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setFullpage(value)

Sets a value indicating if the page content utilizes the full-screen width when not in full-screen mode.

Parameters:

Name	Type	Description
`value`	Boolean	A value indicating if the page content container utilizes the full width of the screen.

setFullscreen(value)

Sets a value indicating if the app skin utilizes the full width of the screen.

Parameters:

Name	Type	Description
`value`	Boolean	A value indicating if the appskin utilizes the full width of the screen.

setHeaderTemplate(content)

Sets the header template. This template supports the below listed interpolations. Default value: {logo}{quickLaunchMenu}{menuButton}{topbar}{menu}{/topbar}

{topbar} This value will be replaced with the opening topbar element tag.
{/topbar} This value will be replaced with the closing topbar element tag.
{logo} This value will be replaced with the figure element.
{menuButton} This value will be replaced with the menu button.
{accountButton} When authenticated this value will be replaced with the account button otherwise it will open the login screen.
{menu} This value will be replaced with the header menu, containing all menu-items with menuSection set to either MAIN_HEADER or HEADER.
{quickLaunchMenu} This value will be replaced with the quick-launch menu, containing all menu-items with menuSection set to QUICKLAUNCH
{username} This value will be replaced with the username of the logged in user.
{searchBox} This value will be replaced with the search-box.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setLoginTemplate(content)

Sets the login template. This template supports the below listed interpolations. Default value: {logo}{username}{password}{rememberMe}{loginButton}{failedMessage}

{logo} This value will be replaced with the figure element.
{username} This value will be replaced with the username input field.
{password} This value will be replaced with the password input field.
{rememberMe} This value will be replaced with the remember-me checkbox.
{loginButton} This value will be replaced with the login button.
{failedMessage} This value will be replaced with the message displayed when a login attempt failed.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setLoginVerificationTemplate(content)

Sets the login verification template. This template supports the below listed interpolations. Default value: {logo}{verificationCode}{verificationButton}{failedMessage}

{logo} This value will be replaced with the figure element.
{verificationCode} This value will be replaced with the verification-code input field.
{verificationButton} This value will be replaced with the verification button.
{failedMessage} This value will be replaced with the message displayed when a verification attempt failed.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setNotFoundTemplate(content)

Sets the not found template, shown when the requested page does not exist: no route matches the URL, or the page request returns 404 or 410. The not found template supports the below listed interpolations.

{status} This value will be replaced with the HTTP status of the page request, when there was one (optional).

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setPageFooterTemplate(content)

Sets the page footer template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setPageHeaderTemplate(content)

Sets the page header template.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

setSidebarTemplate(content)

Sets the sidebar template. This template supports the below listed interpolations.

{logo} This value will be replaced with the figure element.
{menuButton} This value will be replaced with the menu button.
{accountButton} When authenticated this value will be replaced with the account button otherwise it will open the login screen.
{quickLaunchMenu} This value will be replaced with the quick-launch menu, containing all menu-items with menuSection set to QUICKLAUNCH
{username} This value will be replaced with the username of the logged in user.
{searchBox} This value will be replaced with the search-box.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The HTML template.

showLogin()

Shows the login page.

showLoginVerification()

Shows the login verification page.

showMenu(instantopt)

Shows the main menu.

Parameters:

Name	Type	Attributes	Description
`instant`	Boolean	<optional>	A value indicating if the menu should be shown instantly without animation. Only applicable for side menu.

showPage(hideError)

Shows the page.

Parameters:

Name	Type	Description
`hideError`	Boolean	Hides the error screen if active.

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.

Parameters:

Name	Type	Description
`action`	function	The action to execute with change events suppressed.

Mixes In:

componyx.UI.base.methods.suppressNextChangeEvent

toggleMenu()

Toggles the display of the main menu.

updateMenuState(routePath, hashtagRoutesopt)

Updates the menu state to the active route path. The corresponding menu items are selected / expanded based on the menuRoutePathMatching setting.

Parameters:

Name	Type	Attributes	Description
`routePath`	String		The active route path. The route path may end with a page anchor.
`hashtagRoutes`	String	<optional>	A value indicating if hashtag routes are used, in other words, the route-path follows the first hashtag.

verifyCode(settingsopt)

Verifies the login verification code.

Parameters:

Name	Type	Attributes	Description
`settings`	Object	<optional>	The login settings to send to the authentication handler. By default the input value (string verificationCode) from the login-verification-screen is sent to the authentication handler.

Type Definitions

AuthenticationResponseEventArgs

Type:

Object

Properties:

Name	Type	Attributes	Default	Description
`authenticationState`	AuthenticationStateOption			The authentication state.
`failureReason`	FailureReasonOption			The reason why the authentication attempt failed.
`failureMessage`	String			The failure message.
`cancel`	Boolean	<optional>	false	A value indicating if the default action of the AppSkin component should be canceled.

ResizeActionEventArgs

Type:

Object

Properties:

Name	Type	Attributes	Default	Description
`headerOverflow`	Boolean			A value indicating if the content in the header caused an overflow.
`cancel`	Boolean	<optional>	false	A value indicating if the default action of the AppSkin component should be canceled.

SearchResultEventArgs

Type:

Object

Properties:

Name	Type	Attributes	Description
`data`	Array.<Object>		The search results.
`container`	HTMLElement		The search results container element.
`anchor`	HTMLElement	<optional>	The seach result element.
`item`	Object	<optional>	The seach result item.

SearchResultsEventArgs

Type:

Object

Properties:

Name	Type	Attributes	Default	Description
`data`	Array.<Object>			The search results.
`container`	HTMLElement			The search results container element.
`cancel`	Boolean	<optional>	false	A value indicating if the default action of the AppSkin component should be canceled.