Skip to main content
Version: 8.9.x

Functional guide

Mia-Platform Back Office combines the benefits of a Headless CMS with a flexible micro-frontend architecture. It is easier to maintain, test and scale.

Collections

In the side menu there is a list of collections organized into categories.

A collection is a set of data shared by some properties. A category is a set of collections and is only useful for the visual ordering of the back office.

To make the use of the back office more immediate, consider the following example: a back office for managing the contents of a food delivery app.

The following diagram exemplifies the back office skeleton, composed of categories, collections and properties, applying it to a hypothetical food delivery.

  • Category: Menu
    • Collection: dishes
      • property: name
      • property: ingredients
      • property: price
      • property: kcal
      • property: image
    • Collection: ingredients
      • property: name
      • property: allergene
      • property: state

When logged in to the back office, the sidebar shows the list of manageable collections. The sidebar is collapsable.

Side menu

Collapsed side menu

Display the elements - pages and tables

The properties of a collection are shown in a table. They can be customized, so the user can choose which ones are visible even without opening the drawer and which ones are hidden.

In addition, the order of the columns in the table can be customized.

Data in the table are shown by default in chronological order. However, it is possible to visualize data in alphabetical order for each column, by clicking on the header of the desired column.

Personalized tabs

The elements in the table can be visualized in different tabs, visible at the top of the page.

It is possible to have the division in All, Published, Draft, Trash.

Also, these tabs can be personalized with filters depending on from elements' metadata, for example with tabs that divide between orders that are pending, being prepared, delivered or aborted.

Personalized tabs

Pagination of the elements

The total number of pages and the number of elements shown in the page are visible in the bottom right of the page.

It is possible choose the number of elements that must be displayed in one single page.

It is possible to advance of one page by clicking on the button with the single arrow, or to advance to the final page by clicking on the button with the double arrow.

You can also go directly to the page you want by inserting its number.

Search an element

The search bar in the top of the page allows to search a specific elements in the collection.

Search elements

Apply filters

By clicking on button "Add filter" at the top right, you can do an advanced search filtering all the elements according to the desired properties. These filters are fully customizable, and it is possible to filter for every property of the collection or choosing, by configuration, which ones can be filtered for.

Apply filter

The results of the research will appear in the table.

Applied filter

You can also add additional search filters that will be added to the one just made. The filters applied are visible at the top right of the page, and they can be easily hidden or deleted permanently.

Two filters

New elements

To add a new element one must click on the “Add new” button on top right.

A lateral drawer will open, showing the fields that must be filled (properties).

  • It is possible to set some of them as required, and they are highlighted by an asterisk. These are the mandatory fields which, if not populated, prevent the element from being saved.
  • The drawer supports tooltips: passing the mouse on the i icon reads the tooltip, that is the description of that field or the instructions on how to populate it.

Add new

It is possible to choose whether the new element must be in draft or must be published. Its state can be shown in the table with a colored badge.

The detail of an element and the possible actions

All the properties of a collection can be viewed in the lateral drawer that appears on the right when the element is selected.

These properties can be edited or read-only.

The lateral drawer is opened at the click on the element, and it shows the details of the element. It can be divided in sections and has customizable titles and subtitles. The button in the drawer is customizable too.

It supports the following fields

  • Select and multiselect

Select and multiselect

  • Text field

Text field

  • Text area (WYSIWYG)

Text area

  • Date/time picker

Date/time picker

  • Links to other collections or external links

Links

  • File upload - also with drag and drop

File upload

The fields in the drawer can be editable or read-only. For example, orders cannot be edited.

Readonly drawer

If the user edit an element and then tries to close the drawer without saving the changes, a confirmation modal will appear to alert the user that his changes will be lost.

Delete an element

To delete an element, click on the trash icon in the table. In this way the line will not be permanently deleted: it can be found in the tab Trash.

Any content deleted from the trash folder will no longer be recoverable. For this reason, this action can be protected with a confirmation message.

Delete an element

Duplicate an element

To duplicate an element, click on the duplicate icon in the table, under the column "actions". In this way, two identical elements will be shown in the table.

By configuration, a field can be unique. In that case, the element is copied but the drawer opens to let you insert that unique field - that thus can't be duplicated.

Duplicate an element

Custom actions

It is possible to show custom call-to-actions on rows, in addition to delete and the duplicate one.

For example, it is possible to upload or download a file for each element directly by the related row in the table, by adding a custom button.

Custom actions

Massive selection of contents

Massive selection

It is possible to make bulk actions on data by selecting more than one element.

Protect some actions

By configuration, it is possible to choose which actions must be protected by a confirmation message (such as to delete).

Lookups

Lookups are used to fill in the fields of a property by crossing information from the properties of other collections. They can be used to create drop-down menus that can be very useful to avoid errors in the compilation of the fields.

Here are the various use cases:

  • Pre-set menu: the elements in the menu are defined at the beginning, and they are not editable.
  • Editable drop-down menu: the elements in the menu are taken from other collections of the back office, thus they can be edited and added over time.

Lookups

Permissions by group of users

It is possible to add an ACL (access-control list) on the configuration of the single elements of the page and on the columns of the table. It means that, by configuration, it is possible to define rules of ACL on groups of users.

For example, even if all the users can access a collection, only a group of users will visualize the Add new button.