In BellaDati it is possible to change the appearance of almost any elemtent on the screen. This example will show you how to change appearance of filter components. At the end basic radio buttons will be transformed into clickable buttons. Knowledge of HTML and CSS is required.

    Preparation

    Create a report which will contain a filter with radio button component. In this example a filter inside view is used but similiar approach can be used for other types of filters. By default it will look something like this:

    Custom CSS

    It is possible to add custom CSS by using look and feel settings of your domain or by adding the code to a custom content. In this case custom content will be used since we want to apply the changes only on one report.

    Icon

    All changes have to be done in Source mode. Otherwise the code won't work.

    1. Add new custom content to your report.
    2. Switch to Source mode.
    3. Hide radio buttons and aligned all options in one row:

    4. Add style to labels which will work as buttons:

       

    5. You can also add advanced style options such as shadows, rounded corners or transitions:

    6. Add different style for selected and hovered item:

    7. Now you have fully working buttons. Of course it is possible to further change the appearance of the report. In this example we will change the background to be the same as the map and we will also hide the name of filter.

    8. Finally to have a clean look we will hide all report controls and top bars in Report appearance settings.
    9. This is the final result:
    10. Complete CSS code:

    11. You can find the final report and other examples of filter in attached BellaApp.


    • No labels