UI Functions

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. Dialog
2. ModeSwitch
3. WaitCursor
4. FloatingButton
5. Overlay

Dialog

The dialog functions offers you the opportunity to interact with the user as you can show five different customizable dialogs.

Supported Platforms

• Android
• iOS
• ChaynsWeb

Table of Contents

• alert
• confirm
• date
• select
• input

---

chayns.dialog.alert(title, message)

Shows an alert dialog with an 'ok-button'. Its promise returns the value 1, when the button is pressed.

Parameter

• title : string - The title shown as a headline on top of the dialog.
• message (optional) : string - The text shown below the title.

Result

• buttonType : int - Values: OK(1), Cancel(-1)

chayns.dialog.alert('Alert Dialog', 'This is an alert dialog')
  .then(function (data) { 
    console.log(data) 
  });

---

chayns.dialog.confirm(title, message, buttons)

Shows a confirm dialog. You can agree or disagree to this dialog. In the apps there is also the possibility to leave the dialog using the back button or by tapping outside the dialog window (confirmation type: cancel).

Parameter

• title : string - The title shown as a headline on top of the dialog.
• message (optional) : string - The text shown below the title.
• buttons (optional) : object[] - An array that contains the buttons shown in the dialog. You need to pass two objects with the name (string: text, name of the button) and buttonType (int: buttonType, the return value of the button - Values: -1, 0, 1).

Result

• buttonType : int - Values: Yes(1), No(0), Cancel(-1)

chayns.dialog.confirm('Confirm Dialog', 'This is a statement to confirm or to deny.')
  .then(function (data) {
    console.log(data);
  });

chayns.dialog.confirm('Confirm Dialog', 'This is a statement to confirm or to deny.', [
  {text: 'sample 1', buttonType:1},
  {text: 'sample 2', buttonType:0}])
  .then(function (data) {
    console.log(data);
  });

---

chayns.dialog.date(config)

Shows a date-picker-dialog. The type of dialog can be changed to date, time and date-time.

Parameter

• config : object - An object that contains the following parameters.
• dateType : int - The type of date the dialog should display. chayns.dialog.dateType contains the different formats and it specific values.
• preselect (optional) : date - The date that is preselected when the dialog shows up.
• minDate (optional) : date - The lowest date that can be picked.
• maxDate (optional) : date - The highest date that can be picked.

Result

• time : timestamp - The selected date given in seconds since 1970 (in apps: -1 if cancelled).

var preSelect = new Date(2016, 0, 14, 0, 0, 0);
var minDate = new Date(2016, 0, 1, 0, 0, 0);
var maxDate = new Date(2020, 0, 1, 0, 0, 0);
chayns.dialog.date({
 'dateType': chayns.dialog.dateType.DATE,
 'preSelect': preSelect,
 'minDate': minDate,
 'maxDate': maxDate
}).then(function (data) {
 console.log(data);
});

---

chayns.dialog.select(config)

Shows a select dialog. The selected values are returned as an array. How to set up the list items is described in the parameters section.

Parameter

• config : object - An object containing the folliwing parameters.
• title : string - The title shown as a headline on top of the dialog.
• message (optional) : string - The text shown below the title.
• quickfind (optional) : boolean - If true, a search input will be shown. It can be used to search for item names.
• multiselect (optional) : boolean - If true, you can select multiple items.
• buttons (optional) : object[] - An array that contains the buttons shown in the dialog. You need to pass two objects.
• list : object[] - This defines the list items. Their structure is build as shown in the following: {name: ‘name’, value: 'optional value', image: 'optional url', isSelected: optional true/false}.

Result

• buttonType : int - Values: Yes(1), No(0), Cancel(-1).
• selection : object[] - Contains the following result values. One object represents one selected item.
• selection.name : string - The name of the selected item.
• selection.value: object - The value of the selected item. If not set the value is equal to the items name.

chayns.dialog.select({
 title: 'Select Dialog',
 message: 'Please select one:',
 quickfind: 0,
 multiselect: 0,
 list: [{
  name: 'Item 1'
 }, {
  name: 'Item 2',
  isSelected: true
 }, {
  name: 'Item 3'
 }, {
  name: 'Item 4'
 }]
}).then(function resolved(data) {
 console.log(data);
});

---

chayns.dialog.input(config)

Shows an input dialog. It gives you the opportunity to enter a text. If 'Yes' is pressed, the dialog will return the given text.

Parameter

• config : object - Contains the following parameters
• title : string - The title shown as a headline on top of the dialog.
• message (optional) : string - The text shown below the title.
• placeholderText (optional) : string - The placeholder shown in the dialogs input field.
• text (optional) : string - a pre defined text in the dialogs input field instead of a placeholder
• buttons (optional) : object[] - An array that contains the buttons shown in the dialog. You need to pass two objects with the name (string: text -> name of the button) and buttonType (int: buttonType -> the return value of the button).

Result

• buttonType : int - Values: Yes(1), No(0), Abort(-1)
• text: string - The entered text.

chayns.dialog.input({
 title: 'Questioning',
 message: 'You may also comment this.',
 placeholderText: 'Enter your text here',
 buttons: [{
     text: 'Yes',
     buttonType: 1
 },{
     text: 'No',
     buttonType: 0
 }]
}).then(function (data) {
 console.log(data);
});

ModeSwitch

The ModeSwitch is used to manage the users permissions and the different views of a Tapp.
A mode is defined like this: { name: string, default: boolean, value: int }. Name is the shown name of the mode, default is used to set an active mode by default, the value can be used for identifying modes in the callback.

Supported Platforms

• Android
• iOS
• ChaynsWeb

Table of Contents

• init
• addItem
• removeItem
• changeMode
• remove
• add

---

chayns.ui.modeSwitch.init(config)

The initialization of the ModeSwitch. It will be shown at the top of the tapp.

Parameter

• config : object - Contains the following parameters.
• items : object[] - This items are build up like described in the intro. They define the different modes.
• callback : function - This method will be called everytime the mode changes. The selected items have to be handed over to this callback.
• headline (optional) : string - Set an individual headline.
• preventclose (optional) : boolean - Prevents that the ModeSwitch closes itself after switching modes.

Result

• item : object - The item you selected.

chayns.ui.modeSwitch.init({
 items: [{
  id: 0,
  name: chayns.env.user.name, //setting the username as a modes name 
  value: 0
 }, {
  id: 1,
  name: 'Administrator',
  value: 1,
  default: true //set as default selected
 }],
 callback: function(data) { 
  console.log(data);
 }
});

---

chayns.ui.modeSwitch.addItem(item, index)

This method allows you to add modes to the ModeSwitch. If you dont set a index, the new mode will be listed last.

Parameter

• item : object - The mode you want to add
• index (optional) : int - If set, the new mode will be inserted to this position between the existing modes

chayns.ui.modeSwitch.addItem({id: 2, name: 'addItem-test', value: 10}, 1);

---

chayns.ui.modeSwitch.removeItem(id)

This method allows you to remove a mode from the ModeSwitch by its id.

Parameter

• id : int - The id of the mode you want to remove

chayns.ui.modeSwitch.removeItem(0);

---

chayns.ui.modeSwitch.changeMode(item or index)

This method allows you to manually change the mode. You have to set as parameter either a new mode or the index of an existing mode.

Parameter

• item (optional) : object - The mode you want to add and switch to
• index (optional) : int - The index of the mode you want to switch to

chayns.ui.modeSwitch.changeMode(1);
//or 
chayns.ui.modeSwitch.changeMode({
  name: 'ChangeToThis',
  value: 13
});

---

chayns.ui.modeSwitch.remove()

This method allows you to hide the ModeSwitch. Use the add function to show it.

chayns.ui.modeSwitch.remove()

---

chayns.ui.modeSwitch.add()

This method allows you to show the ModeSwitch, if you used modeSwitch.remove before.

chayns.ui.modeSwitch.add()

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)

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.

chayns.showWaitCursor()

---

chayns.hideWaitCursor()

Hides the wait cursor.

chayns.hideWaitCursor()

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': 'fa-plus',
  'position': chayns.floatingButtonPosition.CENTER
}, function() {
  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');