UI Functions

This is a collection of UI features, which are especially interesting if you want to interact with your user.
I.e. you can show WaitCursors while requesting data or dialogs for displaying some data.
See the full list below.

Table of Contents

1. WaitCursor
2. FloatingButton
3. Overlay

WaitCursor

Shows a circular wait cursor in the center of the screen, colored in the Tapps colorscheme.

Supported Platforms

• Android
• iOS
• ChaynsWeb

---

chayns.showWaitCursor(text, timeout, action, {progress, progressText} = {})

Shows the WaitCursor. After the timeout (default 5 seconds) the wait cursor will show a text.

Parameter

• text (optional) : string - The Text that will be shown after the timeout.
• timeout (optional) : int - The time, after the wait cursor will show the text.
• progress (optional) : int - progress of the progress bar
• progressText (optional) : string - Text under the progress bar

chayns.showWaitCursor()

---

chayns.hideWaitCursor(disappearTimeout)

Hides the wait cursor.

Parameter

• disappearTimeout (optional) : number - The time after the waitcursor disappears.

chayns.hideWaitCursor(disappearTimeout)

Floating Button

Function to display and hide the floating button. The floating button is fixed in its position and wont move on scroll. It may be customized with given parameters and is placed on the bottom right display.

Supported Platforms

• Android
• iOS
• ChaynsWeb

---

chayns.showFloatingButton(config)

Shows or updates the floating button.

Parameter

• config : object - An object that contains the other parameters.
• callback : function - Will be executed onClick.
• text (optional) : string - Text set inside the button. Replaces the icon.
• color (optional) : string - ARGB hex-value sets the color of the icon.
• colorText (optional) : string - ARGB hex-value sets the color of the icons text.
• icon (optional) : string - Use FontAwesome or FontTS as icon ('fa-' or 'ts-'). The icon will be replaced, if the text property is set. Reference: http://fortawesome.github.io/Font-Awesome/3.2.1/icons/
• position (optional) : int - chayns.floatingButtonPosition.LEFT/CENTER/RIGHT

chayns.showFloatingButton({
  'color': '#225252',
  'icon': 'ts-tobit',
  'position': chayns.floatingButtonPosition.CENTER
}, () => {
  chayns.dialog.alert('', 'FloatingButton pressed');
});

---

chayns.hideFloatingButton()

Hides the floating button.

chayns.hideFloatingButton();

Overlay

Function to display and hide the overlay. The overlay will be visible over the entire page.

Supported Platforms

• Android
• iOS
• ChaynsWeb

---

chayns.showOverlay(color, transition)

Shows or updates the Overlay.

Parameter

• color (optional) : string - ARGB hex-value sets the color of the Overlay.
• transition (optional) : string - Transition duration in seconds e.g. '2s'.

chayns.showOverlay('#0f225252', '2s');

---

chayns.hideOverlay(transition)

Hides the overlay.

Parameter

• transition (optional) : string - Transition duration in seconds e.g. '2s'.

chayns.hideOverlay('3s');