Frontend settings

Besides the backend settings, several frontend configuration options are available to customize your Fleio installation.

How to edit constants.js files

There are two constants.js files: one for end-user panel and a second one for staff panel.

Full file path on disk for end-user panel file is:

/var/webapps/fleio/frontend/site/constants.js

Full file path on disk for staff panel file is:

/var/webapps/fleio/frontend/site/staff/constants.js

Change the page size

Fleio uses infinite scroll to display objects list. By default, 20 objects are loaded at once and you can change this default value for end-user or staff user constants.js files.

var user_config = {
    // ...
  paginate_by: '20'
    // ...
}

Customize page title

The browser’s page title (that is the HTML <title> tag) default format is:

var user_config = {
    // ...
    base_title: '@ - Fleio'
    // ...
}

Where the @ character is replaced depending on the current page, resulting a title like “Home - Fleio” or “Instanced - Fleio”.

You can redefine the title format in constants.js files.

How to change instance create form display

Instance create form display can be changed using the flavors_as_cards property from the constants.js file.

When set to false, the instance create form will look like this:

../_images/create-instance-dropdown.png

When the setting is set to true, the flavors will be displayed as cards. Their description will appear in each card’s body:

../_images/create-instance-flavor-cards.png

Changing local compute storage setting

If you set local_compute_storage_enabled property from the constants.js file to false, local compute storage option when selecting boot source on instance creation will not be available anymore.

By default it is set to true in constants.js files:

var user_config = {
    // ...
  local_compute_storage_enabled: true,
    // ...
}

How to change default display mode for items

Change the items_display_mode property from the same constants.js files as stated above to either cardview to display the items as cards or listview to display them like a list. Note that the user will still be able to change the display mode for a page using the button from the top-right side of the page content.

How to add custom menu items and categories

You are able to customize your menu by adding top level menu options with links, menu options underneath existing categories or even add new categories with menu options. To do so, you just need to edit your settings.py file (more on that here).

You need to edit some settings (available both for enduser and staff panel). These settings are: CUSTOM_MENU_CATEGORIES_ENDUSER, CUSTOM_MENU_OPTIONS_ENDUSER, CUSTOM_MENU_CATEGORIES_STAFF, CUSTOM_MENU_OPTIONS_STAFF.

To add a category you may follow the following example:

CUSTOM_MENU_CATEGORIES_ENDUSER = {
    'Category one': {
        'main_feature': 'core',
        'location': 2,
    },
    'Category two': {
        'main_feature': 'core',
        'location': 3,
    }
}

You may condition the category by any existing feature name in fleio (more on that here). You can use the core feature if you want your category to be always visible (‘core’ feature is always enabled). Also note the location setting, which allows you to specify where in the menu should the category appear. Note that counting starts from 0. Also, you should be careful not to use the same location for more than 1 custom category because this may raise issues in your application.

To add a menu option underneath a menu category (already existing in fleio or one that you created like described above ), you may use the CUSTOM_MENU_OPTIONS settings for enduser and staff like in the following example:

CUSTOM_MENU_OPTIONS_ENDUSER = [
    {
        'category': 'Category one',
        'label': 'Option one',
        'href': 'https://fleio.com',
        'open_in_new_tab': True,
        'icon': 'warning',
        'feature': 'core',
    },
    {
        'category': 'Billing',
        'label': 'Custom product',
        'href': 'https://fleio.com',
        'open_in_new_tab': True,
        'icon': 'product',
        'feature': 'billing',
        'location': 2,
    },
]

As you may notice, there are several settings that you can use. Use the category attribute to specify under what category the new menu option should be placed, use label attribute to specify what will be the menu option’s name, href attribute for redirecting to a custom link, open_in_new_tab to make users open the link in new tab when clicking it, icon for displaying an icon to the left and feature to condition this menu option by a fleio feature. Again, you can use ‘core’ feature to make sure it will appear forever. Also, you can use the location attribute just like you did for categories.

To add a top level menu option (it will not be under any category) add a new option in the ‘CUSTOM_MENU_OPTIONS_ENDUSER’ setting just like above, but not using the category attribute. So, this may look like this:

CUSTOM_MENU_OPTIONS_ENDUSER = [
    {
        'label': 'Top level',
        'href': 'https://fleio.com',
        'open_in_new_tab': True,
        'icon': 'warning',
        'feature': 'core',
        'location': 6,
    },
]

For top level menu options, make sure their location is not the same with one defined for categories.

How to set custom add credit URL

The Add credit button from the end-user’s dashboard can be customized to any link. You can for instance set an external link, if you are using another system (like WHMCS) to handle invoicing and credit card payments.

../_images/add-credit-button.png

Edit end-user constants.js file and set:

// ...
var user_config = {
  // ...
  externalBilling: {
    enabled: true,
    addCreditUrl: 'http://www.externalsystem.com/addcredit'
  },
};

The Billing panel that shows client’s credit and the Add credit button can be hidden completely through an end-user feature toggle.

Changing text editor on tickets plugin, etc.

The rich text editor found on tickets plugin, notification templates edit page, etc. can be customized in the constants.js file. All you need to do is to add a new property called tiny_mce_options and define a dictionary with the settings. The example below is the default one, you can find more settings reading the tinymce documentation.

tiny_mce_options: {
    relative_urls: false,
    inline: false,
    plugins : 'link code image lists autolink',
    toolbar: ["undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | link code image | bullist numlist | removeformat"],
    skin: 'lightgray',
    theme : 'modern',
    menubar: ''
  },

White label

If you want to remove the small Fleio link that appears at the bottom of the login screen and at the bottom of the left menu, you have to purchase the white-label option.

Changing the top logo is a simple setting and does not require you to pay the white-label fee.