Project Structure
  • 29 Nov 2024
  • 5 Minutes to read
  • Dark
    Light
  • PDF

Project Structure

  • Dark
    Light
  • PDF

Article summary

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