Components

The components of the Design Pattern Library are snippets of code intended to provide developers with an efficient means to implement elements described in the patterns. These components also help establish the BMC Signature Experience. HTML, CSS and Angular JS used in version 2.0 of MyIT and version 1.0 of Galileo are included in these code snippets. The code for each component is shown inline within the pattern page.

SASS is used in the creation of the CSS implemented in the Universal Client. If the intent is to extend the styling of the application UI, a separate SCSS file should be created specific to the application, and compiled and included at run time. The core SCSS should not be edited.

Only components for the Universal Client for Desktop/Web implementation are provided.

ACTION BLADE PANEL

Problem Users need to have a provision to perform various tasks using additional visual space on top of the main page. Traditional overlay/modal UI may not create engaging user experience.

Solution The Action Blade Panel appears on top of the main view as soon as user initiates action by clicking button/icon on the main page. The Action Blade Panel appears from the right side of the page and occupies half of the visual space on top of the main page. The remaining visual space grays out with the main page partially visible behind. The Action Blade Panel shows content related to the selected action along with buttons to cancel or proceed for the action.

Use When Use the Action Blade Panel when the user needs to perform any action which will require additional visual space on top of the main page.

Why The Action Blade Panel is useful because it provides additional visual space to perform specific actions on top of the main page but without losing sight of the main page. The Action Blade Panel occupies half space on top of the main page which gives ample space to show various data parameters needed to perform actions. The Action Blade Panel is a more engaging, intuitive user interface compared to the traditional overlay/modal.

Chat

Problem Users need to have the ability to engage in integrated chat within an enterprise application so they can communicate with various people such as ticket requester, request manager, co-worker, team member, etc.

Solution Chat integrated into an application enables users to communicate quickly and easily with other users in different roles. Users can simply click on the chat icon provided next to each profile and the chat conversation window pops up on the same screen. Users can also attach a document to the chat conversation.

Use When Use chat when users want to communicate with another person without leaving the system. Show the chat icon next to each person's profile and show the chat conversation window as an overlay to the active screen.

How The chat icon can be shown next to each person's profile wherever the profile appears throughout the application. Some of examples are:

A person's profile detail page If a person's profile is searched through global or contextual search If a person's profile appears as a smart recorder auto-suggestion A ticket detail page where the ticket owner/requester/request manager profiles are displayed