New front-end

From Cyclos4 Wiki
Jump to: navigation, search


This guide will give an an overview of the features of the new front-end for Cyclos4. The goal of the new frontend is to have a intuitive and easy to customize front-end for Cyclos4. The front-end is responsive meaning it displays (resizes) well with different screen sizes/resolutions. It displays well from large monitors, tablets, smartphones until 'features phones' like KaiOS that have very small screens. The front-end is built on the frameworks angular and bootstrap, and it uses the Cyclos RESTful API. The front-end is intended for end-users. The admin access will remain main front-end that comes built-in with Cyclos. The front-end is published open source at Github. For all technical issues (installation, configuration) and the roadmap can be found at the Cyclos front-end page at GitHub.

A demo of the new front-end can be seen at:
(You can login with user: demo, password: 1234, or create a new user yourself clicking on the 'register' link at the top right)

Menu & feautures

The front-end can be accessed in two ways, as a guest (non-logged) user and as logged user. Some features/pages are only accessible as guest such as the Home, register and the login page. Other pages are only available for logged users, such as the Banking features and personal settings. Other features are available for both guests as logged users, for example the Market place (but this is configurable). The front-end is dynamic, meaning that if a user does not have the permissions to view or access a certain page or feature (e.g. view the Marketplace) the page or feature will not show up.


  • At each menu additional custom pages can be added (see documentation about custom pages in the section 'Content pages' in the section further below). It is also possible to add banners, this is explained in the in the Banner section further below.
  • A complete list of available features of the UI can be found at the Cyclos front-end page at GitHub.

Home page

The home page is the landing page for guests. It is a custom page, meaning the content can be manage locally or at remote location (for more information see the Content pages section further below).

Login & register (guests only)

The login and register pages work similar as the classical Cyclos user interface.

Dashboard (logged users only)

The dashboard is the landing page for logged users. It has various sections (boxes) such as quick access, account graph & last incoming payments, last advertisements, new users. You can define where the boxes are placed and how many boxes will show up (by default 4). Most items in the Dashboard have clickable shortcuts to Cyclos pages. For example Quick access > make payment and Marketplace > advertisement. It is also possible to add a box with custom content (see example in - 'Upcoming events'). The box will contain content that is retrieved from a local or an external source (see explanation custom pages below). On small resolutions (e.g. viewing the frontend on a smartphone) only the quick access items are shown, and (optionally) also the custom content boxes.

Marketplace & advertisements

The Marketplace menu contains sub-menu items for the advertisements view & search, and the the user (business) directory search. It is possible to create extra menu items in the menu, as well as banners. - Directory This is a user search. Want to show this depends on your project. It is always possible to show a limited. Only show specific merchants, cash points etc.


The Banking menu will show all common banking features, and possible custom pages (if configured).

Personal (logged users only)

This menu has the pages & features related to the logged users. The pages are self explanatory (edit/view profile, passwords, contacts).


The information menu is a custom menu that contains custom pages. The custom pages will be listed in a left menu, just as the built-in features. If there is just one content page under the main menu the left menu will not show up (as it would contain only one item), but the page will be opened directly.

Content pages

It is possible to add custom content pages to the Cyclos front-end. A content page can be a fixed page such as the Home page, or it can be a page that can be place under a main menu (like the 'Information' menu in the demo example). It also is possible to add pages to the built-in sub (left) menus Banking, Marketplace and Personal. The demo site has custom pages under each main menu (Banking - help, Marketing - help, Personal - help). These are just examples. The Banners (described further below) can also retrieve their content from custom content pages, and it is possible to create dashboard boxes that retrieve the content from custom content pages. An example is the 'Events' box in the Dashboard page of this front-end.

Custom content pages can be local html files, or they can be retrieved from an external source such as Wordpress or Cyclos. External custom content pages is more convenient because once setup you can access and modify them without the need of accessing the server.

In the guests section (non logged users) the content pages can be configured to show up 'full width' (such as the home page of the demo) or within a box that will have the width of the menu (from Home to Login). The front-end guide of the demo is also a (non full width) document. In case one or more banners are configured for a page the content of the page will show up at the right of the banners. As it is possible to retrieve content from a WordPress it is possible to integrate word press pages and plug-ins. For example a an embedded Google calendar (see example at demo) and contact form (see example at demo). Be aware that if you retrieve content from WordPress you would need to remove the Header & Footer, which can be done with a plug-in such as:


It is possible to put one or more banners at each page in the Cyclos front-end (as guest or logged user). Banners can be local or external content pages (e.g. wordpress page or Cyclos content page) or they can be images. One or more banners can be shown in under any of the sub (left) menus, and all fixed pages such as registration, home, etc. You can configure multiple banners at one location and 'rotate' them with a time interval. Banners can also contain link to cyclos pages and content pages in the front-end. For example an advertisement banner can be a link (or contain multiple links) to Cyclos advertisements or to custom content pages that can show up in the main (body) section.


The translation (localizion) of Cyclos is done separately from the main Cyclos translation. The official translations are done with the Crowdin translation platform (feel free to help out with the translations).The front-end translation is dynamic (like the main Cyclos translation) which allows multiple languages. The end-user will see the language that is defined in the language setting in the Cyclos configuration (that is bound to the user group).