Site

Control the site UI.

The UI config files are located in the custom_web folder.

The UI configuration is done in urls.py (generic) and views.py (custom).

Controllers

The interface of Automail consists of a left menu (up to 3 levels of submenus), a top menu with a search bar + a dropdown on the right side, and the content.

All controls are set in urls.py, in the dictionary CONTROLLERS, which is used in the Automail initiation process when the server boots:

CONTROLLERS = {
    'platform': {
        'show_searchbar': True,
        'show_notifications': False,
    },
    'left_menu': [],
    'top_right_menu': [],
    'search': [],
}
UI layout

Permissions

Users and groups are created from the admin page.

All UI components have the attributes allowed_user_groups (for user groups) and allowed_users (for users) to control the component-specific permissions.

By default, all users have permission to a UI component. If at least 1 group is added to allowed_user_groups or 1 user is added to allowed_users, then only the defined group(s) and user(s) will have access to the component.

Admins (users with the flag superuser set to True in the Automail admin interface) always have access to all components.

Left Menu

left_menu has its menu items as a list of dictionaries.

The following code is an example that displays the left menu above with the corresponding grid content (grid layout, selectpickers, navs and panels):

The Search menu item comes with Automail by default as it is used for holding all pages that don't have a menu reference (e.g. searching for a factory in the top search bar).

The level 1 menu items can have icons that use the font-awesome library.

Grid Controllers

A grid is a container for selectpickers and panels (which can be linked to navs):

Grid layout

The example above is configured with the following code:

The grid attributes are:

  • label the menu text

  • url_name the URL reference of the grid

  • allowed_user_groups the user group permissions

  • allowed_users the user permissions

  • view the generic view controller_views.GridView, which includes all session and security-related configurations

  • view_params

    • show_selectpickers control the display of selectpickers on grid load (False means the selectpickers are collapsed)

    • selectpickers_columns the number of columns in the filter section (TO BE AUTOMATICALLY CALCULATED Florian Gamper)

    • selectpickers the filters that apply to all panels in the grid

      • category - filter pre-loaded dropdown list of values with the attributes:

        • 'category': 'filter'

        • 'name': 'supplier__name' (example value) value used for interacting with the models through queryset include filters

        • label': 'Factory/Facility Name' (example value)

        • 'live_search': True to display a search box

        • 'action_box': True to display select all/deselect all buttons

        • 'multiple': True to allow selecting multiple values

        • Data source options:

          • 'queryset': {'model': custom_models.Supplier, 'value_field': 'id', 'label_field': 'label'} queryset config to fetch data from a model

          • 'fixed_values': [{'value': True, 'label': 'Yes', 'selected': False}, {'value': False, 'label': 'No', 'selected': False}] hardcoded dropdown values

      • category - token list of values that are loaded at the time of the search

      • category - datepicker mini-calendar

    • navs the tabs right under the selectpickers container, with the attributes:

      • 'title': 'Detected Issues in Questions'

      • 'active': True the active tab when the page is first loaded

      • 'panel_names': [ 'panel_suppliersurveymanagementdetectedissue_supplieranswer'] list that holds all panels to be part of the nav

    • panels list of panels included in the grid

If the same UI components repeat across different grids, it is helpful to define those as variables in url_variables.py (e.g. the exact same supplier filter is used in multiple grids and hence stored in the selectpicker_suppliers variable).

Panel Controllers

A panel (i.e. the frame including title, height, width, footer, etc.) is different from its content (i.e. what is shown inside the panel such as a chart).

Panels are loaded into a grid asynchronously through AJAX calls. Each panel is loaded independently from other panels and can be refreshed by using the refresh icon.

Each panel is configured as a dictionary. As an example, the Performance panel above has the following config:

The core panel attributes are (non-core attributes are described separately):

  • title visible title of the panel frame (if None, then the panel frame is not visible, only its content)

  • height in px defined as an integer value

  • width based on a divider of 12 as used by Bootstrap (full width is 12 and allowed values are 2, 3, 4, 5, 6, 7, 8, 9, 10, and 12)

  • full_row to make the panel take the full row width, even if the width is less than 12 Florian GamperTO AUTOMATE

  • row_start to make the panel start at a new row (only if full_row is False)

  • row_end to make the panel close an existing row (only if full_row is False and the panel is following another panel that has the row_start set to True)

  • type the type of panel used for JavaScript rendering (e.g. 'combo_double_y_axis', 'PieChart', 'regular_table', 'activityflow', etc. with full list below)

  • url_name URL of either the panel content or the panel frame used for rendering (e.g. 'frame_table', 'frame_chartjs', etc. with full list below)

  • url_action_name URL of the panel content (only applicable if the url_name is not referring to a panel frame)

  • footer the footer content of the panel

    • Dropdown (dictionary):

  • Buttons (list of dictionaries):

  • content the content of the panel

Filter content

Panel Content

The config of a panel's panel content depends on the type of content.

SelectpickersPanels
PreviousUI ConfigurationNextSelectpickers

Last updated