Project Structure

Project

Represents a set of components configured according to specific requirements.

The following components are available for project configuration:

• Pages

• Layouts

• Tabs

• Modals

• Sliders

• Widgets

Pages

The page is a block that has the following components available:

• Layout

• Tabs

• Modals

• Sliders

• Widgets

The configured page can be displayed in the navigation menu.

There can be as many pages in a project as needed.

Option	Description	Visualization
Create Page	By default, each project is empty Project configuration begins with adding a page In order to create a new page, open the Pages menu in a left sidebar and add a page by clicking on the + plus icon
Name	The page name that will be visible in the navigation menu on Clearion Web
Slug	A URL slug - the end part of a URL after the backslash (“/”) that identifies the specific page
Image	The page icon that will be visible in the navigation menu on Clearion Web
Active	If true, the page is visible for both Studio and Clearion Web users If false, the page is visible for Studio users only
Home Page	If true, the page serves as the initial landing page for users when they visit the site
Edit	To edit a page, click on a kebab icon in the Pages menu
Delete	To delete a page, click on a X icon in the Pages menu
Page order	To change the order of the pages , drag the page and drop it in the desired place

Layouts

The Layouts section is a space inside a Tab component.

When a Tab is created, widgets can be placed and configured in it.

There are two types of layouts:

Advanced Layout:

In an advanced layout, widgets are mostly aligned manually in the Studio using Non-Editing mode and the Configuration Working Area popup. The Configuration Working Area also allows setting:

• Row Height

• Margin

• Columns

• Making all widgets draggable (in Studio only)

• Making all widgets resizable (in Studio only)

• Making all widgets resizable in Clearion Web

Simple Layout:

In a simple layout, widgets are automatically aligned based on their type. For example, Navigation appears on the left side, the Toolbar is at the top, and the Map and Feature Table share space equally. In this layout, all widgets can be resized in the web application, except for the Navigation and Toolbar. The maximum number of resizable widgets per layout is four.

There is only one layout on each page.

Tabs

Tabs allow navigating between multiple sections of the page within a single window.

Each tab can represent a different section or content area.

During the creation of a tab it is possible to choose Name (required field), Description, Layout type, and Image

After adding a Tab, widgets can be added and configured.

Tabs created within a page are available on this page only.

There can be as many tabs on a page as needed.

Default tab conception

When creating a new page, a default tab named "Main" will be automatically generated

Parent-child tabs functionality

It is possible to create child tabs under each main tab. This setup can be a good alternative to using modal windows and sliders. The main tabs typically display a feature table, while each child tab contains a specific widget.

Records in the feature table can have two states: 

1. Selected

2. Active

To work with widgets that are typically located in modals: 

• Click once on the checkbox to select a record.

• Then, navigate to the child tab that contains the desired widget, such as Bulk Update, Query Widget, etc.

To work with widgets that are typically located in sliders: 

• Double-click the checkbox to activate a record.

• After that, go to the child tab for the required widget, like Feature Attributes, Work Spans, Work Tasks, Close Work, etc.

Option	Description	Visualization
Add a Tab	To add a tab, click on a + icon at the top of the page
Tab Name	The tab name will be visible in the Tabs menu on Clearion Web
Tab Description	The tab description text will appear as a tooltip while hovering Tab name box on Clearion Web
Layout type	The tab layout type allows to choose the type of layout used within this tab
Tab image	The tab image feature allows to choose an icon for the created tab
Role	Allows to control the display of a tab for a specific role
Edit	To edit a tab, click on a kebab menu near the tab
Delete	To delete a tab, click on a kebab menu near the tab
Add a child tab	To create a child tab click on a kebab menu inside the tab name box and click on Add child
Collapse and expand the child tabs list	To collapse/expand child tabs click on an arrow inside the tab name box
Tabs order	To change the order of the tabs, drag the tab and drop it in the desired place
Add a Widget	To add a widget, click on the Add button on the left sidebar
Configure a Widget	To configure a widget click on a pencil icon near widget’s name
Delete a Widget	To delete a widget click on a X icon near widget’s name

Modals

The Modals section is a space where a Modal component can be created.

When a modal is created, a widget can be placed and configured in it.

Content placed in the modal is available to Clearion Web users via toolbar buttons.

Modals created within a page are available on this page only.

There can be as many modals on a page as needed.

Option	Description	Visualization
Add a new Modal	To add a new Modal, click on the Add New Slider button and set a slider name
			Add a Widget	To add a widget, click on the Add button on the left sidebar
Configure a Widget	To configure a widget click on a pencil icon near widget’s name
Delete a Widget	To configure a widget click on a X icon near widget’s name

Slider

The Sliders section is a space where a Slider component can be created.

When a slider is created, a widget can be placed and configured in it.

Content placed in the slider is available to Clearion Web users via double-clicking on an entry in the table since the information in the slider directly relates to a specific table entry.

Sliders created within a page are available on this page only.

There can be as many sliders on a page as needed.

Option	Description	Visualization
Add a new Slider	To add a new Slider, click on the Add New Modal button and set a modal name
			Add a Widget	To add a widget, click on the Add button on the left sidebar
Configure a Widget	To configure a widget click on a pencil icon near widget’s name
Delete a Widget	To configure a widget click on a X icon near widget’s name