Operations

Login

Splash screen

• When saving the Cyclos url the screen width and height are saved. When starting up the app the screen height and width are detected, determining whether the app is horizontal or vertical, then the splashscreen is shown when the image is loaded using the saved width and height. The reason for this is that it might take several seconds before javascript can detect the window.innerHeight and window.innerWidth correctly.
• When the screen is rotated at the moment the splashscreen is shown it is hidden.

Normal login page

• The username the user logged in the last time in the app will be saved, when there is a saved login name this name will be filled in.
• If the variable rootUrl is set this page is shown at the startup, otherwise the login configuration page is shown.

Form page

Label	Type	Comment
Login	Heading
Secure login	LabelField	Form label with lock icon. Can be customized online by an admin trough Cyclos translations keys.
Welcome to Cyclos Demo	LabelField	Can be customized online by an admin trough Cyclos translations keys.
Login as: <principal name>	LabelField	The username is saved after the first login, when nothing is saved this field is hidden.
Please type your <principal name> here	TextField	The username is saved after the first login, when nothing is saved this field is shown. E.g. "Please type your username here".
Please type your <credential name> here	TextField	E.g. "Please type your password here".
Change user	ActionButton	The username is saved after the first login, when nothing is saved this button is hidden. Clicking on this button will remove the saved username.
Login	ActionButton	When the username and credentails are correct the accounts page is opened.

Login configuration page

Finding the REST services

The URL typed in the mobile APP must refer to the root URL of Cyclos (so that it knows how to find the REST services). Sometimes Cyclos is hosted on another server with a not such a nice URL and it is nicer to enter an easy url. Therefore if the mobile APP cannot find the REST services in this URL it will look for the file cyclosMobileRedirect.txt in this URL. This text file will contain the real Cyclos root URL. Also this URL will be stored in the mobile APP (but this is not visible to the user) and it will use this URL for the next sessions. In two cases it will not use this URL. First of course when the user changes the URL in the APP. Second when it cannot connect to the Rest services in the Cyclos root URL it will check the cyclosMobileRederict.txt for possible changes. File content has a single text line with the full url (protocol/domain/cyclosAppName) that links to cyclos installation e.g http://www.mydomain.com/cyclos

Example:

• Step 0: the cyclos URL is entered by the end-user in the app e.g. www.mydomain.com/cyclos.
• Step 1: this URL is stored in the phone as a variable (appUrl).
• Step 2: check's all possible urls for rest services or cyclosMobileRedirect.txt, everything is checked e.g.:
  • http://www.mydomain.com/cyclos/rest
  • https://www.mydomain.com/cyclos/rest
  • http://mydomain.com/cyclos/rest
  • https://mydomain.com/cyclos/rest
  • http://www.mydomain.com/cyclos/cyclosMobileRedirect.txt
  • https://www.mydomain.com/cyclos/cyclosMobileRedirect.txt
  • http://mydomain.com/cyclos/cyclosMobileRedirect.txt
  • https://mydomain.com/cyclos/cyclosMobileRedirect.txt
• Step 3: if it has found the URL of the rest services or the file cyclosMobileRedirect.txt which contains the URL of the rest services continue to the next step or show error (cannot find cyclos server).
• Step 4: this url of the REST services is also stored in another variable (rootUrl)
• Step 5: connect to REST services using rootUrl if no connection can be made it will display a connection error message

Form page

Label	Type	Comment
Configuration	Heading
Cyclos URL:	LabelField
Type the Cyclos URL here	TextField	If there "appUrl" stored, display it in the TextField.
Example	LabelField	E.g.: "For example: www.cyclos.org".
Cancel	ActionButton
Save	ActionButton

Account information

Account overview page

• Displays an AccountRow for each account of the user.

List page

Label	Type	Comment
Accounts	Heading
<Account type name>	AccountRow - Heading
<Account owner name>	AccountRow - SubHeading
<Account balance + currency>	AccountRow - Value	Negative balances are displayed in red.

Account overview page > Account details page

• Displays an AccountRow for each transaction from and to this account.
• Each time 25 results are shown, when scrolling down new results are loaded.

List page

Label	Type	Comment
Account details	Heading
<Account type name>	AccountRow - Heading
Lower credit limit: <Account lower credit limit>	AccountRow - SubHeading
Upper credit limit: <Account upper credit limit>	AccountRow - SubHeading
Available balance: <Available balance>	AccountRow - SubHeading
<Account balance + currency>	AccountRow - Value	Negative balances are displayed in red.
Repeated rows:
<From / To>	AccountRow - Heading	For received payments the "from user" is shown. For made payment the "to user" is shown.
<Transaction date>	AccountRow - SubHeading
<Transaction amount>	AccountRow - Value	Payments made to other users are negative and red. Received payments are positive and blue.

Account overview page > Account details page > Payment details page

Details page

Label	Type	Comment
Payment details	Heading
Date	LabelField
Payment nr.	LabelField	Only shown when enabled.
From	LabelField	Shows user name, in case of system account show system acocunt name.
To	LabelField	Shows user name, in case of system account show system acocunt name.
Type	LabelField
Amount	LabelField
Description	LabelField
<Transaction custom fields>	LabelField	Shows all the transaction custom fields for this payment type.
New payment	ActionButton	Allows the user to do a new payment to the user this user (or system). Only visible if there is an enabled transaction type between the users (or system).
Remove from contact	ActionButton
Add to contact	ActionButton

Make payment

Payment step 1: select receiver page

• When the user cannot make any payments because it doesn't have any enabled transaction types a message is shown.

Form page

Label	Type	Comment
Payment	Heading
Make payment	LabelField
To my contact	IconButton	Only visible when the user can make payments to other users (has a user to user transaction type). If the logged user has transaction types but cannot make a payment to another user a message will be displayed in the make payment page. When clicked the user is taken to step 2a.
To system account	IconButton	Only visible when the user can make payments to system accounts (has a user to system transaction type). When clicked the user is taken to step 2b.
Or type username here	Textfield
Cancel	ActionButton	Pressing cancel cleans the field "Or type username here".
Next	ActionButton	Only visible when the user can make payments to other users (has a user to user transaction type). When clicked the user is taken to step 2c, the results are filtered with the textfield "Or type username here".

Payment step 2a: select contact page

• Clicking on the UserRow will select the user as the "to" user in the next step.

List page

Label	Type	Comment
Select a contact	Heading
<Contacts username>	UserRow - Heading
<Contacts name>	UserRow - SubHeading
Cancel	ActionButton

Payment step 2b: select system account page

• Clicking on the UserRow will select the account as the "to" account in the next step.

List page

Label	Type	Comment
Select an account	Heading
<System account name>	UserRow - Heading
"System account"	UserRow - SubHeading	The SubHeading is always "System account".
Cancel	ActionButton

Payment step 2c: select other user page

• Clicking on the UserRow will select the user as the "to" user in the next step.

List page

Label	Type	Comment
Select a user	Heading
<Searched users username>	UserRow - Heading
<Searched users name>	UserRow - SubHeading
Cancel	ActionButton

Payment step 3: payment details page

• When there is only one transcation type and the corresponding account doesn't have enough balance the message is shown: "This account doesn't have enough available balance."
• When there are multiple transaction types and it is selected and the corresponding account doesn't have enough balance the message is shown: "This account doesn't have enough available balance please select another transaction type."

Form page

Label	Type	Comment
Make payment	Heading
From: <account name> Balance: <account balance>	LabelField
To: <name of the selected user, or name of the system account>	LabelField
<Available transaction types>	SelectionField	Hidden if there is only one transaction type available.
Amount	AmountField
Description	TextField
<Custom field name>	<depends on custom field>	Shows all custom fields for this transaction type.
Cancel	ActionButton
Make payment	ActionButton	When clicked the user will be taken to step 4.

Payment step 4: confirm payment page

Form page

Label	Type	Comment
Payment confirmation	Heading
You are about to perform the following payment:	LabelField
Transaction type	LabelField
To	LabelField
Amount	LabelField
Description	LabelField
<Custom field name>	LabelField	Shows all custom fields for this transaction type.
Cancel	ActionButton
Confirm payment	ActionButton	When the button is clicked the payment will be performed.

Contacts

Contacts overview page

• Clicking on the UserRow will open the View user page.

List page

Label	Type	Comment
Contacts	Heading
<Contacts username>	UserRow - Heading
<Contacts name>	UserRow - SubHeading
Add new contact	ActionButton	Opens the Search user page which always the user to add contacts.

Contacts overview page > Search user

Form page

Label	Type	Comment
Search user	Heading
Search user	LabelField
Type login or username here	Textfield
Cancel	ActionButton	Pressing cancel cleans the field "Type login or username here".
Search	ActionButton	Searches the user based on the field "Type login or username here".

Contacts overview page > Search user > Search result list

• Searches the user according to the filter specified in the "Search user" page.

List page

Label	Type	Comment
Select an user	Heading
<searched users username>	UserRow - Heading
<searched users name>	UserRow - SubHeading
Cancel	ActionButton

View user

Details page

Label	Type	Comment
"User details" or "Contact details"	Heading
Username	LabelField
Name	LabelField
<all other visible user custom fields>	LabelField
Pay contact	ActionButton	Only visible when the user is a contact. Clicking on this button will open the "Payment step 3" page (in which this user is already selected).
Delete contact	ActionButton	Only visible when the user is a contact. Clicking on this button will delete the user from the contacts, this page will be refreshed.
Pay user	ActionButton	Only visible when the user is not a contact. Clicking on this button will open the "Payment step 3" page (in which this user is already selected).
Add to contacts	ActionButton	Only visible when the user is not a contact. Clicking on this button will add the user to the contacts, this page will be refreshed.

Help

• The app has one help text file.
• This file is divided in sections, for each page in the app there is a section in the help file.
• Anchors are used, so that when the help icon is clicked in a certain page, the correct section will appear.

Interface and fields (previous)

Customization (next)