This is an example of a custom menu & content page (see content pages section below).

Introduction

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 and even 'smart 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 at GitHub .

Menu & features

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.

Notes: 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.

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 to 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 'Upcoming events'). The box will contain content that is retrieved from a local or an external source (see explanation in 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.

Banking

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

Information

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 example). It also is possible to add pages to the built-in sub (left) menus Banking, Marketplace and Personal. This 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) or within a box that will have the width of the menu (from Home to Login). The front-end guide you are viewing now is such 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 wordpress pages and plug-ins. For example a an embedded Google calendar (see example here) and contact form (see example here). Be aware that if you retrieve content from Wordpress you would need to remove the Header & Footer, which can be done with a plugin such as:

Banners

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

Translation

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