Personalisation

Today we are looking at various aspects of personalisation. 

 

New Grid Control 3.0 Overview

Grid Control 3.0 offers advanced features and improves performance over Grid Control 2.0. Use Grid Control 3.0 to take advantage of the following capabilities:

  • Load and paginate data rapidly
  • Present data in a contemporary interface
  • Filter date ranges, numeric ranges, etc.  via a mini-console
  • Change column order
  • Group columns
  • Specify fixed columns

 

Data Columns

The grid displays data columns defined in JavaScript code, not all columns defined in the data source.

Formats and units for various data values follow Grid Control 2.0 conventions.

 

Group Columns

To group columns, specify in the view file that certain columns have a group title. See columnGroupTitle and columnGroupId column properties in Grid Control 3.0 API Reference.

In the below example, columns showing costs:

 

 

 

 

 

 

Change Column Order

Drag columns left or right to change their order. Reload the view to restore the original order.

If a column lies within a group, you can drag the column within the group, but not outside of it.

 

Group Records by Category

To group records by category, specify the default category in the view. You can also provide a view action to change a category. See groupBy property and groupBy method in Grid Control 3.0 API Reference.


 

Each category header displays the number of records in that category.

By default, the grid expands all categories after the view loads. You can collapse categories, as above, or expand any category to display its list of records.

 

 

 

 

 

Page Control

You can force a grid to display records on multiple pages. See the pageSize property in Grid Control 3.0 API Reference. Page control appears below the list of records:

 

 

If the grid groups records by category, records within each category may span multiple pages. If you expand or collapse any category, the grid recalculates the number of visible records, and number of pages required to display them.

 

Totals and Sub-totals

To display totals for numeric fields, add the showTotals property to the data source field in the view. The grid displays total values in the totals row.

If the grid groups records by category, each category header displays sub-totals for numeric fields, such as cost to complete for work requests:

 

 

 

 

 

 

 

 

 

 

 


Filter Records

You can filter records by any field value.

Apply these filter operations for text and enumerated fields:

 

 

 

 

 

 

 

 

 

 

 

 

 

Apply these filter operations for date and numeric fields:

 

 

 

 

 

 

 

 

 

However, there are some limitations

By comparison with Grid Control 2.0, Grid Control 3.0 has these limitations:

  • Requires JavaScript coding: you cannot define grids in pure AXVW format
  • Does not support Grid Control 2.0's grid index
  • Does not support data export to DOCX, PDF, or XLS files

 

A good example of this is in the Web Central's PM Planner (ab-pm-planner.axvw).  V.24.1 includes ARCHIBUS Grid Control 3.0 - a new set of grid control capabilities.

 

 

Restyled Interfaces

V.24.1 uses restyled interfaces.

 

 

An example of this here is the Portfolio Manager Home Page, illustrating the restyled interface:

 

 

Responsive Drawing Control

ARCHIBUS V.24.1 includes responsive drawing controls.

 

 

The figure below illustrates responsive drawing control used in ARCHIBUS Workplace, the new self-service interface.

 

 

Responsive Web Framework

V.24.1 adds a responsive Web application for the ARCHIBUS Workplace. This addition does not affect existing interfaces.

Personalising ARCHIBUS Workplace requires specialised skills for creating a responsive Web application. Moreover, the ARCHIBUS responsive Web app framework is evolving rapidly; personalisations you make in V.24 may require revisions in later releases.

 

The ARCHIBUS Workplace application uses the React framework packaged using Webpack (https://webpack.js.org/).

The packaging script performs the following steps:

  • Transpiles the ES6 Javascript code to Javascript that is recognized by all modern browsers
  • Minifies the JavaScript code
  • Concatenates the JavaScript code into a single bundle file (main.js)
  • Packages the CSS into a single file
  • Extracts static resources and generates the appropriate links (URLs) in the Javascript code
  • Generates an index.html file that includes required meta tags to install the app to the home screen on Android and iOS device

 

Hopefully this brief guide has been helpful. We look forward to sharing more with you next time. As ever, if you have any questions or queries, you can contact us at MASS.

 

 Martin Matt



BACK TO BLOG


Cloud Computing 14/08/2019

Hello, and welcome to another Mass blog. Recently you may have noticed a tonal shift away from purely technical blogs talking about improvements in Archibus, to a more casual and open ser...
read more view all blog posts

GET IN TOUCH