AppManager Component — fgta5js Documentation

Overview

Inheritance Notice: Class AppManager inherits its baseline DOM selector binding and listeners structure from the base class Component.

The AppManager (also referred to as Application Manager) functions as the root container layout for single page portals. It is responsible for dynamically loading sub-modules into isolated sandboxed viewframes (iframes) based on navigation selection, tracking favorite programs on the main screen, and managing drag-and-drop shortcuts.

Preview

See a real-time preview of how the AppManager layout handles structure registration. Click the demo button below to open a full screen mock layout example.

Mock Workspace Preview

You can check the fully functional live implementation by clicking the button below:

Open AppManager Demo Workspace

HTML Markup

Initialize the main AppManager using EJS template placeholders. Ensure the main container block carries an ID and child targets for favourite listing, current user display, and opened modules:

<main id="appmain">
  <h1>Welcome,</h1>
  <div data-currentuser></div>
  <div data-favourite></div>
  <div data-openedmodule></div>
</main>

Construct the program lists, menus, and user profiles in JavaScript:

const appmgr = new AppManager('appmain');

// create workspace tittle
appmgr.setTitle('My Application Workspace');


// set user after successfull login
appmgr.setUser({
  userid: '1001',
  displayname: 'John Doe',
  profilepic: ''
});

// set program menus
appmgr.setMenu([
  new ModuleData({ name: 'inventory', title: 'Inventory', url: '/inventory' }),
  new ModuleData({ name: 'sales', title: 'Sales Orders', url: '/sales' })
]);

// set user's favourite programs
appmgr.setFavourite(['inventory']);

Properties

Property	Type	Description
`Modules`	`Object`	Gets the list of all registered program modules (Read-only).
`Title`	`String`	Gets the current active title of the hub workspace.
`User`	`Object`	Gets the currently active authenticated user profile details.

Methods

Method	Arguments	Description
`constructor(id)`	`(id: String)`	Binds the layout shell and builds the DOM nodes for headers, menu drawers, and favoriting drop targets.
`setTitle(title)`	`(title: String)`	Sets the display title in the application header and updates browser tab text.
`setMenu(data)`	`(data: Array)`	Renders hierarchical navigation directories and module programs inside the sidebar drawer.
`setMenuIcon(url)`	`(url: String)`	Sets a custom background image URL for the main menu button in the header.
`showMenu()`	`()`	Slides open the sidebar navigation menu drawer.
`setFavourite(data)`	`(data: Array)`	Populates program shortcuts on the primary desktop space based on module IDs.
`openModule(module)`	`(module: Object)`	Asynchronously instantiates or switches to the iframe hosting the target program.
`setUser(data)`	`(data: Object)`	Configures the user details displayed in the settings panels.
`addEventListener(evt, callback)`	`(evt: String, callback: Function)`	Attaches listeners for workspace state modifications and events.

Custom Events

Track layout notifications and triggers using standard event listeners:

Event Name	Trigger Conditions
`logout`	Dispatched when the user clicks the "Sign Out" button in the menu drawer footer.
`openprofile`	Fires when the user profile option is triggered in the sidebar menus.
`opensetting`	Dispatched on selecting workspace setup controls or configurations.
`action`	Triggered programmatically during layout interactions or sub-module changes.
`addtofavourite`	Dispatched when an icon is added to the user's desktop workspace favorites via drag-and-drop.
`removefavourite`	Fires when a program shortcut is dragged out of favorites to the trash bin container.