IntroductionThis 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 at GitHub.
Menu & feauturesThe 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.
- 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 '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 pagesIt 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: