Features and Graphical Elements of the MG Panel’s User Interfaces

The aim of this article is to explain the conventions used in the user interfaces of the N0C MG Panel, more specifically:

• The areas of interfaces used for navigation and information, as well as the content areas.
• Dialogue boxes.
• Pictograms (graphic elements or symbols) found on icons, buttons and sliders.

Reading this article will help you use the MG Panel more intuitively and save you time. You will no longer have to constantly refer to the knowledge base for general information that has become obvious to you. In addition, articles in the knowledge base refer to this article when appropriate, which helps keep the text concise.

The Glossary contains explanations on multiple topics and can be consulted to clarify certain terms.

Prerequisites

Go to https://mg.n0c.com/en/.

If you are not familiar with N0C at all, we encourage you to read first the article How to Use the Dashboard.

Description of a Typical Interface in the MG Panel

When you click on an option in the Context menu (N0C WP, for example), a window similar to this one will open:

Let’s take a closer look at what it consists of.

	Name	Use	Comments
A	Context menu	List of options providing access to the N0C interfaces.	See the article How to Use the Dashboard for further details.
B	Name of the interface and name of the selected section	Name of the interface and name of the selected section to be used for interaction.	Note: the name that appears here does not necessarily have to be the same as the one selected from the context menu. A page may sometimes contain two, three or four separate sections. The See the documentation icon provides access to the knowledge base article relating to the interface displayed.
C	Descriptions of the section or tool on the page	Information regarding the interface’s features.
D	Main content area	Displays the key information that the user has come to view in this section, along with the input fields and controls.	See “Types of main content area“.
Da	Record	In a data table, this refers to a structured set of data relating to a single entity or subject.	Often referred to as a entry or row.
E	Controls	Sometimes, controls are displayed in the main content area.	The example shows a cursor.
F	Icons	A small image or icon representing a file, a folder or an application.	See the “Symbols used on the MG Panel“.
G	Button	A graphic element that, when clicked, triggers an immediate action.	See the “Symbols used on the MG Panel“.
H	Text field	An area where the user can type text using the keyboard.
I	Current user	Username associated with the Web Project.
J	Language	Selecting the display language for the MG Panel.	FR : French. EN : English.
K	Navigation button	Enables the user to navigate or quickly access other pages when it is not possible to display all the records on the screen.
L	Tooktip	A small context-sensitive help message that appears on the screen when the user hovers the cursor over a graphical element (such as an icon or a button).

Types of Main Content Area

The main content area, which forms the heart of the interface, contains, on one hand, the information being viewed and, on the other, the input fields and controls:

Research Filters

Here is a typical example of an input interface and controls featuring search filters (in this case, drop-down lists and text fields) that allow you to filter data in tables or lists:

Tabs

Tabs organize the content into separate views, only one of which can be displayed at a time. The label for each tab appears in the tab header, and the active tab is highlighted by a coloured bar:

Unlike a data table or a list, this interface allows to present a large amount of relevant information on a single topic without having to create a new page.

This library, developed by Google, is highly efficient and widely used; it is the only one employed for N0C: https://material.angular.dev/components/tabs/overview.

Label

A label is a textual content or a small visual element that describes the purpose of an element on the screen:

Extension panel

An extension panel is a collapsible or expandable graphical user interface element that allows additional information or options to be displayed without cluttering the main screen:

Description of the Dialogue Boxes

A dialogue box is a small secondary window that appears on the screen. There are:

• interactive dialogue boxes (which allow the user to perform actions or make choices); and
• dialogue boxes that appear to provide information (a message or main instruction).

Interactive Dialog Boxes

Here is a typical action and choice dialogue box:

Dialogue Boxes for Providing Information

This type of dialogue box provides you with key messages or instructions. It is essentially an explanatory text or a question put to the user (for example: “Do you want to save the changes?”).

Here are a few examples.

	Messages/instructions	Examples
Confirmation	A communication or confirmation mechanism that either verifies a user’s intention before a critical action is taken, or informs the user that an action has been successfully completed.
Yellow box	A yellow box (often referred to as a warning box) is a visual notification or alert element used to draw the user’s attention to important, but non-critical, information.
Red box	A red box (or red boxed area) generally indicates a visual indicator of an error, a warning or an active selection, signalling a problem that absolutely requires the user’s attention and is often critical.
Informations	All the data, text, messages and visual cues displayed to convey the status of a system and guide the user’s actions.	Examples :

Loader

The loader icon indicates that data is currently being retrieved from the server and that the page or section will be temporarily unavailable until this data is available:

Symbols Used on the MG Panel

The name and function of each icon, button or slider depend on the context. Nevertheless, these symbols usually follow a standard pattern, so that – much like a pictogram displayed in an airport – they can be understood in any language. After all, as the well-known saying goes, a picture is worth a thousand words.

Here are a few symbols used in the MG Panel. If you are familiar with them, you will save a great deal of time when using the application.

The symbols for Roundcube, SiteBuilder, phpMyAdmin, and phpPgAdmin—applications that are not part of the suite of tools designed with N0C—are not all documented in this article. Instead, they are covered in the knowledge base articles or on the Web.

Icons	Names	Functions	Examples
	More details Display Show	Used to display, reveal or make hidden content visible
	Hide	To make an item invisible on the screen without permanently deleting it
	Webmail login	The process of signing into an email account directly through a web browser.
	Email Logs	System log files that chronologically record all activities, events and transactions relating to the sending, receiving and routing of emails on an email server.
	Change password
	Password complexity	Green: confirms that the password is sufficiently complex. Red: indicates that the password does not meet the complexity criteria and that you need to choose another one.
	Suspend	To temporarily suspend the execution of a programme, process or application without terminating it, whilst preserving its current state so that it can be resumed later.
	Stop	To bring a process to a definitive end or immediately stop a task that is in progress.
	Delete	To remove all or part of a computer programme’s files, configurations and components so that it can no longer be run on the system.	In the file manager, delete a previously selected file or folder.
	Add	To insert new information into an existing structure (such as a file, a list, a variable or a database).
	Log in	The action of signing into an account.
	Rename	Change the text label of an item (file, folder or program) in the system whilst retaining the link to its original content or function.	In the file manager, rename a previously selected file or folder.
	Modify Rename Change	The act of changing, transforming or updating data, a file or code (for example, changing a value in a database).	Modify the quota.
	Edit	This generally involves opening a file in a specialised interface or programme (text editor or code editor) in order to view, amend or rewrite it before saving it.	Edit the file. Edit the URL. In the file manager, edit a selected text file. The code is then displayed on screen and can be easily edited.
	Dashboard	A graphical interface that collates, organises and presents key data, metrics and key performance indicators (KPIs) in a visual and concise format.	The SiteBuilder dashboard.
	Pages	A digital document that can be viewed on the internet using a web browser.	Designing website pages with SiteBuilder.
	Blog	A website or a section of a website where short articles, known as blog posts, are published regularly and listed from the most recent to the oldest.	Designing website blogs with SiteBuilder.
	Media	All forms of information processed by a computer, including text, still or moving images, sound and video.	Media in SiteBuilder.
	Themes	The graphic design and visual presentation of a website’s interface.	Themes you can choose for a website designed with SiteBuilder.
	Menus	A graphical user interface element that displays a list of options or commands, enabling the user to navigate or carry out actions.	See SiteBuilder.
	Sites	A collection of web pages and multimedia resources linked together by hyperlinks and accessible via a single address (the URL).	See SiteBuilder
	Generate	To automatically generate, create or display elements (content, traffic or data) using a computer system or a script.	Generate a password.
	Refresh	This involves asking the browser to reload the page from the server in order to display the most recent version.
	Restart	Restart or reset a server, a web application or a process in order to clear the memory, apply updates or rectify a technical fault.
	Copy	The action of selecting and temporarily storing part of a piece of content (text, image or URL link) in the device’s memory (the clipboard) so that it can be reproduced elsewhere.	In the file manager, copy a previously selected file or folder. Copy value.
	Clone	Create an identical copy of an existing website, including its code, files and database.
	Calendar	A clickable module (such as a date picker) that allows the user to select a date for an appointment, an event or an order.
	Disabled	Currently neither active nor interacting, or that has been abandoned.
	Actif	Currently activated, operational and ready for use, or currently in progress.
	Healthy Successful	A system, network or service that is in good working order, i.e. fully operational, secure and performing well.
	Validate	The process of checking and ensuring that data, programmes or transactions are accurate, correct and comply with predefined criteria before being accepted or processed.
	Select multiple	A feature that allows a user to select several options at once from the same list or group of commands, rather than just one.	In the file manager, select several files and folders at once.
	Info.	Information, data or content made available to users.	In the file manager, display various details about the selected file or folder, such as the name, the date of the last modification, the number of permissions, etc.
	See the knowledge base.	Access the knowledge base.
	See the documentation	A link or instruction that directs the user to a collection of written resources to help them understand how to use a tool, feature or service.
	Details	A specific page or section that provides comprehensive, in-depth and exhaustive information on a particular item (a product, a service, an event or a data record).
	Settings	Configuration options for an account or a page, or technical elements added to a web address to transmit data.	Email account settings. FTP settings. File Manager settings. SiteBuilder settings.
	Start	To launch, open or start a programme, an application or a system
	Delete cache	Delete the temporary files and thumbnails saved by your computer or mobile phone to quickly display a visual representation of a file or application.
	Local	Means that the file or folder is physically stored on the hard drive or internal memory of your device (computer, smartphone or tablet).
	My files	A shortcut to the app or central hub that brings together, organises and allows you to manage all the documents, images, videos and other data stored on your device.	See the File manager.
	Logout	Exit an application, log out, or return to the previous screen.
	New folder	Is used to create an empty folder for organising and storing your documents.	See the File manager.
	New file	A command that allows you to instantly create an empty data container or a blank document in the folder you are currently in.	See the File manager.
	Switch view	Allows you to change the way folders and files are displayed on screen by grouping files and folders together.	In the file manager, you can select up to three display options: – List items one after the other, showing their Name, Size and Last modified date. – Group files and folders together using large icons. – Group files and folders together using very large icons.
	Move	Move a document or folder to a different directory, without keeping a copy in the original location.	In the file manager, move a file or folder from one folder to another.
	Copy	Create an exact duplicate of data, text, files, or a whole document while leaving the original source completely unchanged.
	Permissions	Security rules that define who is authorised to read, edit or run this item.	In the file manager, open a window that allows you to manage access permissions for files and folders.
	Download	Copy a file from a remote server (such as cloud storage or a website) to your own device.	In the file manager, download files from the host to your local device.
	Install	Is used to download, set up and install new software, an app or an update on your device so that it is ready to use.
	Upload	Is used to transfer files or data from an external source (such as a USB stick, another folder or a camera) to your device’s current location.	In the file manager, upload files from your local device to the hosting service.
	Create archive	Allows you to combine one or more selected files and folders into a single compressed file.	In the file manager, compress and archive a previously selected file or folder.
	Extract an archive	Extract and restore the original files or folders that were grouped together and compressed into a single file.	In the file manager, extract a previously selected archived file.
	Enable/disable the system shell interface	Is used to open or close a command terminal (the shell) that is directly integrated into the browser	In the file manager, open the terminal, which provides access to the server via the command line.
	Register	To officially record, enroll, or assign a piece of data, a device, or a software component into a system’s directory, database, or memory structure so the system recognizes and can interact with it.
	Select or choose (with the tick)	Trigger, confirm or activate a setting by moving a slider along a digital track.
	Disable or do not select (greyed out)	To disable or suspend a visual function, behaviour or pointing device associated with the on-screen indicator.	See the File manager.
	Access to an additional tool	Open a new page and exit N0C to access an additional tool, such as another application.	The user leaves N0C, but everything is displayed on a new page; he will not be logged out of N0C.