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 published open source at Github. For all technical issues (installation, configuration) and the road map can be found at the Cyclos front-end page at GitHub.
From Cyclos version 4.14 on forwards the new front-end will also be available directly in Cyclos.

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)


The front-end is intended for end-users but many (operational) administration features like user management and content management are supported. All functions will work exactly the same as in the classical front-end.
System administrators will typically use the classical front-end as not all administration features are available in the new front-end. In case if an admin configures his own layout (configuration) to use the new front-end he will be able to login and switch back to the classical interface by going to the Personal menu - Settings - User classic front-end.

Configuration & Customization

There are two ways to customize the front-end. The easiest and most straightforward way is to enable the built-in in front-end in the configuration. This can be done per configuration in the section 'new front-end'. The section has various settings (explain). All content can be configured logging in as an admin and going to the 'Content' menu:

  • Front-end pages
  • Application translation (New front-end > Translations)
  • Banners > New front end banner
  • Static content > New front-end
  • Themes > New front-end theme

The new front-end uses icons for entities. For dynamic entties (that can be created by admins) it is possible to assign a new icon. This is availble for the entities: Record type, Advertisement category, Wizard and Custom operation.

Customization outside Cyclos

The other way to customize the front-end is to get the code from GitHub (see URL above) and do the customization separately. This is only useful if you want to make changes that go beyond layout (CSS) and content (menus, pages) changes. When the customization is done the front-end can be included in Cyclos. A tool is available (included with the Cyclos .zip file) to migratie the external front-end into the Cyclos built.
The tool can also be used by projects that have have developed a customized version form the code on GitHub (before it was available as a built-in module in Cyclos). This tool can also be used for project where the new front-end is customized from the GitHub repository.