Start Page Module

Owned by Halvard Meijer
Last updated: Aug 14, 2023 by Per Ove Kviteberg
8 min read

Introduction


Adonis Personnel Manager Start Page Module (SPM) is a new flexible tool that provides a new level of interactivity that allows direct application commands executing and stunning customized visualization of notifications from various sources.


The Module allows at program start-up to focus the user on the initial most frequent actions, important notifications and present dynamically updated blocks of information conveniently. With flexible layout architecture and UI elements designer, advanced notification data fetching configuration, and integrated touch and drag & drop support, new APM features allow deliver engaging customizable business dashboards to deliver an outstanding end-user experience.

The functionality is built in the form of a standard MS Windows Tile interface that is seamless and familiar to users. By the user's needs, maintenance and flexible configuration of both display elements and live notifications are provided. Access to functionality
See Example Tiles on this link.

The module is available from the View Tab of a ribbon menu and Backstage view item.
Access from Ribbon menu "View" tab


Access from Backstage item


When the first time launch of the app, the SPM will be opened automatically by the system by default. The behavior of the SPM on subsequent launches is controlled by the user-defined "open at startup" option.

  • When the option is on, the SPM is activated every time the app is launched.

  • When the option is off, the SPM is processed as part of the workspace as a standard window.


Concepts and general overview

The Start Page Module utilizes a tile-based user interface (UI). It consists of layout groups that contain one or more primary visual UI elements called Tiles.
The Tile is a rectangle screen area holding a collection of items called Frames meant to display a text and/or glyph or pictures. Tile performs actions on an end-user click, it is also capable of displaying frames rich content, giving a user information at a glance. A Tile animation is a sequence of frames, changed after a specific period. Using this feature users can make static tiles to living tiles that display as much information as needed.
In the Configuration, the Designer user can modify Tile animation speed and visual effects, prevent specific content blocks from being animated, pause and resume the animation as required, assign an action by clicking on a UI element (application command, report, etc., or URL link address). For each Tile Fame in the Configuration Designer user can assign a set of display parameters and text blocks presenting notifications data, fetched from different sources.


Predefined elements

When opening the module for the first time a set of three preset UI elements Tiles from the "Welcome" layout group is displayed by default.

  • "Adonis News Feed" provides announcements about upcoming events, new releases, and software updates, etc;

  • "User Guide" click to open the documentation for working with the app;

  • "Company Site" takes the user to the main page of the website of the company that develops the software product;



Customized elements

UI configuration

To open the Configuration Designer and start the arrangement required by the end-user UI elements, click Maintenance-Configuration.


The Configuration Designer window with a set of available actions, layout tree structure, preview panel will be displayed. Adding Tiles
If the focus is set on the root node of the designer tree, the "Add Tile" action is available.


The Tile Settings Form defines the properties of the element namely:
Name Input field. Optional Design-Time element name. Visible: Checkbox. To hide or display the tile item within a layout group. Size: Drop-down box. Tile size on the screen. Switch between predefined sizes: -A Small item, about half the size of a regular item. -A Rregular item. -A Wide item, which is 2x as wide as a regular item. -A Large item.
"Action" Group Type: Drop-down box. Type of click action linked to a tile: -None. -Application Command. -URL.
"Frame Change" Group Interval: Spin Edit Input field. Specifies the animation-delay (in milliseconds) for the item's tile frames. Mode: Drop-down box. Specifies the animation transition effect for tile frames. Adding Tile Frames
If the focus is set on the tile node of the designer tree, the actions: "Add Frame" and "Edit Title", "Delete Tile" is available.




The Frame Settings Form defines the properties of the element namely:
Name Input field. Optional Design-Time element name. Visible: Checkbox. To hide or display the framed item within a tile frame collection.
"Text Area" Group Top Activates a pop-up form. Top tile text area appearance. Configuration of the data source and text for display notification. Bottom: Activates a pop-up form. Bottom tile text area appearance. Configuration of the data source and text for display notification. "Appearance" Group Color: Color selection box. Frame fill color Glyph: Activates a pop-up form for specifying image parameters when displaying a frame.
The image editor form allows the user to upload the desired image from a disk or the icon library. The desired fill mode is selected in the drop-down box "mode".

Linking Actions


To allow the user to perform actions when clicking on a Tile they must be linked. Application Commands
The "Application Command" action Type drop-down box selection allows the "Link" field "Application Command Choice" form to select any available application command that opens a Module, Datagroup, or run the report.




URLs


The "URL" action Type drop-down box selection allows the "Link" field direct input of the WEB site URL that will be opened when the user clicks on the tile.

Linking registered data sources

Tile frames containing Top and Bottom Text Area provide a static text or linked data source for live visualizing notifications fetched from various sources.


The Text Area (Top or Bottom) Form defines the properties of notification information data source and information appearance namely:
"Notification" Group
Data source: Drop-down box. List of prepared data sources to select and display notifications data. Display Text: Input field. Optional static text or сaption that will be displayed before notifications data. Refresh Data on Frame Slide: Checkbox. When this option is Off, data from the linked data source is fetched when the module is opened or by the "refresh" command. If this option is On, data from the associated data source is extracted every time the frame slides
"Appearance" Group
Align Drop-down box. Selecting the text alignment property value allows the user to override the placement of the text block content in one of the predefined positions within the frame. Font: Activates a pop-up form for setting font attributes. You can choose the font name, style, size, and so on.



Word Wrap: Checkbox. Any string is displayed on-screen within a specific rectangle. When text wrapping is enabled the string wraps at the right edge of the rectangle, otherwise the string is displayed in a single line.

Datasource Definition

The module's backend core is based on a DataProvider functionality that allows the user to use custom data sources, perform data fetching, and display the result as live notification information in the text areas of frames.
How to link the data source to the frame and configure the display was described above. General codes view "Start Page- Datasource" is used for creating custom data sources and their configuration.




There are three types of data sources
- SQLDataSource:  based on an SQL Statement, returns a query result string to display as notification information; - ServiceDataSource:  based on a WEB Service, returns a result string from the list of service parameters to display as notification information; - FieldDataSource:  based on the Field Value, returns a string of values filled in based on the results of calculations, input, replication, or otherwise;

  • please see the technical documentation describing the list of parameters and format notation when preparing data sources.

Managing Layout


As described above, the main blocks of notification visualization in the module UI are tiles. Live tiles change their content in an infinite loop with an animation effect that results in data being fetched from linked sources and notifications content being displayed for the end-user.
For own convenience, the user can easily customize the order of tiles on the screen by drag&drop actions and also combining tiles into logical groups.
The actions available can be selected from the " Layout " menu of the module "Management" context tile right-click bottom panel menu.



Available actions: Tiles Visibility: Activates the tile visibility editor form; Rename Group: activates the in-place editing and displays input fields for setting optional text in group headers; Lock Movement: Sets a flag to prevent accidental movement of layout UI elements; Reset Layout: Returns the layout UI elements to the default positions; Tiles Visibility
The end users can control how tiles are displayed using the form available in the "Layout-Tile visibility" menu item.




Organize Groups

When moving a tile using Drag&Drop a vertical bar is automatically displayed indicating the creation of a new group.


The user can set the required headers using the "Rename group" command and place text input.


As a result, a duly organized custom layout with live notifications is displayed on the user's screen.





Summary

In this way, using Adonis Start Page Module, it is possible to create and configure an unlimited number of data sources linked to UI elements, for any type of notifications required by the end-users with maximum flexibility…