Mobile App: Operations

From Complete Cyclos documentation wiki
Jump to: navigation, search

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:

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)