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

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).

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.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.
• buttonType (mobile only) : int - Values: Yes(1), No(0), Cancel(-1)

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.
• 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'
}).then(function (data) {
 console.log(data);
});

ModeSwitch